/* =====================================================================
   app.css — Espacio de la fisioterapeuta
   ---------------------------------------------------------------------
   Escrita a mano, sin framework: ninguna dependencia externa, nada que
   se caiga si un CDN falla, y una decena de kilobytes en lugar de
   varios centenares.

   Orden : 1. tokens · 2. base · 3. barra superior · 4. pantalla de
   envío · 5. componentes comunes · 6. pantallas de detalle · 7. móvil
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ---------------------------------------------------------------------
   Paleta derivada del logotipo : el azul pizarra del sello es el único
   acento. El verde queda reservado a « está hecho », el ámbar a « ojo ».
   ===================================================================== */

:root {
    color-scheme: light;

    --tinta:        #131a21;
    --tinta-suave:  #55636e;
    --tinta-tenue:  #8a959e;

    --pizarra:      #5d7d99;
    --pizarra-osc:  #44607a;
    --pizarra-luz:  #eaf0f5;

    --verde:        #2f7d5f;
    --verde-luz:    #e8f3ee;
    --ambar:        #a8741d;
    --ambar-luz:    #fbf3e3;
    --rojo:         #b3261e;
    --rojo-luz:     #fdeceb;
    --rojo-borde:   #f0c9c5;

    --fondo:        #f6f5f3;
    --superficie:   #ffffff;
    --borde:        #e3e1dd;
    --borde-fuerte: #cfccc6;

    --radio:        10px;
    --radio-s:      7px;
    --sombra:       0 1px 2px rgba(19, 26, 33, .06);
    --sombra-alta:  0 12px 34px rgba(19, 26, 33, .16);

    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --tinta:        #eef1f3;
        --tinta-suave:  #a3aeb7;
        --tinta-tenue:  #6d7a85;

        --pizarra:      #8fb0cb;
        --pizarra-osc:  #a9c4da;
        --pizarra-luz:  #1e2a35;

        --verde:        #6cc39b;
        --verde-luz:    #17281f;
        --ambar:        #d9a94f;
        --ambar-luz:    #2a2115;
        --rojo:         #f28e86;
        --rojo-luz:     #2b1917;
        --rojo-borde:   #5a302c;

        --fondo:        #11161b;
        --superficie:   #182027;
        --borde:        #2a343d;
        --borde-fuerte: #3a4650;

        --sombra:       0 1px 2px rgba(0, 0, 0, .4);
        --sombra-alta:  0 12px 34px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --tinta:        #eef1f3;
    --tinta-suave:  #a3aeb7;
    --tinta-tenue:  #6d7a85;

    --pizarra:      #8fb0cb;
    --pizarra-osc:  #a9c4da;
    --pizarra-luz:  #1e2a35;

    --verde:        #6cc39b;
    --verde-luz:    #17281f;
    --ambar:        #d9a94f;
    --ambar-luz:    #2a2115;
    --rojo:         #f28e86;
    --rojo-luz:     #2b1917;
    --rojo-borde:   #5a302c;

    --fondo:        #11161b;
    --superficie:   #182027;
    --borde:        #2a343d;
    --borde-fuerte: #3a4650;

    --sombra:       0 1px 2px rgba(0, 0, 0, .4);
    --sombra-alta:  0 12px 34px rgba(0, 0, 0, .55);
}


/* =====================================================================
   2. BASE
   ===================================================================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-text-size-adjust: 100%;
}

h1 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 3px;
     text-wrap: balance; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 5px; }

a       { color: var(--pizarra-osc); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--pizarra);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* =====================================================================
   3. BARRA SUPERIOR
   ---------------------------------------------------------------------
   Sin menú: solo la búsqueda y la cuenta. Todo lo demás vive detrás
   del nombre, a la derecha.
   ===================================================================== */

.barra-superior {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}

