/* Escape Calendar - interfaz del panel.
   Mismo lenguaje visual que el resto de aplicaciones Escape. */

/* Escape Calendar — lo propio del calendario.

   Los colores, la tipografia y los botones salen de assets/css/escape-ui.css
   (el sistema compartido, el mismo de gymark.com.co). Aqui los nombres de
   siempre se reapuntan a ese sistema: las reglas de mas abajo no se tocan y
   aun asi cambian solas entre claro y oscuro. */
:root {
    --muted:        var(--text-muted);
    --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
    --danger:       var(--error);
    --danger-soft:  var(--error-soft);
    --shadow-md:    var(--shadow-lg);
    --radius:       var(--radius-lg);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--fuente);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--text) 6%, transparent), transparent 30%),
        linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* --- Cabecera --- */
header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.header-container,
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
}

.header-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.container { padding-top: 24px; padding-bottom: 48px; }

/* --- Botones --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-alt); }
.btn-danger { background: var(--danger); color: var(--text-inverse); }
.btn-ghost { background: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { color: var(--text); background: var(--surface-alt); }
.btn-sm { min-height: 34px; padding: 0.35rem 0.8rem; font-size: 0.82rem; }

/* --- Tarjetas --- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 22px;
    margin-bottom: 20px;
}

.card-title {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
    font-weight: 700;
}

/* --- Vista aislada de una universidad ----------------------------------
   La que se reparte con el enlace propio de cada base: calendario o tabla,
   y nada más. */
.vista-tabs {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-alt);
}

