/* FUENTES Y BASE */
body {
    font-family: 'Outfit', sans-serif;
}

textarea {
    resize: vertical;
}

/* TIPOGRAFÍA PROSE */
.prose p {
    margin-top: 0;
    margin-bottom: 1em;
}

.prose h4 {
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    font-size: 1.1em;
    font-weight: 600;
}

.prose ul {
    margin-left: 1.5em;
    list-style-type: disc;
}

/* ANIMACIONES */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #008791;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-fade-in-out {
    animation: fadeInOut 3s forwards;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}
/* =========================================
   OCULTAR SCROLLBAR (Móviles y Tablets)
   ========================================= */
@media (max-width: 767px) {
    #main-content::-webkit-scrollbar,
    .overflow-y-auto::-webkit-scrollbar {
        display: none;
    }

    #main-content,
    .overflow-y-auto {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}

/* Barra de scroll Rectangular y Clara para Chrome/Safari en Desktop */
@media (min-width: 768px) {
    #main-content::-webkit-scrollbar,
    .overflow-y-auto::-webkit-scrollbar {
        width: 8px;
    }

    #main-content::-webkit-scrollbar-track,
    .overflow-y-auto::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 0px; 
    }

    #main-content::-webkit-scrollbar-thumb,
    .overflow-y-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1; 
        border-radius: 0px; 
    }

    #main-content::-webkit-scrollbar-thumb:hover,
    .overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

/* =========================================
   SCROLL SIN BARRA VISIBLE
   Para listas dentro de una tarjeta, donde la barra gris de 8px de arriba
   corta el borde redondeado y se lee como un fallo de maquetación.
   El desplazamiento sigue funcionando con rueda, trackpad, teclado y táctil.
   Va DESPUÉS de las media queries a propósito: comparte especificidad con
   `.overflow-y-auto::-webkit-scrollbar`, así que el orden es lo que decide.
   Mismo nombre que en el portal del paciente (request-appointment.page.js),
   para no tener dos utilidades distintas haciendo lo mismo.
   ========================================= */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE y Edge antiguos */
    scrollbar-width: none;     /* Firefox */
}

/* PANTALLA DE CARGA NEURACLOUD (Líneas 315-325) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-modern {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 135, 145, 0.1);
    border-left-color: #008791;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* LÍNEA DE VIDA */
.timeline {
    border-left: 2px solid #d1fae5;
}

.timeline-item {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: -0.4rem;
    top: 0.25rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background-color: #008791;
}

/* MOTOR GRÁFICO DEL GENOGRAMA */
/* Estilos propios (no utilidades de Tailwind) para no depender de una
   recompilación de tailwind.css al tocar el genograma. */

.genogram-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* --- Barra de herramientas ------------------------------------------ */
.genogram-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.genogram-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
}