.superior-interior {
    max-width: 1160px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.015em;
    color: var(--tinta);
    flex-shrink: 0;
}
.marca:hover { text-decoration: none; }
.marca-sello {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: var(--pizarra);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.marca-sello svg { width: 15px; height: 15px; }

.buscador { flex: 1; min-width: 0; position: relative; }
.buscador svg {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    color: var(--tinta-tenue);
    pointer-events: none;
}
.buscador input {
    width: 100%;
    padding: 8px 12px 8px 33px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
}

/* --- Cuenta ---------------------------------------------------------- */

.cuenta { position: relative; flex-shrink: 0; }

.cuenta-boton {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
    background: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}
.cuenta-boton:hover { background: var(--fondo); }
.cuenta-boton .inicial {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--pizarra-luz);
    color: var(--pizarra-osc);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}

.cuenta-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 214px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    padding: 5px;
    z-index: 50;
}
.cuenta-menu[hidden] { display: none; }
.cuenta-menu a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radio-s);
    color: var(--tinta);
    font-size: 14px;
}
.cuenta-menu a:hover { background: var(--fondo); text-decoration: none; }
.cuenta-menu .separador { height: 1px; background: var(--borde); margin: 5px 0; }
.cuenta-menu .dato {
    color: var(--tinta-tenue);
    font-family: var(--mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}


/* =====================================================================
   4. PANTALLA DE ENVÍO
   ===================================================================== */

main {
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 20px 40px;
}
main.con-barra { padding-bottom: 128px; }

.encabezado-seccion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.pista { margin: 2px 0 0; font-size: 13.5px; color: var(--tinta-suave); }

/* --- Fichas de categoría --------------------------------------------- */

.fichas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.ficha {
    padding: 5px 12px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--tinta);
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
}
.ficha:hover { border-color: var(--borde-fuerte); text-decoration: none; }
.ficha[aria-pressed="true"], .ficha.activa {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--superficie);
    font-weight: 500;
}

/* --- Rejilla --------------------------------------------------------- */

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0;
    transition: border-color .12s, box-shadow .12s;
    -webkit-tap-highlight-color: transparent;
}
.tarjeta:hover { border-color: var(--borde-fuerte); }
.tarjeta:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 2px; }
.tarjeta[aria-checked="true"] {
    border-color: var(--pizarra);
    box-shadow: 0 0 0 2px var(--pizarra-luz), var(--sombra);
}
.tarjeta.inactiva { opacity: .55; }

.lamina {
    aspect-ratio: 4 / 3;
    position: relative;
    display: grid;
    place-items: center;
    background: var(--pizarra-luz);
    overflow: hidden;
}
.lamina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lamina .sin-foto { color: var(--tinta-tenue); font-size: 12.5px; }

.orden {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    min-width: 24px; height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pizarra);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .14s, transform .14s;
}
.tarjeta[aria-checked="true"] .orden { opacity: 1; transform: scale(1); }

.marca-video {
    position: absolute;
    bottom: 8px; right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(19, 26, 33, .72);
    color: #fff;
    font-family: var(--mono);
    font-size: 11px;
}
.marca-video svg { width: 9px; height: 9px; }

/* --- Lápiz de edición -------------------------------------------------
   El clic en la tarjeta ya está tomado por la selección, así que editar
   necesita su propio blanco. Con ratón aparece al pasar por encima; en
   pantalla táctil, donde no hay « pasar por encima », se queda visible.
   -------------------------------------------------------------------- */

.editar {
    position: absolute;
    top: 7px; right: 7px;
    z-index: 3;
    width: 28px; height: 28px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--superficie);
    color: var(--tinta-suave);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--sombra);
    opacity: .82;
    transition: opacity .12s, color .12s, border-color .12s;
}
.editar svg { width: 14px; height: 14px; }
.editar:hover { opacity: 1; color: var(--pizarra-osc); border-color: var(--pizarra); }

@media (hover: hover) and (pointer: fine) {
    .editar { opacity: 0; }
    .tarjeta:hover .editar,
    .tarjeta:focus-within .editar,
    .editar:focus-visible { opacity: 1; }
}

.cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.titulo-ej { font-size: 14px; font-weight: 600; line-height: 1.32; letter-spacing: -.005em; }
.categoria-ej {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-tenue);
    font-weight: 500;
}

/* --- Añadir, dentro de la misma rejilla ------------------------------- */

.tarjeta-anadir {
    border-style: dashed;
    border-color: var(--borde-fuerte);
    background: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    min-height: 180px;
    color: var(--tinta-suave);
    font-weight: 500;
    font-size: 14px;
}
.tarjeta-anadir:hover { border-color: var(--pizarra); color: var(--pizarra-osc); }

/* --- La misma tarjeta, pero como enlace ------------------------------
   En « Ejercicios » la tarjeta lleva a la ficha en lugar de
   seleccionar. Hay que neutralizar el subrayado que llevan todos los
   enlaces, y devolver el color del texto. */

.tarjeta-enlace { color: inherit; }
.tarjeta-enlace:hover { text-decoration: none; }
.tarjeta-enlace:hover .titulo-ej { color: var(--pizarra-osc); }

.etiquetas-ej { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }


/* --- El mensaje para la paciente -------------------------------------
   Se muestra entero y se puede retocar antes de copiarlo: ella ve lo
   que envía. El botón copia el contenido de este campo — igual que el
   botón del enlace copia el suyo. */

.bloc-mensaje { margin-top: 12px; }

.rotulo-mensaje {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--tinta-tenue);
}
.rotulo-mensaje strong { color: var(--tinta-suave); font-weight: 600; }

#campo-mensaje {
    width: 100%;
    padding: 11px 13px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
}
#campo-mensaje:focus {
    outline: none;
    border-color: var(--pizarra);
    box-shadow: 0 0 0 3px var(--pizarra-luz);
}
.tarjeta-anadir .signo {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--pizarra-luz);
    color: var(--pizarra-osc);
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
}

.vacio-busqueda {
    grid-column: 1 / -1;
    padding: 40px 16px;
    text-align: center;
    color: var(--tinta-suave);
    font-size: 14px;
}

/* --- Barra de acción -------------------------------------------------- */

.barra-accion {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 35;
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -6px 22px rgba(19, 26, 33, .07);
    padding-bottom: env(safe-area-inset-bottom);
}

.accion-interior {
    max-width: 1160px;
    margin: 0 auto;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.contador {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-shrink: 0;
    font-family: var(--mono);
}
.contador .cifra {
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    color: var(--pizarra-osc);
    font-variant-numeric: tabular-nums;
}
.contador.vacio .cifra { color: var(--tinta-tenue); }
.contador .unidad {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-tenue);
}

.campo-seudonimo {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-s);
    background: var(--fondo);
}


/* =====================================================================
   5. COMPONENTES COMUNES
   ===================================================================== */

