:root {
    --ink: var(--site-ink, #19222e);
    --muted: var(--site-muted, #697586);
    --line: var(--site-line, #dfe5ec);
    --paper: var(--site-paper, #ffffff);
    --canvas: var(--site-canvas, #f4f7fa);
    --navy: var(--site-navy, #15314f);
    --navy-2: var(--site-navy-2, #244f78);
    --focus-ring: var(--site-focus-ring, rgba(47, 125, 246, .24));
    --gold: var(--site-gold, #c3983f);
    --success: var(--site-success, #1f7a55);
    --danger: var(--site-danger, #a83a3a);
    --blue: var(--site-blue, #2f7df6);
    --blue-soft: var(--site-blue-soft, #eaf2ff);
    --blue-dark: var(--site-blue-dark, #1f67dd);
    --space-1: .4rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 18px;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

.message-row-unread td {
    background: #f4f9ff;
    font-weight: 700;
}

.message-subject-link {
    color: var(--color-primary, #123f68);
    font-weight: 800;
    text-decoration: none;
}

.message-subject-link:hover {
    text-decoration: underline;
}

.message-compose-form {
    display: grid;
    gap: 1rem;
}

.message-compose-form select[multiple] {
    min-height: 11rem;
}

.message-detail-card {
    display: grid;
    gap: 1.2rem;
}

.message-thread {
    display: grid;
    gap: 1rem;
}

.message-bubble {
    max-width: min(84%, 780px);
    padding: 1rem 1.1rem;
    border: 1px solid #d9e5f0;
    border-radius: 18px 18px 18px 7px;
    background: linear-gradient(180deg, #f7fbff 0%, #f3f8fd 100%);
    box-shadow: 0 10px 26px rgba(29, 43, 64, .05);
}

.message-bubble.is-self {
    margin-left: auto;
    border-color: #b7ddd1;
    border-radius: 18px 18px 7px 18px;
    background: linear-gradient(180deg, #e7f5f0 0%, #dff1eb 100%);
}

.message-bubble-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .65rem;
}

.message-bubble-head strong {
    display: block;
    font-size: .92rem;
}

.message-bubble-head span {
    color: var(--muted);
    font-size: .75rem;
}

.message-bubble-tag {
    padding: .26rem .55rem;
    border-radius: 999px;
    color: var(--navy);
    background: rgba(21, 49, 79, .08);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.message-bubble-body {
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: normal;
}

.message-bubble-meta {
    margin-top: .8rem;
    color: var(--muted);
    font-size: .82rem;
}

.message-attachments-inline {
    margin-top: .8rem;
}

.message-reply-box {
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid #d6e1eb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
}

.message-reply-box h3 {
    margin-bottom: .8rem;
    font-size: 1rem;
}

.message-reply-form {
    display: grid;
    gap: 1rem;
}

.message-meta-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: 1rem;
    border: 1px solid var(--border-color, #dbe4ef);
    border-radius: 16px;
    background: #f8fbff;
}

.message-meta-grid p {
    margin: .25rem 0 0;
}

.message-body {
    min-height: 12rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color, #dbe4ef);
    border-radius: 18px;
    background: #fff;
    color: var(--text-color, #182235);
    line-height: 1.6;
    white-space: normal;
}

.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}

.topbar-message-button {
    position: relative;
    min-width: 42px;
    padding-inline: .7rem;
}

.topbar-message-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    padding: 0 .3rem;
    border: 2px solid var(--navy);
    border-radius: 999px;
    color: #fff;
    background: #e15454;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(225, 84, 84, .26);
}

.topbar-report-button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-report-button:hover {
    background: #dbeafe;
    color: #1e40af;
}

.alert-card {
    border-color: #fecaca;
    background: #fff7f7;
    color: #7f1d1d;
}

.definition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.definition-grid > div {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.definition-grid span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.definition-grid strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.prose-block {
    display: grid;
    gap: 8px;
}

.prose-block h3 {
    margin: 10px 0 0;
    font-size: 0.92rem;
    color: #334155;
}

.prose-block p {
    margin: 0;
    color: #475569;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .topbar-report-button {
        max-width: 128px;
        font-size: 0.74rem;
        padding: 0 8px;
    }
}

/* =====================================================
   MODAL DE MENSAJERÍA INSTANTÁNEA — Sistema de diseño
   Swiss/Minimalist · Azul institucional · Light mode
   ===================================================== */

.message-popup {
    width: min(1080px, calc(100vw - 2rem));
    max-height: min(86vh, 820px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #f8fafc;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, .08),
        0 24px 64px rgba(15, 23, 42, .28);
    overflow: hidden;
}

.message-popup::backdrop {
    background: rgba(11, 18, 32, .6);
    backdrop-filter: blur(4px);
}

/* Shell: header fijo + layout scrollable */
.message-popup-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: min(86vh, 820px);
    overflow: hidden;
}

/* ── HEADER ─────────────────────────────────────────── */
dialog.message-popup header.message-popup-header,
.message-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: .75rem 1.25rem !important;
    background: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    color: #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.message-popup-header-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.message-popup-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem .55rem;
    background: #2563eb;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    border-radius: 6px;
    flex-shrink: 0;
}

dialog.message-popup .message-popup-header h2,
dialog.message-popup .message-popup-header-title,
.message-popup-header h2,
.message-popup-header-title {
    margin: 0 !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.message-popup-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.message-popup-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    background: rgba(37, 99, 235, .25);
    color: #93c5fd;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, .35);
    white-space: nowrap;
}

dialog.message-popup .message-popup-close,
.message-popup-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    padding: 0 !important;
}

dialog.message-popup .message-popup-close:hover,
.message-popup-close:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .25) !important;
}

/* ── LAYOUT: DOS COLUMNAS ────────────────────────────── */
.message-popup-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

/* ── COLUMNA IZQUIERDA: LISTA ─────────────────────────── */
.message-popup-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid #e2e8f0;
    background: #f1f5f9;
    overflow: hidden;
}

.message-popup-list-title {
    margin: 0;
    padding: .75rem 1rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.message-popup-list-items {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .8rem .75rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* Tarjeta de mensaje individual */
.message-popup-item {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .7rem .75rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 13px;
    color: #0f172a;
    text-align: left;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    min-height: 6.25rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.message-popup-item:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .1);
}

.message-popup-item.is-unread {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
}

.message-popup-item.is-unread .message-popup-item-name {
    font-weight: 800;
}

.message-popup-item.is-unread .message-popup-item-preview {
    color: #334155;
    font-weight: 600;
}

.message-popup-item.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, .14);
}

/* Cabecera de la tarjeta: avatar + info + badge */
.message-popup-item-header {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.message-popup-item-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #bfdbfe;
    text-transform: uppercase;
}

.message-popup-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.message-popup-item-name {
    display: -webkit-box;
    font-size: .82rem;
    font-weight: 700;
    color: #0f172a;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.message-popup-item-subject {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .72rem;
    color: #64748b;
    line-height: 1.35;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.message-popup-item-time {
    display: block;
    font-size: .66rem;
    color: #94a3b8;
    margin-top: 0;
}

/* Badge: Sin leer / Leído */
.message-popup-item-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}

.message-popup-item-badge.badge--unread {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.message-popup-item-badge.badge--read {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Preview del cuerpo del mensaje */
.message-popup-item-preview {
    margin: 0;
    font-size: .72rem;
    color: #64748b;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: .42rem .5rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 9px;
    overflow-wrap: anywhere;
}

/* Botón "Leer" */
.message-popup-item-footer {
    display: none;
    justify-content: flex-end;
    margin-top: .05rem;
}

/* Estado vacío izquierda */
.message-popup-empty {
    margin: 1.5rem auto;
    text-align: center;
    color: #64748b;
    font-size: .82rem;
}

/* ── COLUMNA DERECHA: DETALLE ─────────────────────────── */
.message-popup-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    overflow: hidden;
}

/* Perfil del remitente activo */
.message-popup-detail-profile {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1.1rem .75rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #fafbfd;
}

.message-popup-detail-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #bfdbfe;
    text-transform: uppercase;
}

.message-popup-detail-info {
    flex: 1;
    min-width: 0;
}

.message-popup-detail-info strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #0f172a;
}

.message-popup-detail-course {
    display: block;
    font-size: .75rem;
    color: #475569;
    margin-top: .1rem;
}

.message-popup-detail-time {
    display: block;
    font-size: .7rem;
    color: #94a3b8;
    margin-top: .15rem;
}

.message-popup-detail-subject {
    margin: .3rem 0 0;
    font-size: .8rem;
    font-weight: 600;
    color: #1d4ed8;
}

.message-popup-detail-link {
    flex-shrink: 0;
    align-self: flex-start;
    padding: .3rem .7rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: background .15s ease;
}

.message-popup-detail-link:hover {
    background: #e2e8f0;
}

/* Área de conversación (burbujas AJAX) */
.message-popup-conversation {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #f8fafc;
}

/* Estado de carga / vacío de conversación */
.message-popup-conversation:empty::after {
    content: 'Selecciona un mensaje para ver la conversación.';
    display: block;
    margin: auto;
    text-align: center;
    color: #94a3b8;
    font-size: .8rem;
    padding: 2rem;
}

/* Burbujas de conversación */
.popup-bubble {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

.popup-bubble--self {
    align-self: flex-end;
    align-items: flex-end;
}

.popup-bubble--other {
    align-self: flex-start;
    align-items: flex-start;
}

.popup-bubble__body {
    padding: .55rem .85rem;
    border-radius: 14px;
    font-size: .8rem;
    line-height: 1.55;
    word-break: break-word;
}

.popup-bubble--self .popup-bubble__body {
    background: #2563eb;
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

.popup-bubble--other .popup-bubble__body {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 14px 14px 14px 4px;
}

.popup-bubble__sender {
    font-size: .67rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: .2rem;
    padding: 0 .25rem;
}

.popup-bubble__time {
    font-size: .65rem;
    color: #94a3b8;
    margin-top: .2rem;
    padding: 0 .25rem;
}

/* ── ÁREA DE COMPOSICIÓN ─────────────────────────────── */
.message-popup-compose {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem 1rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
}

.message-popup-compose-label {
    font-size: .7rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Editor de texto reutilizable */
.rich-text-editor,
.message-popup-compose-editor {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: #fff;
}

.rich-text-editor:focus-within,
.message-popup-compose-editor:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.rich-text-editor__toolbar,
.message-popup-toolbar {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .35rem .5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.rich-text-editor__button,
.message-popup-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    flex-shrink: 0;
}

.rich-text-editor__button:hover,
.message-popup-toolbar-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}

.rich-text-editor__button svg,
.message-popup-toolbar-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.rich-text-editor__separator,
.message-popup-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 .25rem;
    flex-shrink: 0;
}

.rich-text-editor__input,
.message-popup-textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    max-height: 180px;
    padding: .65rem .8rem;
    border: 0;
    background: transparent;
    font-size: .86rem;
    line-height: 1.55;
    color: #0f172a;
    resize: vertical;
    font-family: inherit;
    outline: none;
}

.rich-text-editor__input::placeholder,
.message-popup-textarea::placeholder {
    color: #94a3b8;
}

/* Preview de archivo adjunto - minimalista e inline */
.message-popup-file-preview {
    display: none;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: .72rem;
    color: #1d4ed8;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.message-popup-file-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.message-popup-file-remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #64748b;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 .15rem;
    flex-shrink: 0;
    transition: color .12s ease;
}

.message-popup-file-remove:hover {
    color: #ef4444;
}

/* Acciones: Enviar + Adjuntar — diseño minimalista */
.message-popup-compose-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.message-popup-btn-send {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    background: #1e293b;
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.message-popup-btn-send:hover {
    background: #0f172a;
}

.message-popup-btn-send svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Botón adjuntar: solo ícono + texto, sin input nativo visible */
.message-popup-btn-attach {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    background: transparent;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    flex-shrink: 0;
}

.message-popup-btn-attach:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.message-popup-btn-attach svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 2;
}

.message-popup-attach-wrapper {
    position: relative;
    display: inline-flex;
}

/* Indicador de archivo adjunto seleccionado (compacto) */
.message-popup-attach-indicator {
    display: none;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    font-size: .72rem;
    color: #1d4ed8;
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
}

.message-popup-attach-indicator.is-visible {
    display: inline-flex;
}

.message-popup-attach-indicator-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.message-popup-attach-clear {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #64748b;
    font-size: .9rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: color .12s ease;
}

.message-popup-attach-clear:hover {
    color: #ef4444;
}

/* Empty reply state */
.message-popup-empty-reply {
    margin: auto;
    text-align: center;
    color: #64748b;
    font-size: .82rem;
    padding: 1.5rem;
}

body.modal-open {
    overflow: hidden;
}
















* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .5rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: 0; }
h2 { margin-bottom: .35rem; font-size: 1.35rem; }
a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.topbar {
    height: 68px;
    padding: 0 clamp(var(--space-3), 4vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background: var(--navy);
    border-bottom: 3px solid var(--gold);
}
.brand { font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.user-menu, .user-menu form { display: flex; align-items: center; gap: var(--space-3); }
.link-button { padding: 0; border: 0; color: #dce8f3; background: none; cursor: pointer; text-decoration: underline; }
.container {
    width: min(1180px, calc(100% - clamp(1rem, 4vw, 3rem)));
    margin: 0 auto;
    padding: clamp(var(--space-3), 3vw, var(--space-6)) 0 4rem;
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-6);
    padding: clamp(var(--space-5), 4vw, 3rem);
    color: white;
    background: linear-gradient(135deg, var(--navy), #1f5d76);
    border-radius: clamp(var(--radius-md), 2vw, 22px);
    box-shadow: 0 18px 55px rgba(21, 49, 79, .16);
}
.hero p { max-width: 650px; margin-bottom: 0; color: #d8e5ed; font-size: 1.05rem; }
.hero .eyebrow { color: #e7c36e; }
.hero-stat { min-width: 155px; padding: var(--space-4); text-align: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); }
.hero-stat strong { display: block; font-size: 2.3rem; }
.hero-stat span { color: #d8e5ed; font-size: .86rem; }

.eyebrow { margin-bottom: .45rem; color: var(--gold); font-size: .73rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.tabs { display: flex; gap: var(--space-1); margin: var(--space-5) 0; padding: var(--space-1); overflow-x: auto; background: #e7ecf2; border-radius: var(--radius-md); scrollbar-width: thin; }
.tab { flex: 1; min-width: 145px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; font-weight: 700; white-space: nowrap; }
.tab.is-active { color: var(--navy); background: white; box-shadow: 0 3px 12px rgba(26, 40, 56, .08); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.card { padding: clamp(var(--space-4), 3vw, var(--space-6)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(32, 51, 70, .06); }
.plan-form, .stack { display: grid; align-content: start; grid-auto-rows: max-content; gap: var(--space-4); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.form-grid { display: grid; gap: var(--space-3); }
.form-grid > *, .catalog-grid > * { min-width: 0; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: grid; align-content: start; gap: var(--space-1); min-width: 0; color: #344151; font-size: .88rem; font-weight: 700; }
input, select, textarea {
    display: block;
    min-width: 0;
    min-height: 44px;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #cbd5df;
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: white;
    font: inherit;
    font-weight: 400;
}
input[type="date"] { appearance: auto; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(36, 79, 120, .15); border-color: var(--navy-2); }
.form-actions { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-weight: 800; text-decoration: none; text-align: center; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.button:hover { box-shadow: 0 8px 18px rgba(29, 43, 64, .09); transform: translateY(-1px); }
.button:active { transform: translateY(0); box-shadow: none; }
.button:disabled,
.button[aria-disabled="true"] { transform: none; box-shadow: none; }
.button-primary { color: white; background: var(--navy); }
.button-primary:hover { background: var(--navy-2); }
.button-secondary { color: var(--navy); background: white; border-color: #b9c7d5; }
.button-sign { color: #30250d; background: #ecd99f; border-color: #d1ad4e; }
.button-sign:hover { background: #e4ca7b; }
.button-small { min-height: 34px; padding: .5rem .7rem; font-size: .78rem; }
.text-link { color: var(--navy-2); font-weight: 700; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-3); margin-bottom: var(--space-3); }
.catalog-card { container-type: inline-size; width: 100%; }
.catalog-card .button { width: 100%; }
.mini-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1); }
.mini-list a, .pill { max-width: 100%; padding: .38rem .58rem; overflow-wrap: anywhere; border-radius: 999px; color: var(--navy); background: #eaf1f6; font-size: .75rem; font-weight: 700; line-height: 1.25; }
.mini-list a { text-decoration: none; }
.mini-list a:hover { background: #dbe8f1; text-decoration: underline; }
.table-card { padding: 0; overflow: hidden; }

.google-classroom-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #dbe4ef;
    border-radius: var(--radius-sm);
    background: #f8fbff;
}
.google-classroom-fields > .field-label,
.google-classroom-fields > .google-classroom-status,
.google-classroom-fields > .google-classroom-actions {
    grid-column: 1 / -1;
}
.google-classroom-field {
    min-width: 0;
}
.google-classroom-field select,
.google-classroom-field input {
    margin-top: .35rem;
}
.google-classroom-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 24px;
    font-size: .82rem;
}
.google-classroom-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .google-classroom-fields {
        grid-template-columns: 1fr;
    }
}
.table-card .section-heading { padding: var(--space-5); }
.catalog-summary { margin-top: var(--space-3); }
.history-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: var(--space-3);
    padding: 0 var(--space-5) var(--space-5);
}
.history-filters select { min-height: 40px; }
.history-filter-actions { display: flex; gap: var(--space-1); }
.history-filter-actions .button { min-height: 40px; white-space: nowrap; }
.table-wrap {
    overflow-x: auto;
    scrollbar-color: #9db1c9 #edf2f7;
    scrollbar-width: thin;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: #edf2f7; border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb { background: #9db1c9; border-radius: 999px; border: 2px solid #edf2f7; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #f8fafc; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
td { font-size: .88rem; }
td small { display: block; margin-top: .18rem; color: var(--muted); }
.history-empty { padding: var(--space-6); color: var(--muted); text-align: center; }
.actions { display: flex; gap: var(--space-1); white-space: nowrap; }
.actions-cell { position: relative; vertical-align: middle; text-align: center; }
.signature-history { margin-top: var(--space-3); }
.status { display: inline-flex; padding: .25rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: capitalize; }
.status-signed { color: #155d40; background: #dff4e9; }
.status-failed { color: #842d2d; background: #fbe3e3; }
.status-processing { color: #735515; background: #fff0bd; }

.empty-state { padding: clamp(var(--space-6), 6vw, 3rem) var(--space-3); text-align: center; background: white; border: 1px dashed #b8c5d1; border-radius: var(--radius-lg); }
.alert { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 650; }
.alert-success { color: #155d40; background: #dff4e9; }
.alert-error { color: #842d2d; background: #fbe3e3; }
.alert-info { color: #214f70; background: #e2f0fa; }

.auth-shell { min-height: calc(100vh - 4rem); display: grid; place-items: center; }
.auth-card { width: min(440px, 100%); padding: clamp(var(--space-5), 5vw, 2.6rem); background: white; border-top: 5px solid var(--gold); border-radius: var(--radius-lg); box-shadow: 0 24px 70px rgba(21, 49, 79, .14); }
.auth-card h1 { color: var(--navy); font-size: 2.5rem; }
.auth-card .text-link { display: inline-block; margin-top: var(--space-4); }
.signing-card { max-width: 920px; margin: 0 auto; }
.signing-card h1 { margin-bottom: var(--space-1); font-size: clamp(2rem, 5vw, 3rem); }
.security-note { padding: var(--space-3); color: #174b3a; background: #e7f5ee; border: 1px solid #b7ddca; border-radius: var(--radius-sm); }
.check-label { display: flex; align-items: center; grid-template-columns: auto 1fr; gap: var(--space-2); cursor: pointer; }
.check-label input { flex: 0 0 auto; width: 1.15rem; min-height: 1.15rem; height: 1.15rem; margin: 0; }
.signature-position { margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.signature-position legend { padding: 0 var(--space-1); color: var(--navy); font-weight: 800; }
.signature-position:disabled { opacity: .55; }
.position-grid { grid-template-columns: repeat(5, minmax(80px, 1fr)); }

body.modal-open { overflow: hidden; }
.signature-modal {
    position: fixed;
    inset: 12px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #eef2f6;
    box-shadow: 0 30px 90px rgba(9, 23, 38, .35);
}
.signature-modal::backdrop { background: rgba(9, 23, 38, .72); backdrop-filter: blur(4px); }
.signature-window { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.signature-header, .signature-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: white;
}
.signature-header { border-bottom: 1px solid var(--line); }
.signature-header h2 { margin: 0; font-size: 1.5rem; }
.signature-header p { margin-bottom: 0; }
.signature-footer { position: relative; z-index: 5; flex: 0 0 auto; border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(21, 49, 79, .08); }
.signature-footer > div { display: flex; gap: var(--space-2); }
.icon-button, .tool-button {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    padding: .45rem .7rem;
    border: 1px solid #c8d2dc;
    border-radius: 8px;
    color: var(--navy);
    background: white;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}
.icon-button { border: 0; font-size: 1.7rem; }
.tool-button:disabled { cursor: not-allowed; opacity: .45; }
.tool-danger { margin-left: auto; color: #8b3030; }
.signature-alert { margin: var(--space-3) var(--space-5) 0; padding: var(--space-2) var(--space-3); color: #842d2d; background: #fbe3e3; border-radius: var(--radius-sm); font-weight: 700; }
.signature-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--space-3); padding: var(--space-3); }
.pdf-panel, .signature-form-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
}
.pdf-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.pdf-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.toolbar-group { display: flex; align-items: center; gap: var(--space-2); }
.pdf-viewport { min-height: 0; overflow: auto; padding: var(--space-5); background: #cbd4dd; }
.pdf-stage { position: relative; margin: 0 auto; background: white; box-shadow: 0 8px 28px rgba(17, 34, 51, .24); touch-action: none; user-select: none; }
.pdf-stage canvas { display: block; }
.pdf-help { margin: 0; padding: var(--space-2) var(--space-3); color: var(--muted); border-top: 1px solid var(--line); font-size: .8rem; }
.signature-box {
    position: absolute;
    display: grid;
    grid-template-columns: minmax(42px, 32%) minmax(0, 1fr);
    align-items: center;
    min-width: 180px;
    min-height: 65px;
    overflow: hidden;
    border: 1px dashed #1f6ea5;
    border-radius: 3px;
    color: #17334c;
    background: rgba(255, 255, 255, .9);
    cursor: move;
    box-shadow: 0 3px 12px rgba(20, 83, 126, .22);
}
.signature-qr-preview {
    width: calc(100% - 10px);
    aspect-ratio: 1;
    margin: 5px;
    border: 3px solid white;
    background:
        linear-gradient(90deg, #10263b 25%, transparent 25% 50%, #10263b 50% 75%, transparent 75%),
        linear-gradient(#10263b 25%, transparent 25% 50%, #10263b 50% 75%, transparent 75%);
    background-size: 8px 8px;
    box-shadow: 0 0 0 1px #10263b;
    pointer-events: none;
}
.signature-box-content { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 7px 10px 7px 4px; line-height: 1.05; pointer-events: none; }
.signature-box-content span, .signature-box-content small { font-size: clamp(6px, .7vw, 10px); }
.signature-box-content strong { margin: 3px 0; overflow: hidden; font-size: clamp(8px, .9vw, 12px); white-space: nowrap; text-overflow: ellipsis; }
.resize-handle {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 12px 0 2px 0;
    background: #1f6ea5;
    cursor: nwse-resize;
}
.signature-form-panel { overflow-y: auto; padding: var(--space-4); }
.signature-form-panel form { display: grid; gap: var(--space-3); }
.security-note.compact { padding: var(--space-2); font-size: .8rem; }
.coordinate-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-sm); background: #f0f4f7; }
.coordinate-summary span { color: var(--muted); font-size: .75rem; }
.coordinate-summary strong { color: var(--ink); }

.verification-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.verification-card { width: min(720px, 100%); padding: clamp(var(--space-4), 5vw, var(--space-6)); border-top: 5px solid var(--gold); border-radius: var(--radius-lg); background: white; box-shadow: 0 20px 60px rgba(21, 49, 79, .14); }
.verification-status { display: grid; gap: .25rem; margin: var(--space-3) 0 var(--space-5); padding: var(--space-3); border-radius: var(--radius-md); }
.verification-status strong { font-size: 1.25rem; }
.verification-status.is-valid { color: #155d40; background: #dff4e9; }
.verification-status.is-invalid { color: #842d2d; background: #fbe3e3; }
.verification-details { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .65rem var(--space-3); margin: 0; }
.verification-details dt { color: var(--muted); font-weight: 700; }
.verification-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.verification-hash { font-family: Consolas, monospace; font-size: .82rem; }

@container (max-width: 420px) {
    .date-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .signature-workspace { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 820px) {
    .hero { align-items: stretch; flex-direction: column; }
    .hero-stat { text-align: left; }
    .form-grid-3 { grid-template-columns: 1fr; }
    .position-grid { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
    .signature-modal { inset: 0; width: auto; height: auto; border-radius: 0; }
    .signature-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(390px, 1fr) auto; overflow-y: auto; }
    .signature-form-panel { overflow: visible; }
}

@media (max-width: 680px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .history-filters { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .container { width: min(100% - var(--space-3), 1180px); padding-top: var(--space-2); }
    .topbar { padding: 0 var(--space-2); }
    .user-menu span { display: none; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .form-actions, .section-heading { align-items: stretch; flex-direction: column; }
    .history-filters { padding: 0 var(--space-4) var(--space-4); }
    .history-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .actions { flex-wrap: wrap; white-space: normal; }
    .actions .button { flex: 1 1 140px; }
    .table-card .section-heading { padding: var(--space-4); }
    .position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .signature-header, .signature-footer { padding: var(--space-3); }
    .signature-header .muted { display: none; }
    .signature-footer { align-items: stretch; flex-direction: column; }
    .signature-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
    .signature-workspace { padding: var(--space-2); }
    .pdf-toolbar { flex-wrap: wrap; }
    .tool-danger { margin-left: 0; }
    .pdf-viewport { padding: var(--space-2); }
    .verification-details { grid-template-columns: 1fr; gap: .2rem; }
    .verification-details dd { margin-bottom: var(--space-2); }
    .message-bubble { max-width: 100%; }
    .message-bubble-head { flex-direction: column; }
}

@media (max-width: 420px) {
    h1 { font-size: 2rem; }
    .card { padding: var(--space-3); border-radius: var(--radius-md); }
    .hero { padding: var(--space-4); }
    .tabs { margin: var(--space-3) 0; }
    .tab { min-width: 132px; }
}

/* SGA Profe Conservatorio */
:root {
    --blue:#2f7df6;
    --blue-soft:#eaf2ff;
    --sidebar:#1d2b40;
    --sidebar-2:#253750;
    --canvas:#f2f5fa;
    --sidebar-surface:linear-gradient(180deg,#13263c 0%,#1d2b40 28%,#23324a 100%);
    --sidebar-brand-bg:linear-gradient(180deg,#28508a 0%,#377ce8 100%);
    --sidebar-brand-border:rgba(255,255,255,.16);
    --sidebar-brand-shadow:0 18px 34px rgba(5,18,37,.24);
    --sidebar-brand-role-bg:rgba(255,255,255,.14);
    --sidebar-brand-role-border:rgba(255,255,255,.22);
    --sidebar-link-hover:rgba(255,255,255,.08);
    --sidebar-link-active:linear-gradient(135deg,#3d8bff 0%,#2f7df6 100%);
    --sidebar-link-shadow:0 10px 24px rgba(47,125,246,.24);
}
body { background:var(--canvas); }
.app-shell { min-height:100vh; display:grid; grid-template-columns:304px minmax(0,1fr); }
.sidebar { position:sticky; top:0; z-index:30; height:100vh; width:100%; box-sizing:border-box; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; color:#d8e3f0; background:var(--sidebar-surface); scrollbar-width:none; -ms-overflow-style:none; box-shadow:inset -1px 0 0 rgba(255,255,255,.04); }
.sidebar::-webkit-scrollbar { width:0; height:0; display:none; }
/* Sidebar brand: layout vertical con jerarquia institucional */
.sidebar-brand { display:grid; justify-items:center; gap:.28rem; padding:1rem .95rem .95rem; color:#fff; text-decoration:none; background:var(--sidebar-brand-bg); border-bottom:1px solid var(--sidebar-brand-border); border-radius:0 0 24px 0; box-shadow:var(--sidebar-brand-shadow); text-align:center; }
.sidebar-brand-logo { width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); border-radius:50%; background:rgba(255,255,255,.1); padding:4px; }
.sidebar-brand-title { font-size:1.95rem; font-weight:900; letter-spacing:.14em; line-height:.95; text-indent:.14em; }
.sidebar-brand-subtitle { font-size:.8rem; font-weight:800; letter-spacing:.34em; text-transform:uppercase; opacity:.92; text-indent:.34em; }
.sidebar-brand-role { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:.2rem .75rem; border:1px solid var(--sidebar-brand-role-border); border-radius:999px; background:var(--sidebar-brand-role-bg); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-brand-user { max-width:100%; color:rgba(255,255,255,.92); font-size:.88rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
/* Compatibilidad legacy (por si algun template usa .brand-mark) */
.sidebar-brand .brand-mark { font-size:1.35rem; font-weight:900; letter-spacing:.12em; }
.sidebar-brand small { margin-top:.25rem; font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.sidebar-nav { display:grid; gap:.34rem; padding:.78rem .72rem 4rem; }.nav-section { margin:.7rem .75rem .36rem; color:#91a7c3; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
/* Margen entre filtros y tablas */
.filter-panel, .filters, .table-filters, .history-filters, .filter-bar-form { margin-bottom:1rem; }
.nav-section-group { border-radius:14px; margin-bottom:.5rem; }
.nav-link,.nav-group summary,.nav-group a { display:flex; align-items:flex-start; gap:.7rem; min-height:41px; padding:.66rem .84rem; border-radius:14px; color:#d5e1ef; text-decoration:none; font-size:.88rem; cursor:pointer; transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.nav-section-heading { display:flex; align-items:center; gap:.7rem; padding:.8rem .84rem .3rem; color:#91a7c3; font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-top:.4rem; pointer-events:none; }
.nav-section-content { display:grid; gap:.14rem; padding:.1rem 0; }
.nav-icon { display:grid; place-items:center; width:1.15rem; height:1.15rem; flex:0 0 1.15rem; color:#9db1c9; }
.nav-svg { display:block; width:1.15rem; height:1.15rem; }
.nav-label { min-width:0; color:inherit; text-align:left; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.nav-caret { margin-left:auto; color:#7f93ad; font-size:1.15rem; line-height:1; transition:transform .18s ease; }
.nav-link:hover,.nav-link.is-active,.nav-group summary:hover { color:#fff; background:var(--sidebar-link-hover); }
.nav-link:hover .nav-icon,.nav-link.is-active .nav-icon,.nav-group summary:hover .nav-icon { color:#fff; }
.nav-link.is-active { background:var(--sidebar-link-active); box-shadow:var(--sidebar-link-shadow); }
.nav-sub-group { display:grid; gap:.1rem; }
.nav-sub-heading { display:flex; align-items:center; padding:.45rem .84rem .2rem; font-size:.76rem; font-weight:700; color:#8296af; margin-top:.3rem; pointer-events:none; text-transform:uppercase; letter-spacing:.06em; }
.nav-sub-content { display:grid; gap:.1rem; }
.nav-sub-link { display:flex; align-items:flex-start; gap:.7rem; min-height:34px; margin:.12rem 0 .12rem 2.4rem; padding:.45rem .7rem; border-radius:14px; color:#b7c8dc; text-decoration:none; font-size:.81rem; cursor:pointer; transition:background-color .18s ease, color .18s ease; }
.nav-sub-link:hover, .nav-sub-link.is-active { color:#fff; background:rgba(255,255,255,.08); }
.nav-sub-link.is-active { background:var(--sidebar-link-active); box-shadow:var(--sidebar-link-shadow); }
.nav-icon-sub,.nav-sub-link .nav-svg { width:1rem; height:1rem; flex-basis:1rem; }
.sidebar-open-class { display:grid; gap:.38rem; margin:.18rem .2rem .34rem; padding:.78rem .82rem; border:1px dashed rgba(145,167,195,.45); border-radius:14px; background:rgba(255,255,255,.035); color:#cbd8e8; }
.sidebar-open-class.is-live { border-style:solid; border-color:rgba(72,187,120,.55); background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(5,150,105,.18)); }
.sidebar-open-class-head { display:flex; align-items:center; gap:.5rem; color:#fff; font-size:.82rem; }
.sidebar-open-class p { margin:0; font-size:.84rem; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.sidebar-open-class small { color:#b7c8dc; line-height:1.35; overflow-wrap:anywhere; }
.open-class-status { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.16); animation:pulse-green 1.4s ease-in-out infinite; }
.open-class-status.is-idle { background:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,.12); animation:none; }
.sidebar-open-class-actions { display:flex; gap:.45rem; flex-wrap:wrap; }
.sidebar-open-class-actions a,.sidebar-open-class-actions button,.sidebar-open-class-link { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:.34rem .58rem; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#fff; background:rgba(255,255,255,.11); text-decoration:none; font-size:.76rem; font-weight:800; cursor:pointer; }
.sidebar-open-class-actions form { margin:0; }
.sidebar-open-class-actions button { font:inherit; }
@keyframes pulse-green { 0%,100%{ transform:scale(1); box-shadow:0 0 0 4px rgba(34,197,94,.16); } 50%{ transform:scale(1.12); box-shadow:0 0 0 7px rgba(34,197,94,.08); } }
.sidebar-footer { margin-top:auto; display:grid; gap:.15rem; padding:1rem 1.4rem 1.4rem; border-top:1px solid rgba(255,255,255,.08); }.sidebar-footer small { color:#8296af; }.sidebar-footer strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.main-panel { min-width:0; }.topbar { position:sticky; top:0; z-index:20; height:72px; padding:0 clamp(1rem,3vw,2.4rem); color:var(--ink); background:rgba(242,245,250,.92); border:0; backdrop-filter:blur(14px); }.brand { margin-right:auto; color:#17243a; font-size:1.05rem; }.user-menu { color:var(--ink); }.user-menu span { font-weight:700; }.link-button { color:#5f6f83; }.sidebar-toggle { display:none; width:40px; height:40px; border:0; border-radius:10px; background:#fff; color:var(--sidebar); font-size:1.25rem; cursor:pointer; }
.content-area { width:min(1440px,100%); margin:0 auto; padding:clamp(1rem,3vw,2.2rem); }.content-area>.alert { position:relative; z-index:2; }
.content-area.content-area-auth { width:100%; max-width:none; margin:0; padding:0; }
.content-area.content-area-auth > .alert { margin:clamp(1rem,3vw,2rem); }
.content-area.content-area-auth > .auth-split-container { min-height:100vh; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.5rem; }.page-heading h1 { margin-bottom:.45rem; font-size:clamp(1.8rem,3vw,2.55rem); color:#17243a; }.page-heading p { margin-bottom:0; }.page-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }.stat-card { position:relative; overflow:hidden; display:grid; gap:.4rem; min-width:0; min-height:145px; padding:1.25rem; background:#fff; border:1px solid #e4eaf1; border-radius:18px; box-shadow:0 8px 28px rgba(29,43,64,.05); }.stat-card:after { content:""; position:absolute; right:-22px; top:-22px; width:90px; height:90px; border-radius:50%; background:var(--blue-soft); }.stat-card span,.stat-card small { min-width:0; color:var(--muted); overflow-wrap:anywhere; }.stat-card strong { min-width:0; max-width:100%; font-size:clamp(1.35rem,2.4vw,2.35rem); line-height:1.05; color:#18263a; overflow-wrap:anywhere; word-break:break-word; }.stat-alerts:after { background:#fff0f3; }.stat-asistencia:after { background:#eafaf4; }.stat-planes:after { background:#f3efff; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr); gap:1rem; margin-bottom:1rem; }.schedule-list>div { display:grid; grid-template-columns:70px minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }.schedule-list time { display:grid; color:var(--blue); font-weight:900; }.schedule-list small,.event-list small { display:block; margin-top:.2rem; color:var(--muted); }.schedule-list a { padding:.45rem .7rem; border:1px solid #bcd2f5; border-radius:8px; color:#1760c7; text-decoration:none; font-size:.8rem; font-weight:800; }.event-list>div { display:flex; gap:.7rem; padding:.75rem 0; border-top:1px solid var(--line); }.event-list p { margin:0; }.event-dot { flex:0 0 9px; width:9px; height:9px; margin-top:.35rem; border-radius:50%; background:var(--blue); }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }.quick-grid a { display:grid; grid-template-columns:42px 1fr; column-gap:.8rem; padding:1rem; color:inherit; background:#fff; border:1px solid var(--line); border-radius:16px; text-decoration:none; }.quick-grid a>span { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#fff; background:var(--blue); font-size:1.2rem; }.quick-grid small { color:var(--muted); }
.profile-form { display:grid; grid-template-columns:230px minmax(0,1fr); gap:2rem; }.photo-panel { display:flex; align-items:center; flex-direction:column; gap:1rem; text-align:center; }.photo-preview { width:172px; aspect-ratio:1; overflow:hidden; display:grid; place-items:center; border:6px solid #fff; border-radius:50%; background:linear-gradient(145deg,#dce9fb,#bfd5f6); box-shadow:0 12px 35px rgba(47,125,246,.2); color:#fff; font-size:4rem; font-weight:900; }.photo-preview img { width:100%; height:100%; object-fit:cover; }.photo-panel small { color:var(--muted); }.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }.profile-fields,.form-section { display:grid; gap:1.25rem; }.form-section+.form-section { padding-top:1.5rem; border-top:1px solid var(--line); }.section-title { display:flex; gap:.9rem; align-items:center; }.section-title>span { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--blue); background:var(--blue-soft); font-weight:900; }.section-title h2,.section-title p { margin:0; }.section-title p { color:var(--muted); font-size:.85rem; }.span-2 { grid-column:span 2; }.span-3 { grid-column:span 3; }
.photo-dialog { width:min(620px,calc(100% - 2rem)); padding:1.2rem; border:0; border-radius:20px; box-shadow:0 30px 90px rgba(9,23,38,.35); }.photo-dialog::backdrop { background:rgba(9,23,38,.72); }.photo-dialog-head { display:flex; justify-content:space-between; }.photo-dialog canvas { display:block; width:min(100%,500px); aspect-ratio:1; margin:1rem auto; background:#dbe3ed; border-radius:16px; touch-action:none; }.photo-dialog label { margin-top:1rem; }
.cv-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }.cv-section { min-height:180px; }.count-badge { display:grid; place-items:center; min-width:28px; height:28px; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-weight:800; }.timeline>div { display:grid; grid-template-columns:12px 1fr; gap:.7rem; padding:.65rem 0; }.timeline>div>span { width:9px; height:9px; margin-top:.35rem; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-soft); }.timeline p { margin:0; }.timeline small,.timeline em { display:block; margin-top:.2rem; color:var(--muted); font-size:.8rem; }.timeline em { color:#405069; font-style:normal; }.is-collapsed { display:none; }
.cv-upload { display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto auto; align-items:center; gap:1rem; margin-bottom:1rem; }.cv-upload h2,.cv-upload p { margin:0; }
.filter-bar { display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)) auto; align-items:end; gap:1rem; margin-bottom:1rem; }.filter-bar.compact { margin:0; padding:1rem; grid-template-columns:minmax(220px,1fr) 180px auto; }.inline-details { margin-bottom:1rem; }.inline-details summary { color:var(--blue); font-weight:800; cursor:pointer; }.inline-details form { margin-top:1rem; }.table-title { padding:1.25rem!important; }.choice-cell { text-align:center; }.choice-cell input { display:inline-block; min-height:1.15rem; width:1.15rem; accent-color:var(--blue); }.status-borrador { color:#755b14;background:#fff0bd; }.status-generada { color:#175c9e;background:#e3f1ff; }.status-entregada { color:#155d40;background:#dff4e9; }.status-archivada { color:#556170;background:#edf0f3; }
.attendance-table { min-width: 760px; }
.attendance-choice { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border-radius:12px; cursor:pointer; transition:background-color .18s ease, box-shadow .18s ease; }
.attendance-choice input { width:1.25rem; height:1.25rem; min-height:1.25rem; margin:0; accent-color:var(--blue); }
.attendance-choice span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.attendance-choice:hover { background:#eef4fb; }
.attendance-choice:has(input:checked) { background:#eef6ff; box-shadow:inset 0 0 0 2px var(--blue); }
.dece-form,.module-form { display:grid; gap:1.4rem; margin-bottom:1rem; }.dece-form .section-title:not(:first-of-type) { padding-top:1rem; border-top:1px solid var(--line); }
.course-context { display:grid; gap:.35rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:12px; background:#f8fafc; }
.course-context[hidden] { display:none; }
.course-context small { color:var(--muted); overflow-wrap:anywhere; }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:.75rem; }.segmented { display:flex; padding:.25rem; background:#e7edf5; border-radius:10px; }.segmented a { padding:.55rem .8rem; border-radius:8px; color:#65758a; text-decoration:none; font-size:.82rem; font-weight:800; }.segmented a.active { color:#1b5fbd; background:#fff; box-shadow:0 2px 8px rgba(29,43,64,.08); }.calendar-nav { display:flex; align-items:center; gap:.8rem; }.calendar-nav a { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#fff; text-decoration:none; font-size:1.4rem; }
.calendar-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,260px); gap:1rem; margin-bottom:1rem; }.agenda-board { overflow-x:auto; padding:1rem; }.agenda-days { min-width:760px; display:grid; grid-template-columns:repeat(6,minmax(118px,1fr)); gap:12px; align-items:stretch; }.agenda-day { min-height:230px; padding:.65rem; border:1px solid var(--line); border-radius:13px; background:#fafbfd; }.agenda-day>header { display:flex; justify-content:space-between; align-items:center; padding-bottom:.55rem; color:var(--muted); border-bottom:1px solid var(--line); text-transform:uppercase; }.agenda-day>header strong { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; }.agenda-day.is-today>header strong { color:#fff;background:var(--blue); }.agenda-item { display:grid; gap:.18rem; margin-top:.55rem; padding:.58rem; border-left:3px solid var(--event-color,var(--blue)); border-radius:8px; background:#fff; box-shadow:0 3px 12px rgba(29,43,64,.06); }.agenda-item time,.agenda-item small { color:var(--muted); font-size:.7rem; line-height:1.25; }.agenda-item strong { font-size:.8rem; line-height:1.25; }.agenda-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.35rem; }.agenda-actions a { color:#1760c7; font-size:.68rem; font-weight:800; }.mini-calendar { align-self:start; max-width:260px; padding:1rem; }.mini-calendar h2 { text-align:center;font-size:1rem; }.mini-week,.mini-days { display:grid; grid-template-columns:repeat(7,1fr); gap:.24rem; text-align:center; }.mini-week { margin-bottom:.45rem; color:var(--muted); font-size:.65rem; }.mini-days a { display:grid; place-items:center; aspect-ratio:1; border-radius:50%; text-decoration:none; font-size:.74rem; }.mini-days a:hover,.mini-days a.today { color:#fff;background:var(--blue); }.muted-day { opacity:.35; }.integration-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }.integration-card>div { display:flex; align-items:center; gap:1rem; }.integration-icon { display:grid; place-items:center; flex:0 0 52px; width:52px;height:52px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#4285f4,#34a853);font-size:1.4rem;font-weight:900; }
.evaluation-hub { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; }
.evaluation-card { min-height:190px; display:grid; align-content:start; gap:.65rem; padding:1.35rem; color:inherit; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 28px rgba(29,43,64,.05); }
.evaluation-card:hover { border-color:#bcd2f5; box-shadow:0 12px 34px rgba(29,43,64,.09); transform:translateY(-1px); }
.evaluation-card>span { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:#fff; background:var(--blue); font-size:.82rem; font-weight:900; }
.evaluation-card h2 { margin:0; font-size:1.05rem; }
.evaluation-card p { margin:0; color:var(--muted); line-height:1.45; }
.evaluation-card strong { margin-top:auto; color:var(--blue); font-size:.82rem; }
.evaluation-prompt { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; border-color:#b7ddca; background:#f4fbf7; }
.category-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; }
.evaluation-filter { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.status-draft { color:#755b14;background:#fff0bd; }.status-saved { color:#175c9e;background:#e3f1ff; }.status-closed { color:#155d40;background:#dff4e9; }
.placeholder-card { max-width:760px; margin:3rem auto; text-align:center; }.placeholder-card>span { display:grid; place-items:center; width:74px; height:74px; margin:0 auto 1rem; border-radius:22px; color:var(--blue); background:var(--blue-soft); font-size:2rem; }.placeholder-card p { max-width:560px; margin:0 auto 1.5rem; color:var(--muted); }.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.settings-card { display:flex; align-items:flex-start; gap:1rem; color:inherit; text-decoration:none; }.settings-card>span { display:grid; place-items:center; flex:0 0 48px; width:48px;height:48px;border-radius:13px;color:var(--blue);background:var(--blue-soft);font-weight:900; }.settings-card h2 { margin-bottom:.3rem; }.settings-card p { margin:0;color:var(--muted); }
.admissions-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr); gap:1rem; align-items:start; }
.admissions-main, .admissions-aside { min-width:0; }
.admissions-heading-card { display:grid; gap:.3rem; min-width:260px; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,#fff 0%,#f7fbff 100%); box-shadow:0 10px 26px rgba(32, 51, 70, .05); }
.admissions-heading-card span { color:var(--muted); font-size:.78rem; font-weight:700; }
.admissions-heading-card strong { color:var(--navy); font-size:1.02rem; letter-spacing:-.02em; }
.admissions-heading-card small { color:var(--muted); line-height:1.45; }
.admissions-intro { display:grid; gap:.85rem; }
.admissions-intro p { margin:0; color:var(--muted); line-height:1.6; }
.admissions-form-title { margin:0 0 .4rem; color:var(--navy); font-size:clamp(2rem, 2.8vw, 2.45rem); font-weight:900; letter-spacing:-.045em; }
.admissions-form-subtitle { margin:0 0 1.2rem; color:#738092; line-height:1.55; }
.admissions-aside { display:grid; gap:1rem; }
.admissions-aside .card { height:fit-content; }
.admissions-request-card { display:grid; gap:.85rem; }
.admissions-request-meta { display:grid; gap:.65rem; }
.admissions-request-meta div { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.78rem .86rem; border-radius:var(--radius-md); background:var(--canvas); }
.admissions-request-meta small { color:var(--muted); font-size:.76rem; }
.admissions-request-meta strong { color:var(--ink); font-size:.88rem; text-align:right; overflow-wrap:anywhere; }
.admissions-checklist { display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.admissions-checklist li { display:flex; gap:.7rem; align-items:flex-start; padding:.78rem .86rem; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; }
.admissions-checklist li span { display:grid; flex:0 0 28px; place-items:center; width:28px; height:28px; border-radius:999px; color:var(--blue); background:var(--blue-soft); font-size:.78rem; font-weight:900; }
.admissions-checklist strong { display:block; margin-bottom:.08rem; font-size:.86rem; }
.admissions-checklist small { color:var(--muted); line-height:1.45; }
.admission-tabbar { display:flex; gap:.75rem; flex-wrap:wrap; }
.admission-tabbar .button { flex:1 1 220px; }
.admission-panel[hidden] { display:none !important; }
.admissions-support { color:var(--muted); line-height:1.55; }
@media(min-width:1101px){.admissions-aside{position:sticky;top:94px}}
.appearance-preview { display:grid; gap:.9rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg, rgba(21, 49, 79, .06), rgba(47, 125, 246, .03)); }
.appearance-preview-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.appearance-preview-header strong { display:block; color:var(--navy); font-size:1.1rem; }
.appearance-preview-chip { display:inline-flex; align-items:center; padding:.38rem .72rem; border-radius:999px; color:var(--navy); background:rgba(21, 49, 79, .08); font-size:.76rem; font-weight:800; }
.appearance-preview-bars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.appearance-preview-bars span { display:block; min-height:54px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.appearance-preview p { margin:0; color:var(--muted); line-height:1.5; }
.login-media-preview { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg, rgba(21, 49, 79, .10), rgba(47, 125, 246, .04)); }
.login-media-preview img,
.login-media-preview video { display:block; width:100%; min-height:220px; height:220px; object-fit:cover; }
.login-media-preview-empty { display:grid; gap:.45rem; min-height:220px; padding:1.25rem; color:var(--muted); background:linear-gradient(135deg, rgba(21, 49, 79, .08), rgba(47, 125, 246, .05)); }
.login-media-preview-empty strong { color:var(--navy); }
.check-row { display:flex; align-items:center; gap:.65rem; }
.check-row label { display:flex; align-items:center; gap:.65rem; margin:0; color:#344151; font-weight:700; }
.check-row input[type="checkbox"] { width:1rem; min-height:1rem; accent-color:var(--blue); }
.print-document { padding:2rem;background:#eef1f5; }.dece-document { width:210mm; min-height:277mm; margin:auto; padding:18mm; background:#fff; color:#111; font-family:Arial,sans-serif; box-shadow:0 10px 40px rgba(0,0,0,.12); }.dece-document header { text-align:center; }.dece-document header p,.dece-document header strong { display:block;margin:.2rem; }.dece-document header h1 { margin:1.5rem 0;font-size:1.35rem;letter-spacing:.02em; }.dece-document section { margin-top:1rem;border:1px solid #222; }.dece-document section h2 { margin:0;padding:.55rem;text-align:center;background:#e8e8e8;border-bottom:1px solid #222;font-size:1rem; }.dece-document section h3,.dece-document section>p,.dece-document section>small { margin:.75rem; }.dece-document dl { display:grid;grid-template-columns:1fr 1fr;margin:0; }.dece-document dl>div { padding:.65rem;border-right:1px solid #222;border-bottom:1px solid #222; }.dece-document dt { font-size:.72rem;font-weight:700; }.dece-document dd { min-height:1.3rem;margin:.25rem 0 0; }.alert-description { min-height:95mm;line-height:1.5; }.dece-document footer { display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.8rem;text-align:center; }.dece-document footer p { padding-top:.5rem;border-top:1px solid #111; }.print-button { position:fixed;right:2rem;bottom:2rem;padding:.8rem 1rem;border:0;border-radius:10px;color:#fff;background:#246fcf;font-weight:800;cursor:pointer; }
.empty-state.compact { padding:1.5rem; }

@media(max-width:1100px){.stats-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-layout{grid-template-columns:1fr}.mini-calendar{max-width:260px}.profile-form{grid-template-columns:190px minmax(0,1fr)}.evaluation-hub{grid-template-columns:repeat(2,minmax(0,1fr))}.evaluation-filter{grid-template-columns:repeat(3,minmax(145px,1fr))}}
@media(max-width:860px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-105%);width:min(304px,88vw);transition:transform .22s ease}.sidebar.is-open{transform:none}.sidebar-toggle{display:grid;place-items:center}.sidebar-backdrop{position:fixed;inset:0;z-index:25;display:none;border:0;background:rgba(10,23,39,.48)}.sidebar-backdrop.is-open{display:block}.dashboard-grid,.profile-form{grid-template-columns:1fr}.photo-panel{padding-bottom:1.5rem;border-bottom:1px solid var(--line)}.calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-nav{justify-content:center}.cv-grid{grid-template-columns:1fr}.cv-upload{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:1fr}.admissions-layout{grid-template-columns:1fr}.admissions-heading-card{min-width:0}.admissions-aside{position:static}.evaluation-prompt{align-items:stretch;flex-direction:column}.category-actions{justify-content:flex-start}}
@media(max-width:620px){.topbar .brand{font-size:.9rem}.user-menu>span{display:none}.content-area{padding:.8rem}.page-heading{align-items:stretch;flex-direction:column}.stats-grid,.quick-grid,.filter-bar,.filter-bar.compact,.evaluation-filter,.evaluation-hub{grid-template-columns:1fr}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto}.card{padding:1rem}.admission-tabbar .button{flex-basis:100%}.schedule-list>div{grid-template-columns:58px 1fr}.schedule-list a{grid-column:2}.integration-card{align-items:stretch;flex-direction:column}.agenda-days{min-width:620px;grid-template-columns:repeat(6,minmax(100px,1fr))}.print-document{padding:0}.dece-document{width:100%;min-height:auto;padding:10mm;box-shadow:none}}
@media print{.app-shell>.sidebar,.topbar,.page-heading .button,.filter-bar,.print-button,.sidebar-backdrop{display:none!important}.app-shell{display:block}.content-area{padding:0}.card{box-shadow:none}.print-document{padding:0;background:#fff}.dece-document{box-shadow:none;margin:0}.table-card{overflow:visible}.table-wrap{overflow:visible}}
.topbar-avatar{width:40px;height:40px;min-width:40px;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center;display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-weight:800}.topbar-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}.topbar-clock strong{font-variant-numeric:tabular-nums}.topbar-clock small{color:var(--muted);text-transform:capitalize}.user-menu{gap:.65rem}@media(max-width:620px){.user-menu>.topbar-avatar{display:grid!important}.topbar-clock small{display:none}.topbar-clock{font-size:.85rem}}

/* UI refinement phase: shared operational design layer */
:root {
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-raised: #ffffff;
    --line-strong: #cbd5e1;
    --shadow-card: 0 6px 20px rgba(15, 23, 42, .055);
    --shadow-card-hover: 0 10px 26px rgba(15, 23, 42, .085);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-pill: 999px;
}

body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .62) 0, rgba(255, 255, 255, 0) 220px),
        var(--canvas);
}

.card,
.stat-card,
.quick-grid a,
.evaluation-card,
.settings-card,
.calendar-toolbar,
.mini-calendar,
.course-context,
.empty-state,
.auth-card,
.verification-card {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card,
.table-card,
.auth-card,
.verification-card {
    background: var(--surface-raised);
}

.table-card {
    border-color: var(--line);
}

.quick-grid a,
.evaluation-card,
.settings-card {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.quick-grid a:hover,
.evaluation-card:hover,
.settings-card:hover {
    border-color: #b8c9dc;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.page-heading {
    align-items: flex-end;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(203, 213, 225, .72);
}

.page-heading h1 {
    letter-spacing: 0;
}

.page-heading p {
    max-width: 780px;
    color: var(--muted);
    line-height: 1.5;
}

.button {
    gap: .45rem;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.button:hover {
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
}

.button-primary {
    background: #173f68;
}

.button-primary:hover {
    background: #215987;
}

.button-secondary {
    background: #fff;
    border-color: var(--line-strong);
}

input,
select,
textarea {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
}

td,
th {
    line-height: 1.42;
}

.status {
    align-items: center;
    gap: .3rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    line-height: 1.15;
}

.tabs,
.segmented {
    border: 1px solid rgba(203, 213, 225, .78);
    border-radius: var(--radius-lg);
}

.tab,
.segmented a {
    border-radius: var(--radius-sm);
}

.auth-shell {
    padding: clamp(1rem, 4vw, 2.5rem);
}

.auth-card {
    position: relative;
    overflow: hidden;
    border-top: 0;
}

.auth-card::before {
    content: "";
    display: block;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 50%;
    background: #fff url("images/logo-conservatorio.png") center / 86% auto no-repeat;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .1);
}

.auth-card h1 {
    font-size: clamp(2rem, 7vw, 2.65rem);
}

.sidebar-brand {
    border-radius: 0 0 var(--radius-lg) 0;
}

.nav-link,
.nav-group summary,
.nav-group a {
    border-radius: var(--radius-sm);
}

@keyframes pulse-green {
    0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, .62); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.sidebar-open-course,
.sidebar-no-class-alert {
    margin: .25rem .75rem .5rem;
    border-radius: var(--radius-md);
}

.sidebar-open-course {
    display: grid;
    gap: .25rem;
    padding: .75rem;
    color: #dbeafe;
    background: rgba(15, 23, 42, .24);
    border: 1px solid rgba(147, 197, 253, .26);
    border-left: 3px solid #60a5fa;
}

.sidebar-course-state {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #93c5fd;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pulse-indicator,
.sidebar-idle-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.pulse-indicator {
    background-color: #22c55e;
    animation: pulse-green 1.8s infinite;
}

.sidebar-idle-dot {
    background-color: #94a3b8;
}

.sidebar-course-title,
.sidebar-course-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-course-title {
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 800;
}

.sidebar-course-subject {
    color: #b6c4d7;
    font-size: .72rem;
}

.sidebar-course-actions {
    display: flex;
    gap: .35rem;
    margin-top: .25rem;
}

.sidebar-course-actions .button {
    min-height: 28px;
    padding: .25rem .55rem;
    font-size: .72rem;
}

.sidebar-no-class-alert {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    color: #9fb0c4;
    background: rgba(15, 23, 42, .2);
    border: 1px dashed rgba(148, 163, 184, .38);
    font-size: .72rem;
    font-weight: 700;
}

@media (max-width: 860px) {
    .topbar {
        gap: .7rem;
    }

    .user-menu {
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .page-heading {
        padding-bottom: .85rem;
    }

    th {
        position: static;
    }

    .auth-card::before {
        width: 64px;
        height: 64px;
    }
}

/* Custom additions for unified course management, modals and profile photo cropping */
.course-modal {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    width: min(900px, 95vw);
    max-height: 90vh;
    margin: 0;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(9, 23, 38, 0.35);
    background: #ffffff;
    padding: 1.75rem;
    overflow-y: auto;
}
.course-modal::backdrop {
    background: rgba(9, 23, 38, 0.75);
    backdrop-filter: blur(4px);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e4eaf1;
    padding-bottom: 1rem;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #17243a;
}
.close-button {
    font-size: 2rem;
    font-weight: 300;
    color: #8296af;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
}
.close-button:hover {
    color: #17243a;
}
.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 768px) {
    .modal-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
.modal-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-col-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: #2f7df6;
    border-bottom: 2px solid #eaf2ff;
    padding-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.code-preview {
    background: #fafbfd;
    border: 1px solid #e4eaf1;
    border-radius: 8px;
    padding: 0.75rem;
    font-family: monospace;
    font-size: 0.85rem;
    color: #2c3e50;
    margin: 0.5rem 0;
    white-space: pre-wrap;
    word-break: break-all;
}
.actions-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.actions-row {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
}
@media (max-width: 900px) {
    .actions-row {
        flex-wrap: wrap;
    }
}
.is-selected-row {
    background-color: #f2f7ff !important;
}
.course-select-link {
    text-decoration: none;
    color: #2f7df6;
    transition: color 0.15s;
}
.course-select-link:hover {
    color: #1760c7;
    text-decoration: underline;
}

/* 2026-06-27: course modal commands, workweek calendar and open-class control */
.course-command-bar {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.course-command-bar .button { min-width: 170px; }
.teacher-course-filter { margin-bottom: 1rem; }
.course-wide-modal { width: min(1180px, calc(100vw - 2rem)); }
.course-roster-dialog .modal-header { align-items: flex-start; }
.modal-header-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.modal-mini-list { margin-top: 1rem; }
.modal-table { margin-top: 1rem; max-height: min(62vh, 620px); overflow: auto; }
.calendar-layer-filter { grid-template-columns: repeat(5, minmax(120px, auto)); align-items: end; margin-bottom: 1rem; }
.calendar-event-form { margin-bottom: 1rem; }
.calendar-event-form summary { cursor: pointer; font-weight: 800; color: var(--navy); }
.calendar-layout.is-month-hidden { grid-template-columns: 1fr; }
.agenda-days.workweek { min-width: 680px; grid-template-columns: repeat(5, minmax(118px, 1fr)); }
.mini-week.workweek, .mini-days.workweek { grid-template-columns: repeat(5, 1fr); }
.event-item { background: #fff; }
.layer-institucional { background: #fff7f8; }
.layer-academico { background: #f2fbf6; }
.layer-docente { background: #f7f4ff; }
.class-context-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.context-tile { display: grid; gap: .25rem; }
.context-tile span, .context-tile small { color: var(--muted); font-size: .78rem; }
.context-tile strong { font-size: 1rem; color: var(--navy); }
.class-session-form .table-wrap { max-height: 62vh; }
.class-session-table th, .class-session-table td { vertical-align: top; }
.class-session-table td:first-child { min-width: 220px; }
.class-session-table td:first-child small, .table-card td small { display: block; color: var(--muted); }
.class-session-table select { min-width: 118px; }
.class-session-table input[name^="attendance_observation"], .class-session-table input[name^="grade_observation"] { min-width: 150px; }
.class-session-table .score-input { width: 78px; }
.class-session-table select { width: 100%; max-width: 170px; }
.class-session-table input { max-width: 100%; }
.diagnostic-score-table .score-input { width: 76px; }

@media(max-width:1100px){
    .class-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-layer-filter { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}
@media(max-width:620px){
    .course-command-bar, .course-command-bar .button { width: 100%; }
    .class-context-grid, .calendar-layer-filter { grid-template-columns: 1fr; }
    .agenda-days.workweek { min-width: 560px; grid-template-columns: repeat(5, minmax(106px, 1fr)); }
    .class-session-form .table-wrap, .diagnostic-score-card .table-wrap { max-height: none; overflow: visible; }
    .class-session-table, .class-session-table thead, .class-session-table tbody, .class-session-table tr, .class-session-table td,
    .diagnostic-score-table, .diagnostic-score-table thead, .diagnostic-score-table tbody, .diagnostic-score-table tr, .diagnostic-score-table td {
        display: block;
        width: 100%;
    }
    .class-session-table thead, .diagnostic-score-table thead { display: none; }
    .class-session-table tr, .diagnostic-score-table tr {
        margin: 0 0 .9rem;
        padding: .85rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
    }
    .class-session-table td, .diagnostic-score-table td {
        display: grid;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        padding: .45rem 0;
        border: 0;
    }
    .class-session-table td::before, .diagnostic-score-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .75rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .class-session-table td:first-child, .diagnostic-score-table td:nth-child(2) { display: block; }
    .class-session-table td:first-child::before, .diagnostic-score-table td:nth-child(2)::before { display: block; margin-bottom: .25rem; }
    .class-session-table select, .class-session-table input, .diagnostic-score-table input, .diagnostic-score-table output {
        width: 100%;
        max-width: none;
        min-height: 44px;
        font-size: 1rem;
    }
    .class-session-table .score-input, .diagnostic-score-table .score-input { width: 100%; }
}
.unified-banner {
    padding: 1.5rem;
    border: 1px solid #bcd2f5;
    background: #f0f6ff;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    text-align: center;
}
.unified-banner p {
    margin: 0 0 1rem;
    color: #1d2b40;
}

/* Adjusted header bar elements styles */
.topbar-icon-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    margin-right: 0.25rem;
}
.topbar-icon-button:hover {
    color: #1e293b;
    border-color: #94a3b8;
    background: #f8fafc;
}
.topbar-user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    line-height: 1.2;
}
.topbar-user-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.84rem !important;
    max-width: 10.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-role {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
    white-space: nowrap;
}
.link-button {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 6px 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
.link-button:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
.topbar-divider {
    width: 1px;
    height: 32px;
    background-color: #cbd5e1;
    margin: 0 0.5rem;
}
.topbar-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}
.topbar-clock strong {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums;
}
.topbar-clock small {
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin-top: 0.15rem !important;
    text-transform: none !important;
    font-weight: 400 !important;
}

@media (max-width: 620px) {
    .topbar-user-info, .topbar-divider {
        display: none !important;
    }
}

/* Structured schedule day chips selector styling */
.days-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
}
.day-chip {
    cursor: pointer;
    display: inline-block;
}
.day-chip input {
    display: none !important;
}
.day-chip span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    background: #fff;
    transition: all 0.15s ease;
    user-select: none;
}
.day-chip:hover span {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #1e293b;
}
.day-chip input:checked + span {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}
.day-chip input:checked:hover + span {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}

/* Scrollable Subject Checkbox list styling */
.subject-checkbox-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem;
    background: #fff;
    margin-top: 0.35rem;
}
.subject-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 0.9rem;
    color: #334155;
    user-select: none;
}
.subject-checkbox-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.subject-checkbox-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #0f172a;
    cursor: pointer;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}
.status-draft { color: #755b14; background: #fff0bd; }
.status-generated, .status-completed, .status-finalized { color: #175c9e; background: #e3f1ff; }
.status-archived { color: #556170; background: #edf0f3; }
.status-deleted { color: #842d2d; background: #fbe3e3; }
.rubric-editor {
    display: grid;
    gap: 1rem;
}
.diagnostic-score-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.diagnostic-score-table th,
.diagnostic-score-table td {
    min-width: 110px;
}
.diagnostic-score-table th:nth-child(2),
.diagnostic-score-table td:nth-child(2) {
    min-width: 220px;
}
.diagnostic-score-table input[type="number"] {
    min-width: 74px;
    text-align: center;
}
.diagnostic-score-table output {
    display: block;
    min-width: 70px;
    font-weight: 800;
}
.final-grade-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.final-grade-table th,
.final-grade-table td {
    min-width: 118px;
}
.final-grade-table th:nth-child(2),
.final-grade-table td:nth-child(2) {
    min-width: 240px;
}
.final-grade-table th:nth-child(11),
.final-grade-table td:nth-child(11) {
    min-width: 260px;
}
.final-grade-table input[type="number"] {
    min-width: 78px;
    text-align: center;
}
.final-grade-table output {
    display: block;
    min-width: 76px;
    font-weight: 800;
}

.gradebook-table {
    min-width: 1320px;
}
.gradebook-table th,
.gradebook-table td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.gradebook-table th:nth-child(2),
.gradebook-table td:nth-child(2) {
    min-width: 220px;
    text-align: left;
    white-space: normal;
}
.gradebook-table input[type="number"] {
    width: 76px;
    text-align: center;
}
.gradebook-table input[name^="observations"] {
    min-width: 190px;
}
.gradebook-unified-table {
    min-width: 1540px;
}
.gradebook-unified-table th {
    font-size: .78rem;
}
.gradebook-unified-table output {
    display: inline-block;
    min-width: 64px;
    font-weight: 800;
}
.grade-record-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grade-record-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: .8rem;
    margin-bottom: 1rem;
}
.grade-save-status {
    background: #eef3f8;
    color: #43566d;
}
.grade-save-status.is-dirty {
    background: #fff4d6;
    color: #8a5a00;
}
.grade-observations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .75rem;
    max-height: 320px;
    overflow: auto;
    padding-top: 1rem;
}
.status-not_started { color: #43566d; background: #eef3f8; }
.status-in_progress { color: #8a5a00; background: #fff4d6; }
.status-q1_complete,
.status-q2_complete,
.status-complete { color: #175c9e; background: #e3f1ff; }
.status-archived { color: #5f6b7a; background: #eceff3; }
.grade-missing {
    color: #842d2d;
    background: #fff1f1;
    font-weight: 800;
}
.status-teacher_closed,
.status-in_review,
.status-approved_secretary,
.status-approved_coordination {
    color: #175c9e;
    background: #e3f1ff;
}
.status-observed {
    color: #842d2d;
    background: #fbe3e3;
}

/* ===== Papelera (trash.php) ===== */
.trash-type-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.trash-type-enrollment { background:#fff3cd; color:#856404; }
.trash-type-session { background:#d1ecf1; color:#0c5460; }
.trash-type-course { background:#f8d7da; color:#721c24; }
.trash-type-plan { background:#e7f0ff; color:#174ea6; }
.trash-module-pill { font-size:.75rem; color:var(--muted); }
.trash-reason { font-size:.78rem; color:#6b7a8d; font-style:italic; }
.restore-btn { padding:.3rem .75rem; font-size:.8rem; border:1px solid #28a745; border-radius:8px; color:#28a745; background:transparent; cursor:pointer; font-weight:700; transition:background .15s,color .15s; }
.restore-btn:hover { background:#28a745; color:#fff; }
.trash-empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.trash-empty svg { margin:0 auto 1rem; display:block; opacity:.3; }

.plan-delete-dialog { width:min(620px,calc(100vw - 2rem)); }
.plan-delete-summary { display:grid; grid-template-columns:130px minmax(0,1fr); gap:.55rem .9rem; padding:1rem; border:1px solid var(--line); border-radius:12px; background:#f8fafc; }
.plan-delete-summary dt { color:var(--muted); font-weight:800; }
.plan-delete-summary dd { margin:0; overflow-wrap:anywhere; }

.btn-delete-course {
    background: #fdf2f2 !important;
    color: #df1b1b !important;
    border: 1px solid #fde2e2 !important;
}
.btn-delete-course:hover {
    background: #df1b1b !important;
    color: #fff !important;
    border-color: #df1b1b !important;
}

/* ============================================================
   Actions Dropdown Menu — Componente reutilizable SGA
   Estrategia z-index: el menú se posiciona con position:fixed
   mediante JS al abrirse, escapando cualquier ancestor con
   overflow:hidden o transform que crearía un stacking context.
   ============================================================ */

.actions-dropdown {
    position: relative;
    display: inline-block;
}

/* Botón toggle */
.dropdown-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}

/* Chevron SVG: apunta a la derecha por defecto */
.dropdown-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: currentColor;
}

/* Cuando está activo: el chevron rota 90° (apunta hacia abajo) */
.actions-dropdown.is-active .dropdown-toggle .dropdown-chevron,
.dropdown-toggle[aria-expanded="true"] .dropdown-chevron {
    transform: rotate(90deg);
}

/* Menú desplegable — oculto por defecto */
.dropdown-menu {
    display: none;
    /* position:fixed se aplica inline via JS al abrir para escapar overflow:hidden */
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9100;
    min-width: 190px;
    padding: 6px 0;
    margin: 4px 0 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 39, 63, 0.14), 0 2px 6px rgba(18, 39, 63, 0.08);
    list-style: none;
}

/* Visible cuando el dropdown está activo */
.actions-dropdown.is-active .dropdown-menu {
    display: block;
}

/* Ítems del menú (links, botones, etc.) */
.dropdown-menu a,
.dropdown-menu button,
.dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 16px;
    clear: both;
    font-weight: 500;
    font-size: 13px;
    color: #1d2b40 !important;
    text-align: left;
    white-space: nowrap;
    background: none;
    border: none;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover,
.dropdown-item:hover {
    background-color: #f0f4f9;
    color: #1a73e8 !important;
    text-decoration: none;
}

/* Ítems deshabilitados */
.dropdown-item-disabled,
.dropdown-item[disabled],
.dropdown-menu a[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Separador visual */
.dropdown-divider {
    height: 1px;
    margin: 6px 0;
    background-color: #e4eaf1;
}

/* Formularios dentro del menú */
.dropdown-menu form {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}

/* Ítems destructivos */
.dropdown-menu .text-danger,
.dropdown-item.text-danger {
    color: #c0392b !important;
}

.dropdown-menu .text-danger:hover,
.dropdown-item.text-danger:hover {
    background-color: #fdf2f2;
    color: #c0392b !important;
}

/* ----------------------------------------------------------------
   Fix z-index para tablas con overflow:hidden (.table-card)
   Cuando el menú se ancla con position:fixed (via JS), no necesita
   que el contenedor cambie overflow. Esta regla es el fallback CSS
   para casos sin JS o cuando no se usa el modo fixed.
   ---------------------------------------------------------------- */
.table-wrap:has(.actions-dropdown.is-active) {
    overflow: visible !important;
}

/* El .table-card tiene overflow:hidden; al tener un dropdown activo
   dentro, cambiamos a visible para que el menú no quede cortado.
   (Solo activo cuando JS no está disponible o el menú no es fixed) */
.table-card:has(.actions-dropdown.is-active) {
    overflow: visible !important;
}

/* Truncado de texto en celdas (utilidad) */
.truncate-text {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Celda de acciones: centrado y ancho compacto */
.actions-cell {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

@media (max-width: 760px) {
    .gradebook-table th:first-child,
    .gradebook-table td:first-child,
    .gradebook-table th:nth-child(2),
    .gradebook-table td:nth-child(2),
    .final-grade-table th:first-child,
    .final-grade-table td:first-child,
    .final-grade-table th:nth-child(2),
    .final-grade-table td:nth-child(2),
    .diagnostic-score-table th:first-child,
    .diagnostic-score-table td:first-child,
    .diagnostic-score-table th:nth-child(2),
    .diagnostic-score-table td:nth-child(2) {
        position: sticky;
        background: #fff;
    }

    .gradebook-table th:first-child,
    .gradebook-table td:first-child,
    .final-grade-table th:first-child,
    .final-grade-table td:first-child,
    .diagnostic-score-table th:first-child,
    .diagnostic-score-table td:first-child {
        left: 0;
        z-index: 4;
        min-width: 54px;
        width: 54px;
    }

    .gradebook-table th:nth-child(2),
    .gradebook-table td:nth-child(2),
    .final-grade-table th:nth-child(2),
    .final-grade-table td:nth-child(2),
    .diagnostic-score-table th:nth-child(2),
    .diagnostic-score-table td:nth-child(2) {
        left: 54px;
        z-index: 4;
        min-width: 210px;
        box-shadow: 10px 0 18px -18px rgba(15, 23, 42, .55);
    }

    .gradebook-table th:first-child,
    .gradebook-table th:nth-child(2),
    .final-grade-table th:first-child,
    .final-grade-table th:nth-child(2),
    .diagnostic-score-table th:first-child,
    .diagnostic-score-table th:nth-child(2) {
        z-index: 5;
        background: #f8fafc;
    }
}

@media (max-width: 620px) {
    .page-actions .button,
    .form-actions .button {
        width: 100%;
    }

    .agenda-board {
        overflow: visible;
        padding: .75rem;
    }

    .agenda-days,
    .agenda-days.workweek {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .agenda-day {
        min-height: 0;
        padding: .85rem;
    }

    .agenda-item {
        padding: .75rem;
    }

    .agenda-item time,
    .agenda-item small {
        font-size: .78rem;
    }

    .agenda-item strong {
        font-size: .92rem;
    }

    .agenda-actions a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: .35rem .55rem;
        border-radius: 8px;
        background: #eef6ff;
        text-decoration: none;
        font-size: .76rem;
    }

    .attendance-table {
        min-width: 0;
    }

    .attendance-table,
    .attendance-table thead,
    .attendance-table tbody,
    .attendance-table tr,
    .attendance-table td {
        display: block;
        width: 100%;
    }

    .attendance-table thead {
        display: none;
    }

    .attendance-table tr {
        margin: 0 0 .9rem;
        padding: .85rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(29, 43, 64, .05);
    }

    .attendance-table td {
        display: grid;
        grid-template-columns: minmax(94px, 32%) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        padding: .45rem 0;
        border: 0;
    }

    .attendance-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .attendance-table td:first-child {
        display: block;
        padding-bottom: .7rem;
        border-bottom: 1px solid var(--line);
    }

    .attendance-table td:first-child::before {
        display: block;
        margin-bottom: .3rem;
    }

    .attendance-choice {
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
        padding: .55rem .75rem;
        border: 1px solid #d6e2ee;
        background: #f8fafc;
    }

    .attendance-choice span {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 0 .55rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-weight: 800;
        color: #243348;
    }

    .attendance-table input[name^="observation"] {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Attendance reports */
.attendance-report-filters {
    margin-bottom: 1rem;
    padding: 1rem;
}

.attendance-report-filters-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.attendance-report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    grid-column: span 4;
}

.attendance-report-filters-grid select,
.attendance-report-filters-grid input {
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 9px;
    background: #fff;
    font-size: 12px;
}

.attendance-report-filter-actions {
    display: grid;
    grid-column: span 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-self: end;
}

.attendance-report-filter-actions .button {
    min-height: 40px;
    white-space: nowrap;
}

.report-print-button {
    gap: .5rem;
    white-space: nowrap;
}

.report-print-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .9rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.results-header h2 {
    margin: 0;
    color: #173f68;
    font-size: 1.1rem;
    font-weight: 800;
}

.results-header p {
    margin: .15rem 0 0;
    color: #64748b;
    font-size: .8rem;
}

.attendance-report-table th,
.attendance-report-table td {
    vertical-align: top;
}

.attendance-report-table {
    width: 100%;
    table-layout: auto;
}

.attendance-report-table th {
    white-space: nowrap;
    padding: 0.9rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.attendance-report-table td {
    padding: 1rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.attendance-report-table td strong {
    font-size: 0.9rem;
    line-height: 1.15;
}

.attendance-report-table td small {
    font-size: 0.74rem;
    line-height: 1.3;
}

.attendance-report-table td:nth-child(3),
.attendance-report-table td:nth-child(4) {
    max-width: 170px;
    overflow-wrap: anywhere;
}

.attendance-report-table th:nth-child(1),
.attendance-report-table td:nth-child(1) {
    width: 8.4rem;
}

.attendance-report-table th:nth-child(2),
.attendance-report-table td:nth-child(2) {
    width: 6.2rem;
}

.attendance-report-table th:nth-child(5),
.attendance-report-table td:nth-child(5) {
    width: 6.1rem;
}

.attendance-report-table th:nth-child(6),
.attendance-report-table td:nth-child(6) {
    width: 7.5rem;
    overflow-wrap: anywhere;
}

.attendance-report-table th:nth-child(8),
.attendance-report-table td:nth-child(8) {
    width: 8rem;
}

.attendance-report-table th:nth-child(9),
.attendance-report-table td:nth-child(9),
.attendance-report-table th:nth-child(10),
.attendance-report-table td:nth-child(10) {
    width: 4.4rem;
}

.attendance-report-table .topic-cell {
    min-width: 0;
    max-width: none;
    color: #334155;
}

.attendance-report-table .status-cell {
    text-align: center;
}

.attendance-report-table .actions-cell {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    position: relative;
}

.status-empty,
.status-muted {
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 700;
}

.status-count {
    display: inline-flex;
    min-width: 2.1rem;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
}

.att-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}

.att-p { color: #0369a1; background: #e0f2fe; }
.att-a { color: #b91c1c; background: #fee2e2; }
.att-t { color: #b45309; background: #fef3c7; }
.att-j { color: #047857; background: #ecfdf5; }

.topic-cell {
    min-width: 220px;
    max-width: 320px;
    color: #334155;
}

.long-text-trigger {
    display: grid;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.long-text-trigger span {
    display: -webkit-box;
    max-height: 3.9em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.3;
}

.long-text-trigger small {
    margin-top: .35rem;
    color: #1760c7;
    font-size: 10px;
    font-weight: 800;
}

.long-text-trigger:hover span {
    text-decoration: underline;
    text-decoration-color: #93c5fd;
    text-underline-offset: 3px;
}

.topic-empty {
    color: #cbd5e1;
    font-size: 12px;
}

.long-text-dialog {
    width: min(720px, calc(100% - 2rem));
    max-height: min(78vh, 720px);
    border: 0;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.long-text-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

.long-text-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.long-text-dialog h2 {
    margin: 0;
    color: #173f68;
    font-size: 1.05rem;
}

.long-text-dialog p {
    margin: .2rem 0 0;
    color: #64748b;
    font-size: .82rem;
}

.long-text-dialog article {
    max-height: calc(78vh - 115px);
    overflow: auto;
    padding: 1.15rem 1.2rem;
    color: #1f2937;
    line-height: 1.58;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dialog-icon-button {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.dialog-icon-button:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
    color: #0f172a;
}

@media (max-width: 760px) {
    .attendance-report-filters {
        padding: .9rem;
    }

    .attendance-report-filters-grid {
        grid-template-columns: 1fr;
    }

    .attendance-report-filter-field,
    .attendance-report-filter-actions {
        grid-column: 1 / -1;
    }

    .attendance-report-filter-actions {
        grid-template-columns: 1fr 1fr;
    }

    .results-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .attendance-report-table {
        min-width: 0;
    }

    .topic-cell {
        min-width: 0;
    }

    .long-text-dialog {
        width: calc(100% - 1rem);
        max-height: 86vh;
    }

    .long-text-dialog article {
        max-height: calc(86vh - 116px);
    }
}

@media (max-width: 1080px) {
    .attendance-report-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-report-filters .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .attendance-report-table,
    .attendance-report-table thead,
    .attendance-report-table tbody,
    .attendance-report-table tr,
    .attendance-report-table th,
    .attendance-report-table td {
        display: block;
        width: 100%;
    }

    .attendance-report-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .attendance-report-table thead {
        display: none;
    }

    .attendance-report-table tbody tr {
        margin: 0 0 1rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 8px 22px rgba(29, 43, 64, .05);
    }

    .attendance-report-table tbody td {
        display: grid;
        grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
        align-items: start;
        gap: .55rem;
        padding: .68rem .82rem;
        border-top: 1px solid #edf2f7;
        text-align: left !important;
        font-size: 0.82rem;
    }

    .attendance-report-table tbody td:first-child {
        border-top: 0;
    }

    .attendance-report-table tbody td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .attendance-report-table .actions-cell {
        white-space: normal;
        width: 100%;
    }

    .attendance-report-table .actions-cell .actions-dropdown {
        width: 100%;
    }

    .attendance-report-table .actions-cell .dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    .attendance-report-table .actions-cell .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }
}

@media (max-width: 640px) {
    .attendance-report-filters {
        padding: .85rem;
    }

    .attendance-report-filter-actions {
        grid-template-columns: 1fr;
    }

    .attendance-report-table tbody td {
        grid-template-columns: 1fr;
    }

    .attendance-report-table .actions-cell .dropdown-toggle {
        min-height: 42px;
    }
}

@media (max-width: 640px) {
    .page-actions .button {
        width: 100%;
    }
}

/* Calendar redesign 2026-07-01 */
.calendar-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-heading h1 {
    margin-bottom: .15rem;
}

.calendar-heading p {
    max-width: 72ch;
}

.calendar-shell {
    position: relative;
    display: grid;
    gap: 1rem;
    padding-bottom: 3rem;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
}

.calendar-toolbar .calendar-month-toggle {
    justify-self: start;
    min-height: 52px;
    padding-inline: 1.4rem;
}

.calendar-nav {
    justify-self: center;
    gap: .9rem;
    font-size: 1.1rem;
}

.calendar-nav strong {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.calendar-view-pill {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    padding: 0 .95rem;
    border: 1px solid #cbd7ea;
    border-radius: 12px;
    background: #eff4fb;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
}

.calendar-event-menu {
    position: relative;
    justify-self: end;
}

.calendar-event-menu > summary {
    list-style: none;
}

.calendar-event-menu > summary::-webkit-details-marker {
    display: none;
}

.calendar-create-button {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 56px;
    padding: .8rem 1.2rem;
    border: 1px solid #d2dce9;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7f8fa 0%, #edf0f4 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
}

.calendar-create-button:hover {
    background: linear-gradient(180deg, #fbfbfd 0%, #e8edf3 100%);
}

.calendar-create-mark {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #d6dee9;
    font-size: 1.25rem;
    line-height: 1;
}

.calendar-create-caret {
    margin-left: .1rem;
    color: #475569;
    font-size: .9rem;
}

.calendar-event-menu[open] .calendar-create-button {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.calendar-event-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .6rem);
    z-index: 12;
    width: min(780px, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 18px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, .18);
}

.calendar-event-panel-head {
    margin-bottom: 1rem;
}

.calendar-event-panel-head h2 {
    margin-bottom: .25rem;
    font-size: 1.25rem;
}

.calendar-event-panel-head p {
    margin: 0;
}

.calendar-event-form-grid {
    gap: .9rem 1rem;
}

.calendar-layers {
    padding: 1rem 1.1rem;
}

.calendar-layers > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
}

.calendar-layers > summary::-webkit-details-marker {
    display: none;
}

.calendar-layers-label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: 0;
}

.calendar-layers h2 {
    margin-bottom: .25rem;
    font-size: 1.25rem;
}

.calendar-layers p {
    margin: 0;
    max-width: 70ch;
}

.calendar-layers-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 1rem;
    border-radius: 999px;
    background: #eff4fb;
    border: 1px solid #d5def0;
    color: #1e3a8a;
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
}

.calendar-layers[open] {
    position: relative;
}

.calendar-layers .calendar-layer-filter {
    width: 100%;
}

.calendar-layer-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem 1.25rem;
    padding-top: 1rem;
}

.calendar-layer-filter .check-label {
    min-height: 42px;
    padding-right: 1rem;
    border-radius: 999px;
    background: #f8fbff;
}

.calendar-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 1rem;
}

.calendar-layout.is-month-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.agenda-board {
    padding: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.agenda-days.workweek {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    min-width: 760px;
}

.agenda-day {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 260px;
    scroll-snap-align: start;
}

.agenda-day > header {
    margin-bottom: .25rem;
}

.agenda-item {
    border-left-width: 4px;
}

.agenda-item strong {
    font-size: .86rem;
}

.agenda-actions a {
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.agenda-actions a:hover {
    transform: translateY(-1px);
}

.mini-calendar {
    padding: 1rem;
    border-radius: 18px;
}

@media (max-width: 980px) {
    .calendar-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-toolbar {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .calendar-nav {
        justify-self: stretch;
        justify-content: center;
    }

    .calendar-view-pill,
    .calendar-event-menu {
        justify-self: stretch;
    }

    .calendar-view-pill {
        justify-content: center;
        min-height: 48px;
    }

    .calendar-create-button {
        width: 100%;
        justify-content: center;
    }

    .calendar-event-panel {
        position: static;
        width: 100%;
        margin-top: .65rem;
    }

    .calendar-layers > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-layers-pill {
        align-self: flex-start;
    }

    .calendar-layer-filter {
        align-items: stretch;
    }
}

@media (max-width: 620px) {
    .calendar-toolbar {
        padding: .85rem;
    }

    .calendar-toolbar .calendar-month-toggle {
        width: 100%;
    }

    .calendar-nav {
        gap: .55rem;
        font-size: .98rem;
    }

    .calendar-nav strong {
        font-size: 1rem;
    }

    .calendar-view-pill {
        width: 100%;
        min-height: 44px;
    }

    .calendar-create-button {
        min-height: 50px;
        padding-inline: 1rem;
        font-size: 1rem;
    }

    .calendar-event-panel,
    .calendar-layers {
        padding: .9rem;
    }

    .calendar-layer-filter .check-label {
        width: 100%;
        min-height: 40px;
    }

    .calendar-layout {
        gap: .85rem;
    }

    .agenda-board {
        padding: .8rem;
    }

    .agenda-days.workweek {
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .agenda-day {
        min-height: 0;
        padding: .85rem;
    }

    .agenda-item {
        padding: .72rem;
    }

    .agenda-actions a {
        min-height: 38px;
        padding: .4rem .6rem;
    }

    .mini-calendar {
        max-width: 100%;
    }

}

/* ==========================================================================
   WIDGET DE CHAT PERSISTENTE (CENTRIFUGO)
   ========================================================================== */

.sga-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: var(--font-family, sans-serif);
}

.sga-chat-trigger {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--navy);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(21, 49, 79, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
    position: relative;
}

.sga-chat-trigger:hover {
    transform: scale(1.08);
    background: var(--navy-2);
}

.sga-chat-trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sga-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--paper);
    animation: sga-chat-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sga-chat-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.sga-chat-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 360px;
    height: 500px;
    background: var(--paper);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
    transform-origin: bottom right;
}

.sga-chat-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.sga-chat-header {
    background: var(--navy);
    color: #ffffff;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sga-chat-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.sga-chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    opacity: 0.85;
    margin-top: 2px;
}

.sga-chat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.sga-chat-status-dot.connected {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: sga-chat-pulse 2s infinite;
}

.sga-chat-status-dot.connecting {
    background: #eab308;
    box-shadow: 0 0 8px #eab308;
}

.sga-chat-status-dot.offline {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}

@keyframes sga-chat-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

.sga-chat-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    line-height: 1;
    padding: 0 4px;
}

.sga-chat-close:hover {
    opacity: 1;
}

.sga-chat-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--canvas);
}

.sga-chat-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background: var(--canvas);
}

.sga-chat-view.active {
    display: flex;
}

.sga-chat-view-header {
    background: var(--paper);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

.sga-chat-view-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.sga-chat-back-btn {
    background: transparent;
    border: none;
    color: var(--blue);
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.sga-chat-back-btn:hover {
    background: var(--blue-soft);
}

.sga-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sga-chat-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    min-height: 68px;
}

.sga-chat-item:hover {
    transform: translateY(-1px);
    border-color: var(--blue);
    box-shadow: 0 4px 12px rgba(47, 125, 246, 0.08);
}

.sga-chat-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sga-chat-item-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
}

.sga-chat-item-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-soft);
    color: var(--blue);
    border: 1px solid rgba(47, 125, 246, 0.25);
    font-size: 11px;
    font-weight: 800;
}

.sga-chat-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sga-chat-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.sga-chat-item-role {
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sga-chat-item-count {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--blue);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

.sga-chat-item-time {
    font-size: 10px;
    color: var(--muted);
}

.sga-chat-item-msg {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sga-chat-item.is-unread {
    border-left: 3px solid var(--blue);
    background: var(--blue-soft);
}

.sga-chat-item.is-unread .sga-chat-item-title {
    color: var(--navy);
}

.sga-chat-item.is-unread .sga-chat-item-msg {
    font-weight: 600;
    color: var(--ink);
}

/* Detalle del chat */
.sga-chat-detail-title-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin-left: 8px;
}

.sga-chat-detail-title-info h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

#sga-chat-detail-subtitle {
    font-size: 10px;
    color: var(--muted);
    margin-top: 1px;
}

.sga-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--canvas);
}

.sga-chat-msg-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 12.5px;
    line-height: 1.4;
    word-break: break-word;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sga-chat-msg-bubble.received {
    align-self: flex-start;
    background: var(--paper);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--line);
}

.sga-chat-msg-bubble.sent {
    align-self: flex-end;
    background: var(--blue);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.sga-chat-msg-time {
    font-size: 9px;
    align-self: flex-end;
    margin-top: 4px;
    opacity: 0.7;
}

.sga-chat-msg-bubble.received .sga-chat-msg-time {
    color: var(--muted);
}

.sga-chat-msg-bubble.sent .sga-chat-msg-time {
    color: rgba(255, 255, 255, 0.9);
}

.sga-chat-input-area {
    padding: var(--space-2) var(--space-3);
    background: var(--paper);
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    align-items: center;
}

.sga-chat-input-area input {
    flex: 1;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: 0 var(--space-3);
    font-size: 13px;
    color: var(--ink);
    background: var(--canvas);
    transition: border-color 0.2s, background-color 0.2s;
}

.sga-chat-input-area input:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.sga-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--blue);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, transform 0.15s;
}

.sga-chat-send-btn:hover {
    background: var(--blue-dark);
    transform: scale(1.04);
}

.sga-chat-send-btn:active {
    transform: scale(0.96);
}

.sga-chat-contact-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    width: 100%;
}

.sga-chat-contact-item:hover {
    border-color: var(--blue);
    background: var(--blue-soft);
}

.sga-chat-contact-info h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.sga-chat-contact-info span {
    font-size: 10px;
    color: var(--muted);
}

.sga-chat-empty {
    padding: var(--space-5) var(--space-3);
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.sga-chat-empty strong {
    color: var(--ink);
    display: block;
    margin-bottom: 4px;
}

/* Skeletons de Carga */
.sga-chat-skeleton {
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: sga-chat-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes sga-chat-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sga-chat-item-skeleton {
    padding: var(--space-2);
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 60px;
}

.sga-chat-item-skeleton-title {
    width: 60%;
    height: 12px;
    border-radius: 4px;
}

.sga-chat-item-skeleton-body {
    width: 90%;
    height: 10px;
    border-radius: 4px;
}

/* Pantalla completa en móvil con ajuste para teclado virtual (100dvh) */
@media (max-width: 639px) {
    .sga-chat-panel.is-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 10000 !important;
        box-shadow: none !important;
    }
    .sga-chat-panel.is-open .sga-chat-body {
        height: 100% !important;
        max-height: 100dvh !important;
    }
    .sga-chat-input-area {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* Agrupación temporal y separadores de fecha en el chat */
.sga-chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 8px;
    position: relative;
}
.sga-chat-date-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line, #e2e8f0);
    z-index: 1;
}
.sga-chat-date-divider span {
    background: var(--canvas, #f8fafc);
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted, #64748b);
    border-radius: 12px;
    border: 1px solid var(--line, #e2e8f0);
    z-index: 2;
    position: relative;
}

/* Agrupación temporal de burbujas (mismo remitente seguidas) */
.sga-chat-msg-bubble.cluster-middle,
.sga-chat-msg-bubble.cluster-end {
    margin-top: -6px !important;
}
.sga-chat-msg-bubble.received.cluster-start { border-bottom-left-radius: 4px !important; }
.sga-chat-msg-bubble.received.cluster-middle { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }
.sga-chat-msg-bubble.received.cluster-end { border-top-left-radius: 4px !important; border-bottom-left-radius: 16px !important; }

.sga-chat-msg-bubble.sent.cluster-start { border-bottom-right-radius: 4px !important; }
.sga-chat-msg-bubble.sent.cluster-middle { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }
.sga-chat-msg-bubble.sent.cluster-end { border-top-right-radius: 4px !important; border-bottom-right-radius: 16px !important; }

/* ==========================================================================
   CHAT WIDGET — DOBLE PANEL (Side-by-Side)
   En pantallas >= 640px, al abrir un hilo el panel se ensancha mostrando
   la lista de conversaciones a la izquierda y el detalle a la derecha.
   ========================================================================== */

@media (min-width: 640px) {
    /* Al seleccionar un hilo, el panel se convierte en doble columna */
    .sga-chat-panel.has-active-thread {
        width: 720px;
        height: 540px;
    }

    .sga-chat-panel.has-active-thread .sga-chat-body {
        display: grid;
        grid-template-columns: 300px 1fr;
        overflow: hidden;
    }

    /* Forzar que el hilo de hilos sea siempre visible en doble panel */
    .sga-chat-panel.has-active-thread #sga-chat-view-threads {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        border-right: 1px solid var(--line);
    }

    /* Vista de detalle ocupa el espacio restante */
    .sga-chat-panel.has-active-thread #sga-chat-view-detail {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* En doble panel, ocultar el botón "Volver" del detalle */
    .sga-chat-panel.has-active-thread #sga-chat-detail-back {
        display: none;
    }

    /* Ocultar vista de contactos cuando está en doble panel */
    .sga-chat-panel.has-active-thread #sga-chat-view-contacts {
        display: none;
    }
}

/* Estado de ítem de hilo seleccionado activo (resaltado en la lista del doble panel) */
.sga-chat-item.active {
    background: var(--blue-soft);
    border-color: var(--blue);
    border-left: 3px solid var(--blue);
}

.sga-chat-item.active .sga-chat-item-title {
    color: var(--navy);
    font-weight: 700;
}

/* Let text colors inherit from theme variables (var(--ink) and var(--muted)) for light/dark mode compatibility */

.sga-chat-panel .sga-chat-item.active {
    background: rgba(37, 99, 235, 0.18);
}

/* ==========================================================================
   CHAT WIDGET — ÁREA DE PREVISUALIZACIÓN DE ARCHIVO ADJUNTO
   ========================================================================== */

.sga-chat-file-preview-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--blue-soft);
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    color: var(--blue);
    font-weight: 600;
    animation: sga-chat-slide-in 0.2s ease;
}

@keyframes sga-chat-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sga-chat-file-preview-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.sga-chat-file-preview-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.sga-chat-file-preview-remove:hover {
    background: rgba(var(--danger-rgb, 220, 38, 38), 0.1);
}

/* ==========================================================================
   CHAT WIDGET — BARRA DE ACCIONES Y BOTONES DE ADJUNTOS
   ========================================================================== */

.sga-chat-input-area {
    padding: 0;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
}

.sga-chat-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: var(--space-2) var(--space-3);
}

.sga-chat-input-row input {
    flex: 1;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: 0 var(--space-3);
    font-size: 13px;
    color: var(--ink);
    background: var(--canvas);
    transition: border-color 0.2s, background-color 0.2s;
}

.sga-chat-input-row input:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.sga-chat-input-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 8px 12px;
    border-top: 1px solid var(--line);
    padding-top: 6px;
    background: var(--paper);
}

.sga-chat-action-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.sga-chat-action-icon-btn:hover {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: var(--blue);
}

/* ==========================================================================
   CHAT WIDGET — TARJETAS DE ADJUNTOS EN BURBUJAS DE MENSAJES
   ========================================================================== */

.sga-chat-msg-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.sga-chat-attachment-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    max-width: 240px;
}

.sga-chat-msg-bubble.received .sga-chat-attachment-card {
    background: var(--canvas);
    border-color: var(--line);
    color: var(--ink);
}

.sga-chat-msg-bubble.sent .sga-chat-attachment-card {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.sga-chat-attachment-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.sga-chat-msg-bubble.received .sga-chat-attachment-card:hover {
    background: var(--blue-soft);
    border-color: var(--blue);
}

.attachment-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.attachment-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attachment-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.attachment-size {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 1px;
}

/* Texto de la burbuja */
.sga-chat-bubble-text {
    line-height: 1.45;
}

/* Cabecera del hilo activo con identificador de doble panel */
.sga-chat-view-header-title-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sga-chat-view-header-title-section h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.sga-chat-view-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   AJUSTES DE INTERFAZ PARA MENSAJERÍA (TABS, BADGES, SELECTS, HOVERS)
   ========================================================================== */

/* Barra de navegación de mensajería (.tabbar) */
.tabbar {
    display: flex;
    gap: var(--space-1);
    margin: var(--space-4) 0 var(--space-5);
    padding: var(--space-1);
    overflow-x: auto;
    background: #e7ecf2;
    border-radius: var(--radius-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tabbar::-webkit-scrollbar {
    display: none;
}
.tabbar a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.tabbar a:hover {
    color: var(--navy);
    background: rgba(255, 255, 255, 0.6);
}
.tabbar a.active {
    color: var(--navy);
    background: var(--paper);
    box-shadow: 0 4px 12px rgba(26, 40, 56, 0.08);
}

/* Badges de lectura en tabla */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.badge-warning {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}
.badge-success {
    background: #d1fae5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* Selectores múltiples estilizados en formulario */
select[multiple] {
    height: auto;
    padding: 6px;
    background-color: var(--canvas);
    border: 1px solid #cbd5df;
    border-radius: var(--radius-sm);
    scrollbar-width: thin;
}
select[multiple] option {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    transition: background-color 0.15s, color 0.15s;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}
select[multiple] option:hover {
    background-color: var(--blue-soft);
    color: var(--blue-dark);
}
select[multiple] option:checked {
    background: var(--blue) linear-gradient(0deg, var(--blue) 0%, var(--blue) 100%) !important;
    color: #ffffff !important;
}

/* Hover de filas en tablas de mensajería */
.table-wrap tbody tr {
    transition: background-color 0.15s ease;
}
.table-wrap tbody tr:hover td {
    background: rgba(47, 125, 246, 0.03);
}

/* Fila no leída mejorada */
.message-row-unread td {
    background: #f4f9ff;
    font-weight: 700;
}
.message-row-unread:hover td {
    background: #ebf4ff !important;
}
.message-row-unread td:first-child {
    box-shadow: inset 3px 0 0 var(--blue);
}

/* Botón de acciones sutil */
.message-subject-link {
    color: var(--navy);
    font-weight: 700;
    transition: color 0.15s;
}
.message-subject-link:hover {
    color: var(--blue);
    text-decoration: none;
}

/* ==========================================================================
   SELECTORES DE DESTINATARIO TIPO EMAIL (COMPOSER autocomplete y chips)
   ========================================================================== */

.recipient-selector-wrapper {
    position: relative;
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.recipient-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 40px 6px 8px;
    border: 1px solid #cbd5df;
    border-radius: var(--radius-sm);
    background: #ffffff;
    min-height: 44px;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: text;
}

.recipient-input-container:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.recipient-input-container input {
    flex: 1;
    min-width: 150px;
    height: 30px;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-size: 0.88rem !important;
    box-shadow: none !important;
}

.recipient-picker-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: background-color 0.15s, transform 0.15s;
    z-index: 2;
}

.recipient-picker-toggle-btn:hover {
    background: var(--blue);
    color: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

/* Fichas/Chips de Destinatario */
.recipient-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.3;
    gap: 6px;
    animation: sga-chip-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sga-chip-pop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.recipient-chip.type-user {
    background: var(--blue-soft);
    border: 1px solid #cce0ff;
    color: var(--blue-dark);
}

.recipient-chip.type-role {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #d97706;
}

.recipient-chip.type-group {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #059669;
}

.chip-remove {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    font-weight: 700;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.chip-remove:hover {
    opacity: 1;
}

/* Desplegable Autocomplete */
.recipient-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 999;
    max-height: 260px;
    overflow: hidden;
}

.recipient-dropdown-scroll {
    max-height: 260px;
    overflow-y: auto;
}

.recipient-dropdown-section {
    border-bottom: 1px solid var(--line);
}

.recipient-dropdown-section:last-child {
    border-bottom: none;
}

.recipient-dropdown-section-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--canvas);
    padding: 6px 12px;
}

.recipient-dropdown-option {
    display: flex;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}

.recipient-dropdown-option:hover:not(:disabled) {
    background: var(--blue-soft);
}

.recipient-dropdown-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.option-details {
    display: flex;
    flex-direction: column;
}

.option-details strong {
    font-size: 12.5px;
    color: var(--ink);
}

.option-details span {
    font-size: 10px;
    color: var(--muted);
    margin-top: 1px;
}

.recipient-dropdown-empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
}

/* Modal Selector de Contactos */
.recipient-picker-modal {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    background: var(--paper);
    width: 90%;
    max-width: 480px;
}

.recipient-picker-modal::backdrop {
    background: rgba(21, 49, 79, 0.4);
    backdrop-filter: blur(4px);
}

.recipient-picker-modal-shell {
    display: flex;
    flex-direction: column;
    height: 520px;
    overflow: hidden;
}

.recipient-picker-modal-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--canvas);
}

.recipient-picker-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
}

.recipient-picker-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.15s;
    line-height: 1;
}

.recipient-picker-modal-close:hover {
    color: var(--ink);
}

.recipient-picker-modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    background: #f1f5f9;
}

.recipient-picker-modal-tabs .tab-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.recipient-picker-modal-tabs .tab-btn:hover {
    color: var(--blue);
}

.recipient-picker-modal-tabs .tab-btn.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    background: var(--paper);
}

.recipient-picker-modal-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--canvas);
}

.picker-tab-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    padding: var(--space-3);
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.picker-tab-panel.active {
    display: flex;
}

.picker-search-filter {
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid #cbd5df;
    padding: 0 var(--space-3);
    font-size: 13px;
    margin-bottom: var(--space-3);
    background: var(--paper);
}

.picker-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px;
}

.picker-item-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    transition: background-color 0.15s;
}

.picker-item-label:hover {
    background: var(--blue-soft);
}

.picker-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
    cursor: pointer;
}

.recipient-picker-modal-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    background: var(--canvas);
}

/* UI/UX Pro Max: Chat Enhancements */
.typing-indicator-container { display: flex; align-items: center; padding: 2px 4px; }
.typing-dot { width: 5px; height: 5px; margin: 0 2px; background-color: #64748b; border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(2) { animation-delay: -0.32s; }
.typing-dot:nth-child(3) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes msgSlideFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg-enter-active {
    animation: msgSlideFadeIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Overrides for Chat Bubbles inside sga-chat-widget to enforce Pro Max design */
#sga-chat-messages .bg-indigo-600\/90 {
    background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.25) !important;
    border-radius: 16px 16px 4px 16px !important;
}

#sga-chat-messages .bg-slate-800 {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px 16px 16px 4px !important;
}

/* Fix Attachment Card hover state */
.sga-chat-attachment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sga-chat-attachment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(0,0,0,0.15);
}