.vista-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.38rem 0.9rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.vista-tab:hover { color: var(--text); text-decoration: none; }
.vista-tab.activa {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.uni-resumen {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.9rem;
}
.uni-resumen strong { color: var(--text); font-size: 1.05rem; }

/* La tabla del mes. Se desplaza sola si no cabe, en vez de desbordar. */
.tabla-envoltorio {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.tabla-mes {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.tabla-mes th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.tabla-mes td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft, var(--line));
    vertical-align: middle;
}
.tabla-mes tbody tr:last-child td { border-bottom: 0; }
.tabla-mes tbody tr:hover { background: var(--surface-alt); }
.tabla-mes tr.hecho td { opacity: 0.55; }
.tabla-mes tr.hecho td:nth-child(3) { text-decoration: line-through; }
.tabla-mes tr.es-hoy { background: var(--primary-soft); }

.tabla-mes .col-dia { white-space: nowrap; }
.tabla-mes .dia-numero { font-size: 1.05rem; font-weight: 800; }
.tabla-mes .dia-nombre { margin-left: 6px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
.tabla-mes .col-hora { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.tabla-mes .col-suave { color: var(--muted); }

/* --- Plegar el resumen -------------------------------------------------
   La leyenda y los totales ocupan bastante alto. Con el botón se esconden y
   queda solo la rejilla; la elección se recuerda en cada navegador. */
.resumen-barra {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.resumen-barra .ico { transition: transform 160ms ease; }

/* Con el resumen a la vista la flecha apunta arriba («plegar»); plegado,
   apunta abajo («desplegar»). Un solo icono girado, para no depender de que
   exista también el de la flecha hacia arriba. */
html:not(.resumen-oculto) .resumen-barra .ico { transform: rotate(180deg); }

html.resumen-oculto .leyenda,
html.resumen-oculto .stats { display: none; }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stat {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.stat.ok { border-left-color: var(--success); }
.stat.warn { border-left-color: var(--warning); }
/* El mismo color con el que salen las reuniones en la rejilla. */
.stat.reunion { border-left-color: var(--color-reuniones, #f43f5e); }
.stat-label { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stat-value { margin-top: 6px; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-extra { margin-top: 2px; color: var(--muted); font-size: 0.78rem; }

/* --- Formularios --- */
.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 600; }
.campo .ayuda { margin-top: 5px; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

.campo input[type=text],
.campo input[type=password],
.campo input[type=url],
.campo select,
.campo textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.campo input[type=color] { width: 54px; height: 42px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }

.fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fila > .campo { flex: 1 1 200px; margin-bottom: 0; }

/* --- Avisos --- */
.aviso {
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
}
/* Solo el primer <strong> hace de titular del aviso. Los de dentro del
   texto tienen que seguir siendo parte de la frase. */
.aviso > strong:first-child { display: block; margin-bottom: 3px; }
.aviso.info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.aviso.ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); }
.aviso.error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--error) 35%, transparent); color: var(--error); }
.aviso.warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning); }

/* --- Calendario --- */
.cal-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.cal-mes { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; text-transform: capitalize; }
.cal-nav { display: flex; gap: 6px; align-items: center; }

.cal-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Los desplegables se estiran con el texto de la opción más larga, y un
   cliente con nombre kilométrico rompía la fila entera. Se les pone un ancho
   fijo y el texto largo se recorta con puntos suspensivos. */
.cal-filtros select,
.cal-filtros input[type=search] {
    flex: 0 1 auto;
    width: auto;
    max-width: 190px;
    min-height: 38px;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
    text-overflow: ellipsis;
}
.cal-filtros input[type=search] { max-width: 210px; }
.cal-filtros select:focus, .cal-filtros input:focus { outline: none; border-color: var(--primary); }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.cal-cabecera {
    padding: 10px 8px;
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

.cal-dia {
    position: relative;   /* la raya de «ahora» se cuelga de aquí */
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 132px;
    padding: 8px 7px 10px;
    background: var(--surface);
}

/* --- Por dónde va el día -----------------------------------------------
   Una raya que marca la hora actual DENTRO de la lista de eventos del día
   de hoy: va justo delante del primero que aún no ha pasado, así que separa
   lo hecho de lo que queda.

   Está en el flujo, entre los eventos, y no flotando a una altura: en la
   rejilla del mes los eventos se apilan en lista, no colocados por hora, y
   una raya puesta por porcentaje del día caía donde no tocaba.

   Nace oculta y la enseña el JS, que es quien sabe la hora de Colombia
   aunque quien mire esté en otro país. */
.ahora {
    display: none;
    align-items: center;
    gap: 5px;
    margin: 2px 0;
    pointer-events: none;   /* no debe estorbar al pulsar un evento */
}
.ahora.puesta { display: flex; }

/* El punto, la línea y la hora, en ese orden. */
.ahora::before {
    content: '';
    order: 1;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger);
}
.ahora::after {
    content: '';
    order: 2;
    flex: 1 1 auto;
    height: 2px;
    background: var(--danger);
}

.ahora-hora {
    order: 3;
    flex: 0 0 auto;
    padding: 0 4px;
    border-radius: 5px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}
.cal-dia.fuera { background: var(--surface-alt); }
.cal-dia.fuera .cal-numero { color: var(--text-soft); }
.cal-dia.hoy { background: var(--primary-soft); }

.cal-numero {
    align-self: flex-start;
    min-width: 25px;
    margin-bottom: 2px;
    padding: 3px 7px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.cal-dia.hoy .cal-numero { background: var(--primary); color: var(--text-inverse); }

/* --- Evento ---
   Dos formas, como en cualquier calendario decente:
   · con hora  -> punto de color + hora + título, sobre fondo transparente
   · todo el día -> bloque con el color de la universidad de fondo
   El color siempre es el de la universidad, así se distinguen de un vistazo. */
.evento {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    padding: 4px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 0.765rem;
    line-height: 1.35;
    text-align: left;
    transition: background 130ms ease, transform 130ms ease;
}
.evento:hover { background: var(--surface-alt); transform: translateX(1px); }
.evento:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.evento .punto {
    flex: 0 0 auto;
    align-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-uni, var(--primary));
}

.evento .hora {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.evento .texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Todo el día: bloque de color con la universidad marcada a la izquierda. */
.evento.dia-completo {
    background: var(--color-uni-suave, var(--primary-soft));
    box-shadow: inset 3px 0 0 var(--color-uni, var(--primary));
    padding-left: 9px;
}
.evento.dia-completo:hover { filter: brightness(0.96); transform: translateX(1px); }
.evento.dia-completo .punto { display: none; }
.evento.dia-completo .texto { font-weight: 600; }

/* Reuniones: pastilla rellena en vez de una línea de texto con su puntito.
   Un examen y una reunión se distinguen de un vistazo sin leer nada, aunque
   el día esté lleno. El relleno va con el color de la base, así que cambiar
   el color desde la leyenda sigue funcionando igual. */
.evento.reunion,
.evento.reunion.dia-completo {
    background: var(--color-uni, var(--primary));
    /* Blanco o casi negro según lo claro que sea el relleno, para que la
       pastilla se lea con cualquier color elegido en la leyenda. Lo calcula
       el servidor al pintar el evento. */
    color: var(--color-uni-texto, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    padding-left: 7px;
    font-weight: 600;
}
.evento.reunion:hover,
.evento.reunion.dia-completo:hover {
    background: var(--color-uni, var(--primary));
    filter: brightness(1.08);
    transform: translateX(1px);
}
.evento.reunion .punto { display: inline-block; background: currentColor; }
.evento.reunion .hora  { color: currentColor; opacity: 0.85; }
.evento.reunion .texto { font-weight: 600; }

/* Lo ya hecho se apaga: así destaca lo que queda por delante. */
.evento.hecho { opacity: 0.62; }
.evento.hecho .texto { text-decoration: line-through; text-decoration-thickness: 1px; }

.cal-mas {
    align-self: flex-start;
    margin-top: 1px;
    padding: 2px 7px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}
.cal-mas:hover { color: var(--primary); background: var(--surface-alt); }

.cal-vacio { padding: 40px 20px; color: var(--muted); text-align: center; }

/* --- Lista de bases --- */
.bases { display: grid; gap: 12px; }

.base {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.base.inactiva { opacity: 0.6; }
.base-datos { flex: 1 1 260px; min-width: 0; }
.base-titulo { font-weight: 700; overflow-wrap: anywhere; }
.base-meta { margin-top: 3px; color: var(--muted); font-size: 0.79rem; overflow-wrap: anywhere; }
.base-props { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.base-acciones { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.pill.ok { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.pill.falta { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }

.codigo {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-alt);
    font-family: var(--fuente-mono);
    font-size: 0.8rem;
    word-break: break-all;
}

/* --- Modales --- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 20px;
    background: rgba(7, 7, 9, 0.55);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.modal.abierto { display: flex; align-items: flex-start; justify-content: center; }
.modal-caja {
    width: min(100%, 560px);
    margin: 40px auto;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.modal-titulo { margin-bottom: 16px; font-size: 1.05rem; font-weight: 800; }
.modal-botones { display: flex; gap: 10px; margin-top: 18px; }
.modal-botones .btn { flex: 1; }


/* --- Detalle de un evento, al estilo de Notion Calendar --- */

.ev-cabecera {
    display: flex;
    gap: 13px;
    align-items: stretch;
    margin-bottom: 18px;
}

.ev-barra {
    flex: 0 0 4px;
    border-radius: 999px;
    background: var(--color-uni, var(--primary));
}

.ev-titulo {
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* El cliente va en la cabecera, justo bajo el título: es lo primero que se
   quiere saber de un examen, más que cualquier otra propiedad. */
.ev-cliente {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.ev-cliente svg {
    flex: 0 0 auto;
    color: var(--muted);
}
.ev-cliente .ico { font-size: 15px; color: var(--muted); }

.ev-cuando {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.ev-cuando .ev-hora {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Las propiedades van dentro de su propio panel, con separadores visibles
   entre filas. Sin el panel y sin las líneas, todo se leía como un bloque
   de texto plano. */
.ev-props {
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.ev-fila {
    display: grid;
    grid-template-columns: 18px 104px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    transition: background 120ms ease;
}
.ev-fila + .ev-fila { border-top: 1px solid var(--line); }
.ev-fila:nth-child(even) { background: var(--surface-alt); }
.ev-fila:hover { background: var(--primary-soft); }

.ev-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.ev-icono svg { width: 15px; height: 15px; display: block; }
.ev-icono .ico { font-size: 14px; }

.ev-etiqueta {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ev-valor {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* El estado se lee mejor como pastilla de color que como texto suelto. */
.ev-chip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}
.ev-chip.ok { background: var(--success-soft); color: var(--success); }
.ev-chip.curso { background: var(--primary-soft); color: var(--primary-dark); }
.ev-chip.espera { background: var(--warning-soft); color: var(--warning); }
.ev-chip.neutro { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line); }
/* Toma el color de la base, que es el de la cabecera del detalle. */
.ev-chip-reunion { background: var(--color-uni, var(--primary)); color: var(--color-uni-texto, #fff); }

/* Punto del color de la universidad, como el indicador de calendario. */
.ev-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--color-uni, var(--primary));
}

@media (max-width: 520px) {
    /* El icono se queda junto a la etiqueta y el valor pasa debajo. */
    .ev-fila {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 4px 10px;
        padding: 10px 12px;
    }
    .ev-valor { grid-column: 1 / -1; padding-left: 28px; }
    .ev-etiqueta { font-size: 0.76rem; }

    /* Uno debajo del otro: en pantalla estrecha "Abrir en Notion" partía en
       dos líneas dentro del botón y quedaba feo. */
    .modal-botones { flex-direction: column; }
    .modal-caja { padding: 20px; }
}

/* --- Aviso flotante --- */
.toast {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
    max-width: min(90vw, 420px);
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
    font-size: 0.88rem;
    white-space: pre-line;
}
.toast.visible { display: block; }
.toast.ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.toast.error { border-color: color-mix(in srgb, var(--error) 45%, transparent); color: var(--error); }

/* --- Login --- */
body.login { display: grid; place-items: center; padding: 24px; }
.login-caja {
    width: min(100%, 400px);
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.login-caja h1 { margin: 0 0 4px; font-size: 1.3rem; }
.login-caja p { margin: 0 0 22px; color: var(--muted); font-size: 0.88rem; }
.login-caja .campo { text-align: left; }
.login-caja .btn { width: 100%; }

@media (max-width: 820px) {
    .cal-dia { min-height: 92px; }
    .evento { font-size: 0.72rem; }
}
@media (max-width: 700px) {
    /* Dos filtros por fila: uno por fila desperdicia pantalla y cuatro no caben. */
    .cal-filtros select,
    .cal-filtros input[type=search] {
        flex: 1 1 calc(50% - 4px);
        max-width: none;
        min-width: 0;
    }
    .cal-filtros .btn { flex: 1 1 100%; }
}

@media (max-width: 600px) {
    .cal-grid { font-size: 0.8rem; }
    .cal-dia { min-height: 74px; padding: 5px 4px; }
    .cal-cabecera { padding: 7px 2px; font-size: 0.64rem; }
    .evento .mat { display: none; }
    .header-container { min-height: 58px; }
}

/* Repintado en vivo -------------------------------------------------------
   Cuando algo cambia en Notion la rejilla se sustituye sola. Un destello muy
   corto avisa de que lo que se está mirando acaba de cambiar; sin él, los
   exámenes aparecerían de la nada y parecería un fallo. */
@keyframes cal-recien {
    from { background: var(--primary-soft); }
    to   { background: transparent; }
}
.cal-grid.recien {
    animation: cal-recien 1.1s ease-out;
    border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .cal-grid.recien { animation: none; }
}

/* --- Agendar cliente ------------------------------------------------------
   El botón manda: es lo primero que se ve al abrir y en el móvil ocupa todo
   el ancho, que es donde de verdad se usa este calendario. */
/* Agendar un examen y agendar una reunión, uno al lado del otro. */
.agendar-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-agendar {
    width: 100%;
    margin-bottom: 16px;
    padding: 0.95rem 1.5rem;
    font-size: 1.05rem;
}
.btn-agendar .ico { font-size: 19px; }

@media (min-width: 720px) {
    .btn-agendar { width: auto; min-width: 260px; }
}

/* --- Elegir la fecha ---------------------------------------------------
   Calendario propio, porque el del navegador empieza la semana en domingo o
   en lunes según su idioma y la página no puede decidirlo. Aquí siempre
   empieza en lunes, igual que la rejilla del mes. */
.campo-fecha { position: relative; }

.fecha-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fecha-dia {
    flex: 1 1 190px;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.95rem;
    text-align: left;
}
.fecha-dia.puesta { color: var(--text); font-weight: 600; }
.fecha-dia:hover { border-color: var(--primary); }

.fecha-hora-sel { flex: 0 1 140px; }

.dp {
    position: absolute;
    z-index: 60;
    margin-top: 6px;
    width: min(300px, 92vw);
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.dp-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.dp-mes { font-weight: 700; font-size: 0.9rem; text-transform: capitalize; }
.dp-nav {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
}
.dp-nav:hover { background: var(--surface-alt); }

.dp-cabecera,
.dp-rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp-cabecera {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dp-dia {
    aspect-ratio: 1;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.dp-dia:hover { background: var(--surface-alt); }
.dp-dia.fuera { color: var(--text-soft); opacity: 0.55; }
.dp-dia.hoy { box-shadow: inset 0 0 0 1px var(--primary); font-weight: 700; }
.dp-dia.elegido { background: var(--primary); color: #fff; font-weight: 700; }
.dp-dia.elegido:hover { background: var(--primary-dark); }

.campo-nota {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* --- Leyenda de universidades ---------------------------------------------
   Cada punto es el mismo color con el que salen los exámenes en la rejilla:
   sin esto los colores no significan nada. Pulsando una se filtra el mes. */
.leyenda {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
/* El título y el botón de barajar colores, en la misma línea. */
.leyenda-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.leyenda-cabecera .leyenda-titulo { margin-bottom: 0; }
.leyenda-azar { flex: 0 0 auto; }

.leyenda-titulo {
    display: block;
    margin-bottom: 10px;
    font-family: var(--fuente-corta);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.leyenda-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 13px 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.2;
    transition: border-color var(--fast), background var(--fast);
}
.leyenda-item:hover { border-color: var(--line-strong); opacity: 1; }
.leyenda-item.activa {
    border-color: var(--primary);
    background: var(--primary-soft);
    font-weight: 600;
}
.leyenda-punto {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    /* Un aro del color del fondo separa el punto de la ficha: sin él, sobre
       un chip oscuro los colores apagados se pierden. */
    box-shadow: 0 0 0 2px var(--surface);
}
/* Reuniones: el punto es una pastilla, como se ven en la rejilla. Así la
   leyenda explica la forma, no solo el color. */
.leyenda-item.es-reunion .leyenda-punto { width: 18px; border-radius: 4px; }
.leyenda-item.es-reunion .leyenda-nombre { font-weight: 700; }

.leyenda-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El punto como selector de color (solo en el panel). El <input type="color">
   se esconde encima del punto: se ve el círculo de siempre, pero al pulsarlo
   se abre el diálogo del sistema para elegir el color de esa universidad. */
.leyenda-editable { padding-left: 8px; }
.leyenda-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 3px;
    margin: -3px 0;
    cursor: pointer;
}
.leyenda-color .leyenda-punto {
    cursor: pointer;
    transition: transform var(--fast), box-shadow var(--fast);
}
.leyenda-color:hover .leyenda-punto {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--line-strong);
}
.leyenda-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    cursor: pointer;
}
.leyenda-filtro {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   MÓVIL — el calendario se vuelve agenda
   --------------------------------------------------------------------------
   Una rejilla de siete columnas en un teléfono no se lee: cada casilla queda
   de 45px y el título del examen se corta antes de la primera palabra. Así
   que por debajo de 700px la rejilla se convierte en una lista de días, y
   solo salen los días que tienen algo. Es el mismo HTML: cambia el CSS.
   ========================================================================== */
@media (max-width: 700px) {
    .cal-grid {
        display: block;
        border: 0;
        background: transparent;
        gap: 0;
    }

    /* Los nombres de los días (Lun, Mar…) solo tienen sentido en rejilla. */
    .cal-cabecera { display: none; }

    /* Días de otro mes y días sin nada: fuera. En una lista solo estorban. */
    .cal-dia.fuera,
    .cal-dia.sin-eventos { display: none; }

    .cal-dia {
        display: block;
        min-height: 0;
        margin-bottom: 10px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        overflow: hidden;
    }

    /* El número suelto se cambia por «Mar 15 sep», que es lo que hace falta
       leer cuando no hay una cuadrícula alrededor que dé el contexto. */
    .cal-numero { display: none; }
    .cal-dia::before {
        content: attr(data-etiqueta);
        display: block;
        padding: 9px 14px;
        border-bottom: 1px solid var(--line);
        background: var(--surface-alt);
        font-family: var(--fuente-corta);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .cal-dia.hoy::before {
        background: var(--primary);
        color: var(--text-inverse);
        border-bottom-color: var(--primary);
    }

    /* Cada examen, una fila de lista que se puede tocar con el dedo. */
    .cal-dia .evento {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-height: 46px;
        margin: 0;
        padding: 11px 14px;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0;
        border-left: 4px solid var(--color-uni);
        background: transparent;
        font-size: 0.92rem;
        text-align: left;
        white-space: normal;
    }
    .cal-dia .evento:last-child { border-bottom: 0; }
    .cal-dia .evento .punto { display: none; }
    .cal-dia .evento .hora {
        flex: 0 0 auto;
        min-width: 66px;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        color: var(--text-muted);
    }
    .cal-dia .evento .texto {
        flex: 1 1 auto;
        overflow: visible;
        white-space: normal;
        line-height: 1.35;
    }
    .cal-dia .evento.dia-completo .texto { font-weight: 600; }

    /* La raya sigue valiendo en la agenda: separa lo que ya pasó de lo que
       queda por delante. Solo necesita respirar un poco mas. */
    .ahora { margin: 6px 14px; }

    /* En la agenda del movil el fondo de cualquier evento vuelve a ser
       transparente, asi que la reunion tiene que repetir aqui su relleno: si
       no, se queda el texto blanco sobre fondo blanco y no se lee nada. */
    .cal-dia .evento.reunion {
        background: var(--color-uni, var(--primary));
        border-left-color: var(--color-uni, var(--primary));
        color: var(--color-uni-texto, #fff);
    }
    .cal-dia .evento.reunion .hora { color: currentColor; opacity: 0.85; }

    /* La barra del mes y los filtros, a lo ancho y con el dedo en mente. */
    .cal-barra { flex-direction: column; align-items: stretch; }
    .cal-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .cal-nav .btn { width: 100%; }
    .cal-filtros { flex-direction: column; align-items: stretch; }
    .cal-filtros select,
    .cal-filtros input[type="search"] { max-width: none; width: 100%; }

    /* La leyenda se desliza de lado en vez de comerse media pantalla. */
    .leyenda-lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .leyenda-lista::-webkit-scrollbar { display: none; }
    .leyenda-item { flex: 0 0 auto; }

    /* El formulario a pantalla casi completa, que es como se rellena bien. */
    .modal { padding: 0; align-items: flex-end; }
    .modal-caja {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal-botones { flex-direction: column-reverse; }
    .modal-botones .btn { width: 100%; }

    /* Campos de 16px: por debajo de eso Safari hace zoom solo al tocarlos y
       deja la página torcida. */
    .modal input, .modal select { font-size: 16px; min-height: 46px; }
}