/* --- Botones ---------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
    background: var(--pizarra);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.boton:hover:not(:disabled) { background: var(--pizarra-osc); color: #fff; text-decoration: none; }
.boton:disabled { opacity: .42; cursor: not-allowed; }

.boton-neutro {
    background: var(--superficie);
    color: var(--tinta);
    border-color: var(--borde-fuerte);
    font-weight: 500;
}
.boton-neutro:hover:not(:disabled) { background: var(--fondo); color: var(--tinta); }

.boton-riesgo { background: var(--superficie); color: var(--rojo); border-color: var(--rojo-borde); }
.boton-riesgo:hover:not(:disabled) { background: var(--rojo-luz); color: var(--rojo); }

.boton-pequeno { padding: 5px 11px; font-size: 13px; font-weight: 500; }

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

/* --- Alias de las pantallas de detalle --------------------------------
   Esas vistas se escribieron con nombres franceses. En vez de tocarlas
   una por una, sus clases apuntan aquí a los mismos estilos.
   -------------------------------------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
    background: var(--pizarra);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.bouton:hover:not(:disabled) { background: var(--pizarra-osc); color: #fff; text-decoration: none; }
.bouton:disabled { opacity: .42; cursor: not-allowed; }

.bouton-secondaire {
    background: var(--superficie);
    color: var(--tinta);
    border-color: var(--borde-fuerte);
    font-weight: 500;
}
.bouton-secondaire:hover:not(:disabled) { background: var(--fondo); color: var(--tinta); }

.bouton-danger { background: var(--superficie); color: var(--rojo); border-color: var(--rojo-borde); }
.bouton-danger:hover:not(:disabled) { background: var(--rojo-luz); color: var(--rojo); }

.bouton-petit { padding: 5px 11px; font-size: 13px; font-weight: 500; }

.bouton-secondaire.actif {
    background: var(--pizarra-luz);
    color: var(--pizarra-osc);
    border-color: var(--pizarra);
}

/* --- Tarjetas de contenido -------------------------------------------- */

.carte, .panel-caja {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px 18px;
    box-shadow: var(--sombra);
}
.carte + .carte { margin-top: 12px; }

.grille        { display: grid; gap: 12px; }
.grille-3      { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grille-stats  { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.stat .valeur {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat .label {
    color: var(--tinta-tenue);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
    margin-top: 3px;
}

/* --- Formularios ------------------------------------------------------ */

.champ { margin-bottom: 14px; }
.champ label, .campo label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    margin-bottom: 5px;
}
.aide, .champ .aide {
    font-size: 12.5px;
    color: var(--tinta-tenue);
    margin-top: 5px;
    line-height: 1.45;
}

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=date],
select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--pizarra);
    background: var(--superficie);
    box-shadow: 0 0 0 3px var(--pizarra-luz);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

input[type=file] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-s);
    background: var(--fondo);
    font-size: 13.5px;
}

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

/* --- Mensajes --------------------------------------------------------- */

.message {
    padding: 10px 13px;
    border-radius: var(--radio-s);
    margin-bottom: 12px;
    font-size: 13.5px;
    border-left: 3px solid;
    line-height: 1.45;
}
.message-succes { background: var(--verde-luz); border-color: var(--verde); color: var(--verde); }
.message-error  { background: var(--rojo-luz);  border-color: var(--rojo);  color: var(--rojo); }
.message-info   { background: var(--ambar-luz); border-color: var(--ambar); color: var(--ambar); }
.message a      { color: inherit; text-decoration: underline; }

/* --- Etiquetas -------------------------------------------------------- */

.etiquette {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    background: var(--fondo);
    color: var(--tinta-suave);
    border: 1px solid var(--borde);
}
.etiquette-video   { background: var(--pizarra-luz); color: var(--pizarra-osc); border-color: transparent; }
.etiquette-usage,
.etiquette-brouillon { background: var(--ambar-luz); color: var(--ambar); border-color: transparent; }
.etiquette-actif   { background: var(--verde-luz);  color: var(--verde);  border-color: transparent; }
.etiquette-archive,
.etiquette-inactif { background: var(--fondo); color: var(--tinta-tenue); }

/* --- Tablas ----------------------------------------------------------- */

.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-tenue);
    font-weight: 600;
    padding: 10px 16px;
    border-bottom: 1px solid var(--borde);
    background: var(--fondo);
}
.tableau td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
    font-size: 14px;
}
.tableau tr:last-child td { border-bottom: none; }
.ligne-inactive { opacity: .55; }

/* --- Filtros y encabezados de página ---------------------------------- */

.filtres, .barre-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}
.filtres input[type=search] { flex: 1; min-width: 170px; }
.filtres select { width: auto; min-width: 150px; }