.genogram-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.genogram-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.genogram-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.genogram-chip {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.genogram-chip.is-saved { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.genogram-chip.is-dirty { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.genogram-chip.is-error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* --- Barra contextual de selección ---------------------------------- */
.genogram-selectionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 0.6rem;
}

.genogram-selectionbar[hidden] { display: none; }

.genogram-selection-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #115e59;
    margin-right: 0.25rem;
}

.genogram-mini {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.genogram-mini:hover { background: #f9fafb; border-color: #9ca3af; }
.genogram-mini.is-danger { color: #b91c1c; border-color: #fecaca; }
.genogram-mini.is-danger:hover { background: #fef2f2; border-color: #f87171; }

.genogram-hint {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.genogram-hint.is-active {
    color: #047857;
    font-weight: 600;
}

/* --- Lienzo ---------------------------------------------------------- */
.genogram-container {
    position: relative;
    background-color: #f9fafb;
    /* Retícula tenue: da referencia visual al arrastrar y al hacer zoom. */
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    min-height: 620px;
    overflow: hidden;
    cursor: grab;
    /* Imprescindible para el arrastre y el pellizco en tableta: sin esto el
       navegador se queda con el gesto y desplaza la página. */
    touch-action: none;
}

.genogram-container * { touch-action: none; }
.genogram-container.panning { cursor: grabbing; }
.genogram-container.is-linking { cursor: crosshair; }
.genogram-container.is-linking .genogram-node { cursor: crosshair; }

.genogram-workspace {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.genogram-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sin esto, un familiar arrastrado fuera del alto del contenedor perdía
       sus líneas: el SVG las recortaba en su propio viewport. */
    overflow: visible;
    pointer-events: none;
}

.genogram-hit {
    pointer-events: stroke;
    cursor: pointer;
}

/* Fechas de la unión y nombres de hogar: se dibujan sobre las propias líneas,
   así que llevan un halo blanco para no leerse a medias. paint-order pinta
   primero el trazo y el relleno encima. */
.genogram-svg-layer text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

/* --- Tarjeta de persona ---------------------------------------------- */
.genogram-node {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 104px;
    /* Alto FIJO, en pareja con NODE_H de genogram.js: la línea de unión se
       traza justo bajo la tarjeta, así que su alto no puede depender de si el
       familiar tiene o no nota clínica. */
    height: 170px;
    overflow: hidden;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.genogram-node:hover {
    z-index: 10;
    border-color: #cbd5e1;
    background-color: rgba(255, 255, 255, 0.7);
}

.genogram-node.selected {
    z-index: 12;
    border-color: #008791;
    background-color: rgba(0, 135, 145, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 135, 145, 0.15);
}

.genogram-node.linking-source {
    border-color: #059669;
    border-style: dashed;
    background-color: rgba(5, 150, 105, 0.08);
}

.genogram-node.dragging {
    z-index: 20;
    border-color: #008791;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 20px -8px rgba(15, 23, 42, 0.35);
    transition: none;
}

.genogram-symbol {
    display: block;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    pointer-events: none;
}

/* Plaquita opaca bajo el símbolo. Los vínculos emocionales se dibujan en la
   capa SVG, por DEBAJO de las tarjetas; con la tarjeta transparente, un zigzag
   de conflicto o una línea triple de fusión atravesaban el nombre y las fechas
   y el texto dejaba de leerse. Aquí quedan tapados, y se ven entrar y salir. */
.genogram-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.1rem 0.15rem 0.2rem;
    border-radius: 0.35rem;
    background: #ffffff;
}

.genogram-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.15;
    color: #111827;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.genogram-info {
    font-size: 0.66rem;
    line-height: 1.3;
    color: #6b7280;
    text-align: center;
}

.genogram-tag {
    margin-top: 0.15rem;
    max-width: 100%;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    color: #0f766e;
    background: rgba(0, 135, 145, 0.1);
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Lienzo vacío ----------------------------------------------------- */
.genogram-empty {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
}

.genogram-empty[hidden] { display: none; }

.genogram-empty-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #4b5563;
    margin: 0;
}

.genogram-empty-sub {
    font-size: 0.8rem;
    color: #9ca3af;
    max-width: 26rem;
    line-height: 1.5;
    margin: 0;
}

.genogram-empty-cta {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background: #008791;
    padding: 0.45rem 1.1rem;
    border-radius: 0.5rem;
}

.genogram-empty:hover .genogram-empty-cta { background: #007a83; }

/* --- Control de zoom -------------------------------------------------- */
.genogram-zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e7eb;
    border-radius: 0.55rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.genogram-zoom button {
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    background: transparent;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}

.genogram-zoom button:hover { background: #f3f4f6; }

.genogram-zoom span {
    min-width: 3rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

/* --- Formularios y leyenda dentro del modal --------------------------- */
.genogram-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.genogram-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.genogram-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
}

.genogram-check input {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    accent-color: #008791;
}

.genogram-check-cell {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.55rem;
}

.genogram-modal-pair {
    font-size: 0.85rem;
    color: #4b5563;
    margin: 0 0 0.85rem 0;
}

.genogram-modal-note {
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.45;
    margin: 0;
}

.genogram-modal-danger {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.genogram-modal-danger button { width: 100%; }

/* --- Problemáticas y hogares ------------------------------------------ */
.genogram-conditions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    max-height: 11rem;
    overflow-y: auto;
}

.genogram-condition {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #374151;
    cursor: pointer;
}

.genogram-condition input {
    width: 1rem;
    height: 1rem;
    accent-color: #008791;
    flex-shrink: 0;
}

.genogram-condition-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.genogram-conditions-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.genogram-condition-edit {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.genogram-condition-edit .form-input {
    margin-top: 0 !important;
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem !important;
}

.genogram-household-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.genogram-household-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.genogram-household-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.genogram-household-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.genogram-household-info strong { font-size: 0.82rem; color: #374151; }

.genogram-household-info span {
    font-size: 0.72rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.genogram-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: #374151;
}

.genogram-legend-hint {
    display: block;
    font-size: 0.68rem;
    color: #9ca3af;
}

.genogram-legend h4 {
    margin: 0.9rem 0 0.2rem 0;
    padding-top: 0.6rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.genogram-legend h4:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.genogram-legend-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 1.9rem;
}

.genogram-legend-row svg { flex-shrink: 0; }

.genogram-legend-keys {
    margin: 0.2rem 0 0 0;
    padding-left: 1.1rem;
    list-style: disc;
    font-size: 0.78rem;
    line-height: 1.7;
    color: #4b5563;
}

.genogram-legend-keys kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 0.25rem;
}

/* --- Pantallas estrechas --------------------------------------------- */
@media (max-width: 640px) {
    .genogram-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .genogram-btn span { display: none; }
    .genogram-btn { padding-left: 0.7rem; padding-right: 0.7rem; }
    .genogram-container { min-height: 440px; }
    .genogram-form-row { grid-template-columns: 1fr; }
    .genogram-check-cell { padding-bottom: 0; }
    .genogram-condition-edit { grid-template-columns: 1fr 1fr; }
}

/* TUTORIALES Y REFERIDOS */
@keyframes attention-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 135, 145, 0.7); transform: scale(1); }
    50% { box-shadow: 0 0 0 15px rgba(0, 135, 145, 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(0, 135, 145, 0); transform: scale(1); }
}

.highlight-referral {
    animation: attention-pulse 2s infinite;
    z-index: 9999 !important;
    border-color: #008791 !important;
}

/* Los temas .driver-popover (referral-theme y driverjs-theme) se eliminaron al
   retirar driver.js. La tarjeta de los recorridos la pinta ahora
   components/tour/guided-tour.js con su propio CSS.
   .highlight-referral SÍ sigue en uso: el recorrido de referidos la aplica
   desde su paso `antes`. */

/* ESTILOS DE IMPRESIÓN */

/* #print-area solo existe para la impresión: aunque se le cargue contenido,
   nunca debe aparecer (ni parpadear) en pantalla. */
@media screen {
    #print-area { display: none !important; }
}

@media print {
    body>*:not(#print-area) { display: none; }
    body, html { background-color: white; }
    .no-print { display: none !important; }
    #print-area, #print-area * { visibility: visible; }
    /* display gana sobre .hidden de Tailwind: basta con rellenar #print-area
       y llamar a window.print(), sin alternar clases. */
    #print-area { display: block !important; position: absolute; left: 0; top: 0; width: 100%; font-family: 'Outfit', 'Segoe UI', sans-serif; color: #333; }
    @page { size: A4; margin: 2.5cm; }
    .report-title-page { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; page-break-after: always; }
    .report-section { page-break-inside: avoid; margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #e2e8f0; }

    /* Listado de pacientes impreso desde el generador de informes */
    .print-list-header { border-bottom: 2px solid #008791; padding-bottom: 10px; margin-bottom: 20px; }
    .print-list-header h1 { font-size: 20px; font-weight: bold; color: #008791; margin: 0; }
    .print-list-header p { font-size: 11px; color: #666; margin: 4px 0 0; }
    .print-list-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .print-list-table thead { display: table-header-group; }
    .print-list-table th { text-align: left; background-color: #f1f5f9; border: 1px solid #cbd5e1; padding: 6px 8px; font-weight: bold; }
    /* overflow-wrap evita que un correo largo se coma el ancho de las demás columnas */
    .print-list-table td { border: 1px solid #e2e8f0; padding: 6px 8px; vertical-align: top; overflow-wrap: anywhere; }
    .print-list-table tr { page-break-inside: avoid; }
    .print-list-footer { margin-top: 16px; font-size: 10px; color: #888; text-align: right; }
}

/* MODERN LOADER */
.loader-modern {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 135, 145, 0.1);
    border-left-color: #008791;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ==========================================================
   EDITOR ENRIQUECIDO DE INFORMES
   El contenido se guarda como HTML. Las tablas se editan como
   celdas reales, no como texto con barras verticales.
   ========================================================== */
.rich-editor {
    outline: none;
    line-height: 1.65;
}

.rich-editor p { margin: 0 0 0.6em; }
.rich-editor p:last-child { margin-bottom: 0; }

.rich-editor ul,
.rich-editor ol {
    margin: 0 0 0.6em 1.35em;
    padding: 0;
}

.rich-editor ul { list-style: disc; }
.rich-editor ol { list-style: decimal; }
.rich-editor li { margin-bottom: 0.2em; }

.rich-editor strong { font-weight: 700; }
.rich-editor em { font-style: italic; }

.rich-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.7em 0;
    border: 1px solid #cbd5e1;
    table-layout: fixed;
}

.rich-editor th,
.rich-editor td {
    border: 1px solid #e2e8f0;
    padding: 6px 9px;
    vertical-align: top;
    min-width: 48px;
    word-break: break-word;
}

.rich-editor th {
    background: #f2f9fa;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #4a6572;
}

.rich-editor td { background: #ffffff; }
.rich-editor tbody tr:nth-child(even) td { background: #f8fafc; }

/* La celda donde está el cursor se resalta, para no perderse en tablas grandes */
.rich-editor td:focus,
.rich-editor th:focus { outline: 2px solid rgba(0, 135, 145, 0.35); outline-offset: -2px; }

/* Marcador de posición cuando el campo está vacío */
.rich-editor:empty:before,
.rich-editor[data-empty="true"]:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

/* Tablas escritas dentro de un informe. Se usan en el diálogo de inserción y
   el PDF las redefine con sus propias medidas. */
.rt-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 12px;
}

.rt-table th {
    background: #f2f9fa;
    border: 1px solid #e2e8f0;
    padding: 6px 9px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #4a6572;
    white-space: nowrap;
}

.rt-table td {
    border: 1px solid #e2e8f0;
    padding: 6px 9px;
    color: #1e293b;
    vertical-align: top;
    min-width: 60px;
}

.rt-table tbody tr:nth-child(even) { background: #f8fafc; }

/* Fondo a cuadros para previsualizar PNG con transparencia (firma y sello). */
.asset-checker {
    background-image:
        linear-gradient(45deg, #eef2f6 25%, transparent 25%, transparent 75%, #eef2f6 75%),
        linear-gradient(45deg, #eef2f6 25%, transparent 25%, transparent 75%, #eef2f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: #ffffff;
}

/* Spinner en línea para estados de carga dentro de botones.
   Toma el color del texto del botón (currentColor), así funciona igual sobre
   fondo sólido o claro sin depender de las clases border-* que traen las llamadas. */
.loader-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ZOOM: PARCHE MÍNIMO CONTRA EL PREFLIGHT DE TAILWIND
   Aquí había un "escudo" que forzaba box-sizing:content-box y border-style:none
   a TODOS los descendientes de #video-container, con la idea de que Zoom calcula
   su grilla en content-box. Es falso en el Meeting SDK 6.2.0: el bundle declara
   box-sizing:border-box en 38 sitios (raíz, ventana arrastrable, barra, paneles,
   lista virtualizada) y content-box en uno solo, un <input> interno.
   Medido en navegador cargando este mismo CSS, el escudo inflaba un panel que el
   SDK declara de 480px hasta 544px, borraba los separadores de la barra y dejaba
   los botones en 39x24 px en vez de 69x46: de ahí los iconos diminutos y el vídeo
   descuadrado.
   El resto del Preflight no hace falta blindarlo: sus selectores universales
   tienen especificidad 0,0,0 y pierden contra las clases de emotion del SDK
   (0,1,0). Lo único que sí muerde es el `max-width:100%` de Preflight sobre
   img/video: medido, estrangula un vídeo de 1324px de ancho hasta 731px.

   OJO CON LA ESPECIFICIDAD, aquí está el truco: el selector va envuelto en
   `:where()` a propósito, para que el `#` NO sume y la regla se quede en 0,0,1.
   Así empata con Preflight y le gana por orden de carga (esta hoja va después
   de tailwind.css), pero PIERDE contra las clases del SDK (0,1,0) y no le pisa
   sus tamaños. Escrito como `#video-container video` (1,0,1) le ganaba también
   al SDK: un vídeo que Zoom dimensiona a 745px de alto se quedaba en 150px.
   No añadir aquí `height`: Preflight pone `height:auto`, que es lo mismo que
   calcula el navegador, así que no hay nada que revertir. */
:where(#video-container) img,
:where(#video-container) video { max-width: none; }

/* SCROLLBARS */
@media (min-width: 768px) {
    #main-content::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar { width: 8px; }
    #main-content::-webkit-scrollbar-track, .overflow-y-auto::-webkit-scrollbar-track { background: #f8fafc; }
    #main-content::-webkit-scrollbar-thumb, .overflow-y-auto::-webkit-scrollbar-thumb { background: #cbd5e1; }
}

.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
/* ESTADO "TODO AL DÍA" (widget Requiere tu atención) */
@keyframes attention-clear-ping {
    0% { transform: scale(0.85); opacity: 0.8; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
}
.attention-clear-ping {
    animation: attention-clear-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes attention-check-draw {
    to { stroke-dashoffset: 0; }
}
.attention-check-path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: attention-check-draw 0.6s ease-out 0.3s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .attention-clear-ping { animation: none; opacity: 0; }
    .attention-check-path { animation: none; stroke-dashoffset: 0; }
}

/* Logotipo bicolor: 'Neura' toma el color del contenedor (blanco sobre
   fondo oscuro, tinta sobre fondo claro) y 'Cloud' va siempre en el verde
   de marca. Clase propia a proposito: Tailwind aqui es estatico y una
   utilidad nueva obligaria a recompilar. */
.nc-cloud { color: #008791; }

/* =========================================================
   LÍNEA DE VIDA — FORMULARIO DE NUEVO EVENTO
   ---------------------------------------------------------
   En fila (desde 768px) el botón se alinea con la base de los
   campos, no con la de sus etiquetas. Se resuelve aquí porque
   `md:items-end` no está en el CSS compilado del panel y
   añadirla obligaría a recompilar Tailwind en cada despliegue.

   Por debajo de esa anchura el formulario va en columna y NO
   debe llevar alineación al pie: en columna eso alinea a la
   derecha y encoge cada campo a su contenido, que es lo que
   dejaba los dos inputs estrechos y descolocados en móvil.
   ========================================================= */
@media (min-width: 768px) {
  #timeline-form { align-items: flex-end; }
}

/* =========================================================
   MENÚ LATERAL CONTRAÍBLE
   ---------------------------------------------------------
   El ancho lo lleva el propio <aside>, que es un flex item junto al
   contenedor del contenido (flex-1). Al encogerlo, el contenido crece
   solo para ocupar lo que deja: no queda ningún hueco en blanco.

   Se resuelve con una clase de estado y CSS propio, y no alternando
   utilidades de Tailwind, porque el CSS del panel se compila estático
   y varias de las que harían falta (md:w-16, rotate-180) no están
   generadas: usarlas obligaría a recompilar en cada despliegue.

   Solo se aplica desde 768px. Por debajo el menú es un cajón que entra
   y sale con transform, y contraerlo ahí no significa nada.
   ========================================================= */
@media (min-width: 768px) {
  #sidebar.is-collapsed {
    width: 4.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    overflow: hidden;
  }

  /* Las etiquetas se ocultan, pero cada control conserva su `title`,
     así que el menú sigue siendo utilizable en modo iconos. */
  #sidebar.is-collapsed .sidebar-label {
    display: none;
  }

  #sidebar.is-collapsed .sidebar-head {
    justify-content: center;
  }

  #sidebar.is-collapsed nav a,
  #sidebar.is-collapsed [data-nav],
  #sidebar.is-collapsed #logout-button {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* El botón de contraer se sale de la caja cuando no hay ancho para él;
     pasa a ocupar su propia fila bajo el logotipo. */
  #sidebar.is-collapsed .sidebar-collapse-btn {
    position: absolute;
    top: 4.75rem;
    left: 50%;
    transform: translateX(-50%);
  }

  #sidebar.is-collapsed nav {
    margin-top: 2.25rem;
  }
}

/* =========================================================
   CUPÓN DE CÓDIGO DE INVITACIÓN
   ---------------------------------------------------------
   Antes era una tarjeta blanca dentro de un anillo con degradado teal,
   con un icono en un cuadrado de color a la izquierda. El anillo con
   degradado es el recurso más repetido de las plantillas generadas y el
   icono no aportaba nada que el titular no dijera ya.

   Ahora la sección toma la forma de lo que es: un cupón que se canjea.
   La línea perforada y las dos muescas no son adorno — separan el
   argumento (izquierda) del acto de canjear (derecha), que es la misma
   división que tiene un cupón de papel.

   Va en CSS propio y no en utilidades de Tailwind porque las muescas
   necesitan pseudo-elementos posicionados, y porque el CSS del panel se
   compila estático: media docena de clases nuevas obligarían a
   recompilarlo en cada despliegue.
   ========================================================= */
.cupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(13, 42, 51, 0.35);
}

.cupon-info { padding: 30px 34px; }

.cupon-eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #008791;
}

.cupon-info h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.cupon-info p {
  margin: 8px 0 0;
  max-width: 44ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #6b7280;
}

/* El talón: fondo distinto y línea perforada, como el lado que se corta. */
.cupon-accion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 26px 30px;
  background: #f8fafc;
  border-left: 2px dashed #cbd5e1;
  border-radius: 0 15px 15px 0;
}

/* Las muescas se pintan del color del lienzo de la aplicación (bg-gray-100),
   de modo que parecen recortadas en el papel y no dibujadas encima. */
.cupon-accion::before,
.cupon-accion::after {
  content: "";
  position: absolute;
  left: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Sin borde a proposito: un troquel es un agujero en el papel, no un circulo
     dibujado encima. El aro delataba que estaba pintado y rompia la ilusion.
     El unico borde que se ve al pasar por la muesca es el de la propia tarjeta,
     que la muesca interrumpe, que es justo lo que hace un troquel. */
  background: #f3f4f6;
}

.cupon-accion::before { top: -11px; }
.cupon-accion::after  { bottom: -11px; }

/* El campo repite el tratamiento del Código de Consultorio de Configuración:
   monoespaciado, espaciado ancho y teal. Son el mismo tipo de dato, así que
   se leen igual. */
.cupon-codigo {
  width: 15rem;
  padding: 13px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: #008791;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cupon-codigo::placeholder {
  color: #cbd5e1;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.cupon-codigo:focus {
  outline: none;
  border-color: #008791;
  box-shadow: 0 0 0 3px rgba(0, 135, 145, 0.12);
}

.cupon-btn {
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: #008791;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.cupon-btn:hover:not(:disabled) { background: #006b72; transform: translateY(-1px); }
.cupon-btn:disabled { opacity: 0.75; cursor: default; }
.cupon-btn:focus-visible { outline: 2px solid #006b72; outline-offset: 2px; }

/* En vertical el corte pasa a ser horizontal y las muescas, a los lados. */
@media (max-width: 780px) {
  .cupon { grid-template-columns: 1fr; }
  .cupon-info { padding: 26px 24px 22px; }
  .cupon-accion {
    border-left: 0;
    border-top: 2px dashed #cbd5e1;
    border-radius: 0 0 15px 15px;
    padding: 24px;
  }
  .cupon-accion::before,
  .cupon-accion::after { top: -11px; bottom: auto; }
  .cupon-accion::before { left: -11px; }
  .cupon-accion::after  { left: auto; right: -11px; }
  .cupon-codigo { width: 100%; }
}

/* =========================================================
   TARJETA DEL PLAN SUPERIOR (Neura Core+)
   ---------------------------------------------------------
   Rellena en el teal PROFUNDO de la marca, no en el principal.
   El motivo es de contraste, no de gusto: sobre #008791 el texto del
   cuerpo en blanco se queda en 4,31:1, y el mínimo accesible para texto
   normal es 4,5:1. Sobre #006b72 sube a 6,28:1.

   Sigue siendo el verde de la casa: es el mismo tono que usan los
   botones de marca al pasar el cursor.

   Va aquí y no como utilidad de Tailwind porque `bg-[#006b72]` no está
   en el CSS compilado y añadirla obligaría a recompilar en cada despliegue.
   ========================================================= */
.plan-core {
    background-color: #006b72;
    border-color: #006b72;
}