.titre-page {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.titre-page p { margin: 2px 0 0; color: var(--tinta-suave); font-size: 13.5px; }

.vide-etat { text-align: center; padding: 40px 16px; color: var(--tinta-suave); }
.vide-etat p { margin: 5px 0 14px; font-size: 14px; }

/* --- Enlace mágico ---------------------------------------------------- */

.enlace-caja { display: flex; gap: 8px; flex-wrap: wrap; }
.enlace-caja input {
    flex: 1;
    min-width: 210px;
    font-family: var(--mono);
    font-size: 12.5px;
}


/* =====================================================================
   6. SUPERPOSICIONES : hoja del enlace y panel del ejercicio
   ===================================================================== */

.velo {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(19, 26, 33, .42);
    display: grid;
    place-items: center;
    padding: 20px;
}
.velo[hidden] { display: none; }

.hoja {
    width: 100%;
    max-width: 520px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: var(--sombra-alta);
    padding: 26px 24px 22px;
    animation: subir .22s ease-out;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
@keyframes subir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.sello-listo {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--verde-luz);
    color: var(--verde);
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}
.sello-listo svg { width: 20px; height: 20px; }

.hoja h2 { font-size: 19px; margin-bottom: 3px; }
.hoja .resumen { margin: 0 0 18px; font-size: 14px; color: var(--tinta-suave); }
.hoja .resumen strong { color: var(--tinta); font-weight: 600; }

.acciones-hoja { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acciones-hoja .boton { flex: 1; justify-content: center; }

.nota {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
    font-size: 12.5px;
    color: var(--tinta-tenue);
    line-height: 1.5;
}

/* --- Panel lateral ---------------------------------------------------- */

.velo-panel {
    position: fixed;
    inset: 0;
    z-index: 61;
    background: rgba(19, 26, 33, .42);
}
.velo-panel[hidden] { display: none; }

.panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(430px, 100%);
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    padding: 22px 22px 30px;
    overflow-y: auto;
    animation: entrar .2s ease-out;
}
@keyframes entrar {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.panel-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.panel-cabeza h2 { margin: 0; font-size: 17px; }

.cerrar {
    width: 30px; height: 30px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--tinta-suave);
    flex-shrink: 0;
}
.cerrar:hover { background: var(--fondo); }

.campo { margin-bottom: 14px; }

.apercu-media { display: flex; gap: 10px; align-items: flex-start;
                flex-wrap: wrap; margin-bottom: 8px; }
.apercu-media img, .apercu-media video {
    width: 150px;
    border-radius: var(--radio-s);
    border: 1px solid var(--borde);
    background: #000;
}

.progreso {
    height: 5px;
    border-radius: 999px;
    background: var(--borde);
    overflow: hidden;
    margin-top: 8px;
}
.progreso[hidden] { display: none; }
.progreso span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pizarra);
    transition: width .15s linear;
}

.zona-riesgo { margin-top: 20px; }
.zona-riesgo[hidden] { display: none; }


/* =====================================================================
   7. PANTALLAS DE DETALLE (editor fino, historial, acceso)
   ===================================================================== */

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.onglet {
    padding: 8px 13px;
    border: none;
    background: none;
    font-weight: 500;
    font-size: 14px;
    color: var(--tinta-suave);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.onglet.actif { color: var(--pizarra-osc); border-bottom-color: var(--pizarra); }
.panneau[hidden] { display: none; }

.editeur { display: grid; grid-template-columns: 1fr 310px; gap: 12px;
           align-items: start; margin-top: 12px; }
.bloc { border-left: 3px solid var(--borde); margin-bottom: 12px; }
.bloc-activo { border-left-color: var(--pizarra); }
.bloc-entete { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bloc-titre { flex: 1; font-weight: 600; }
.bloc-titre-en, .bloc-consigna { margin-bottom: 8px; font-size: 13.5px; }
.bloc-consigna { min-height: 54px; }
.bloc-acciones { display: flex; gap: 4px; }
.bloc-vacio { padding: 14px; text-align: center; border: 1px dashed var(--borde);
              border-radius: var(--radio-s); margin-top: 8px; }

.ejercicio-fila { display: flex; gap: 10px; padding: 10px 0;
                  border-top: 1px solid var(--borde); align-items: flex-start; }
.ejercicio-vineta { width: 64px; height: 48px; flex-shrink: 0; background: var(--fondo);
                    border-radius: var(--radio-s); overflow: hidden; }
.ejercicio-vineta img { width: 100%; height: 100%; object-fit: cover; }
.ejercicio-cuerpo { flex: 1; min-width: 0; }
.ejercicio-encabezado { display: flex; gap: 6px; align-items: center;
                        flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; }
.ejercicio-numeros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.campo-numero { display: flex; flex-direction: column; gap: 2px; }
.campo-numero span { font-size: 11px; color: var(--tinta-tenue);
                     text-transform: uppercase; letter-spacing: .05em; }
.campo-numero input { width: 80px; padding: 5px 8px; font-size: 13.5px; }
.ejercicio-consigna { font-size: 13.5px; padding: 6px 9px; }
.ejercicio-acciones { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.ejercicio-mover { width: 42px; padding: 4px; font-size: 12.5px; }

.biblioteca-lista { max-height: 58vh; overflow-y: auto; }
.biblioteca-item {
    display: flex; gap: 9px; align-items: center; width: 100%;
    padding: 6px; margin-bottom: 3px;
    border: 1px solid transparent; border-radius: var(--radio-s);
    background: none; text-align: left; cursor: pointer;
}
.biblioteca-item:hover { background: var(--pizarra-luz); }
.biblioteca-vineta { width: 42px; height: 32px; flex-shrink: 0;
                     background: var(--fondo); border-radius: 5px; overflow: hidden; }
.biblioteca-vineta img { width: 100%; height: 100%; object-fit: cover; }
.biblioteca-cuerpo { flex: 1; min-width: 0; }
.biblioteca-titulo { font-size: 13.5px; font-weight: 500; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }
.biblioteca-mas { color: var(--pizarra); font-weight: 700; font-size: 17px; flex-shrink: 0; }

.lista-orden { border: 1px solid var(--borde); border-radius: var(--radio-s); }
.fila-orden { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
              border-bottom: 1px solid var(--borde); font-size: 13.5px; }
.fila-orden:last-child { border-bottom: none; }
.fila-separador { background: var(--ambar-luz); border-left: 3px solid var(--ambar); }
.nombre-orden { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acciones-orden { display: flex; gap: 4px; flex-shrink: 0; }

.apercu-bloc { margin-bottom: 14px; }
.apercu-liste { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.apercu-liste li { margin-bottom: 4px; }
.apercu-liste .aide { display: inline; margin-left: 5px; }

.jauge { height: 6px; background: var(--borde); border-radius: 999px;
         overflow: hidden; margin-top: 7px; }
.jauge span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.jauge.attention span { background: var(--ambar); }
.jauge.critique span  { background: var(--rojo); }

.opciones summary {
    cursor: pointer; font-weight: 500; font-size: 13.5px;
    color: var(--tinta-suave); list-style: none;
}
.opciones summary::-webkit-details-marker { display: none; }
.opciones summary::before { content: '▸ '; }
.opciones[open] summary::before { content: '▾ '; }

/* --- Acceso ----------------------------------------------------------- */

.page-connexion {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--fondo);
}
.boite-connexion {
    width: 100%;
    max-width: 370px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 30px 26px;
    box-shadow: var(--sombra-alta);
}
.boite-connexion .marca { justify-content: center; margin-bottom: 20px; font-size: 18px; }
.boite-connexion .boton { width: 100%; justify-content: center; margin-top: 6px; }


/* =====================================================================
   8. TELÉFONO
   ===================================================================== */

@media (max-width: 620px) {
    .superior-interior { padding: 9px 14px; gap: 9px; flex-wrap: wrap; }
    .buscador { order: 3; flex-basis: 100%; }

    main { padding: 16px 14px 40px; }
    main.con-barra { padding-bottom: 118px; }

    .rejilla { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .lamina { aspect-ratio: 1 / 1; }
    .titulo-ej { font-size: 13px; }
    .tarjeta-anadir { min-height: 150px; padding: 20px 12px; }

    .accion-interior { padding: 10px 14px; gap: 8px; }
    .contador .unidad { display: none; }
    .boton { padding: 9px 13px; }

    .editeur { grid-template-columns: 1fr; }
    .carte { overflow-x: auto; }
    .tableau { min-width: 500px; }
    .ejercicio-fila { flex-wrap: wrap; }
    .ejercicio-acciones { flex-direction: row; width: 100%; }
    .apercu-media img, .apercu-media video { width: 100%; }
    .panel { padding: 18px 16px 26px; }
}


/* =====================================================================
   9. MÉNAGE DANS L'HISTORIQUE
   ===================================================================== */

/* Cases à cocher lisibles au doigt dans un tableau dense */
.tableau input[type="checkbox"],
.casilla-envio {
    width: 18px;
    height: 18px;
    accent-color: var(--pizarra);
    cursor: pointer;
}

.tableau tr:has(.casilla-envio:checked) td { background: var(--pizarra-luz); }

/* Sans :has (navigateurs anciens), la ligne reste simplement neutre :
   la case cochée suffit à savoir ce qui est sélectionné. */

.barra-accion[hidden] { display: none; }


/* =====================================================================
   8. PANTALLA DE SEGUIMIENTO
   ---------------------------------------------------------------------
   Responde a tres preguntas, por orden: quién no ha abierto su
   programa, quién lo ha dejado, quién va bien. Si nada está en ámbar,
   cierra la pestaña — ese es el objetivo.
   ===================================================================== */

.filtros-suivi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.filtro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.filtro:hover { border-color: var(--borde-fuerte); }
.filtro .n {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--tinta-tenue);
    font-variant-numeric: tabular-nums;
}
.filtro[aria-pressed="true"] {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--superficie);
}
.filtro[aria-pressed="true"] .n { color: var(--superficie); opacity: .62; }


/* --- La lista ---------------------------------------------------------
   Líneas separadas por un filete, no tarjetas con sombra: treinta
   tarjetas serían una pantalla de ruido. */

.lista-suivi {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.fila-suivi {
    display: grid;
    /* La última columna tiene un ancho fijo: si no, cada píldora mide
       lo que mide su texto y las bandas de días quedan desalineadas de
       una línea a otra — justo lo que hace ilegible una columna. */
    grid-template-columns: minmax(0, 1fr) auto 132px;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 15px 18px;
    background: none;
    border: none;
    border-top: 1px solid var(--borde);
    text-align: left;
    cursor: pointer;
    color: inherit;
    transition: background .12s;
}
.fila-suivi:first-child { border-top: none; }
.fila-suivi:hover { background: var(--fondo); }

.lista-vacia { padding: 26px; text-align: center; color: var(--tinta-tenue); margin: 0; }

.fila-suivi .quien { min-width: 0; }
.fila-suivi .nombre {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fila-suivi .programa {
    display: block;
    font-size: 13.5px;
    color: var(--tinta-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- La banda de 28 días ----------------------------------------------
   Un trazo por día, el más antiguo a la izquierda. Es el único sitio de
   la aplicación donde se ve un hábito formarse — o deshacerse. */

.racha { display: flex; gap: 3px; align-items: center; }
.dia { width: 7px; height: 16px; border-radius: 2px; background: var(--borde); }
.dia.hecho { background: var(--pizarra); }
.dia.hoy {
    box-shadow: 0 0 0 1.5px var(--superficie), 0 0 0 3px var(--pizarra-osc);
}
.dia.hoy.pendiente { background: var(--borde-fuerte); }

/* --- El estado --------------------------------------------------------- */

.estado {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.estado .punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.estado.bien { background: var(--verde-luz); color: var(--verde); }
.estado.bien .punto { background: var(--verde); }
.estado.ojo  { background: var(--ambar-luz); color: var(--ambar); }
.estado.ojo  .punto { background: var(--ambar); }
.estado.frio { background: var(--fondo); color: var(--tinta-tenue); border: 1px solid var(--borde); }
.estado.frio .punto { background: var(--tinta-tenue); }


/* --- El panel lateral --------------------------------------------------- */

.velo-suivi {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(19, 26, 33, .34);
    opacity: 0;
    transition: opacity .18s;
}
.velo-suivi.abierto { opacity: 1; }

.hoja-suivi {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 51;
    width: min(430px, 100%);
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    transform: translateX(100%);
    transition: transform .2s ease-out;
    display: flex;
    flex-direction: column;
}
.hoja-suivi.abierta { transform: none; }

.hoja-suivi .hoja-cabeza {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--borde);
}
.hoja-suivi .hoja-cabeza h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}
.hoja-suivi .hoja-cabeza p {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--tinta-tenue);
}

.hoja-suivi .cerrar {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: var(--radio-s);
    background: none;
    border: 1px solid var(--borde);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: inherit;
}
.hoja-suivi .cerrar:hover { background: var(--fondo); }
.hoja-suivi .cerrar svg { width: 15px; height: 15px; }

.hoja-suivi .hoja-cuerpo { padding: 20px; overflow-y: auto; flex: 1; }
.hoja-suivi .bloque + .bloque { margin-top: 26px; }

.rotulo-suivi {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin: 0 0 10px;
}

/* Tres cifras alineadas. Son hechos, no « indicadores ». */
.cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--borde);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    overflow: hidden;
}
.cifra { background: var(--superficie); padding: 11px 12px; }
.cifra b {
    display: block;
    font-size: 20px;
    font-weight: 600;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.cifra b.pequeno { font-size: 14px; letter-spacing: 0; }
.cifra span { font-size: 12px; color: var(--tinta-tenue); }

.nota-suivi {
    margin: 14px 0 0;
    padding: 11px 13px;
    background: var(--ambar-luz);
    border-radius: var(--radio-s);
    font-size: 13.5px;
    color: var(--ambar);
}

/* El mes en rejilla: las casillas llenas son las sesiones validadas. */
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.celda {
    aspect-ratio: 1;
    border-radius: 5px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-family: var(--mono);
    color: var(--tinta-tenue);
}
.celda.hecho { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }
.celda.fuera { opacity: .35; }

/* Los ejercicios, del menos visto al más visto: lo de arriba es de lo
   que hay que hablar en la próxima sesión. */
.ejercicios-suivi { display: flex; flex-direction: column; gap: 9px; }
.ej-suivi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.ej-nombre {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ej-nombre.cero { color: var(--ambar); }
.ej-barra { display: flex; align-items: center; gap: 8px; }
.ej-pista {
    width: 88px; height: 6px;
    border-radius: 3px;
    background: var(--borde);
    overflow: hidden;
}
.ej-relleno { display: block; height: 100%; background: var(--pizarra); border-radius: 3px; }
.ej-n {
    width: 22px;
    text-align: right;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--tinta-tenue);
    font-variant-numeric: tabular-nums;
}

.hoja-suivi .hoja-pie {
    display: flex;
    gap: 9px;
    padding: 14px 20px;
    border-top: 1px solid var(--borde);
}
.hoja-suivi .hoja-pie .bouton { flex: 1; justify-content: center; text-align: center; }


/* --- Teléfono ---------------------------------------------------------- */

@media (max-width: 720px) {
    .fila-suivi { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .racha { display: none; }      /* 28 trazos son ilegibles en 360 px */
}