/* COPIA de sistema.css (Hub.Cliente, 28/10/2026) sin @layer: aquí Tailwind va precompilado y sin capas,
   y dentro de una capa estas piezas perderían contra su reset. Si cambia el original, se vuelve a copiar.
   Lo propio de Services va en servicios.css. */

/* Gestor de tareas 60dias — sistema visual.
   Es el sistema «Anillos» del CRM: tinta de la casa para actuar, papel cálido de fondo y el turquesa
   y el verde del logo para la marca. Tailwind (CDN) maqueta; aquí van las piezas cuya forma importa.
   Cualquier pantalla nueva se monta con estas clases: .btn, .campo, .pestanas, .tarjeta, .alerta…
   Las piezas van en @layer components: una utilidad de Tailwind (w-48, px-2…) puede ajustarlas. Las pieles
   de los componentes del nuget van fuera de capa, porque tienen que ganar a sus propias utilidades. */



:root {
    --fondo: #F3F1EC;            /* papel: el fondo de la aplicación */
    --fondo-alt: #FFFFFF;        /* la lámina y las tarjetas */
    --fondo-deep: #F6F4EF;       /* zonas hundidas, hover de filas */
    --fondo-hundido: #ECE9E2;    /* pista de los segmentados y botones neutros */
    --fondo-elevado: #FFFFFF;
    --campo-fondo: #F6F4EF;
    --linea: #E8E5DE;
    --linea-fuerte: #D9D5CB;
    --texto: #0B2E33;
    --texto-suave: #52666A;
    --texto-tenue: #5A6B6E;
    --acento: #16707E;           /* enlaces, iconos activos, foco */
    --acento-hover: #0E5561;
    --acento-suave: #D5EEF1;     /* fondo de lo seleccionado */
    --marca: #2BADC0;
    --marca-2: #8FC97A;
    --accion: #0B2E33;           /* el botón principal: la tinta */
    --accion-hover: #16414A;
    --accion-texto: #FFFFFF;
    --foco: rgba(22, 112, 126, .32);

    --ambar-fondo: #FCEBD2;  --ambar-texto: #8A4B08;  --ambar: #D97706;
    --rojo-fondo: #FBE1DE;   --rojo-texto: #9F1D14;   --rojo: #B42318;
    --verde-fondo: #E3F0DC;  --verde-texto: #2F5E22;  --verde: #2F7A3A;
    --azul-fondo: #D5EEF1;   --azul-texto: #0E5561;
    --morada-fondo: #EFE6FA; --morada-texto: #5B2A86;

    --sombra: 0 1px 2px rgba(11, 46, 51, .04), 0 6px 20px rgba(11, 46, 51, .05);
    --sombra-alta: 0 28px 70px rgba(11, 46, 51, .20), 0 6px 16px rgba(11, 46, 51, .07);
    --sombra-flotante: 0 0 0 1px rgba(11, 46, 51, .06), 0 14px 36px rgba(11, 46, 51, .16);

    --rail-ancho: 5.5rem;
    --lamina-margen: .75rem;

    --r-s: 10px;
    --r-m: 14px;
    --r-l: 20px;

    --curva: cubic-bezier(.2, .8, .2, 1);
    --curva-muelle: cubic-bezier(.34, 1.4, .64, 1);
    --t-rapido: 120ms;
    --t: 200ms;
    --t-lento: 320ms;

    --fuente: "Instrument Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --fuente-titulo: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", sans-serif;
    --fuente-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    color-scheme: light;
}

/* ---------------------------------------------------------------- base */
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1:focus { outline: none; }
::selection { background: var(--acento-suave); color: var(--texto); }

/* Títulos de pantalla y de bloque, en la letra de marca. */
.lamina-contenido h1 {
    font-family: var(--fuente-titulo); font-size: 1.75rem; line-height: 1.15; font-weight: 600; letter-spacing: -.025em;
}
.lamina-contenido h2 { letter-spacing: -.01em; }
.tarjeta h2, .tarjeta h3, #modal-container h2 { font-family: var(--fuente-titulo); font-weight: 600; }


.enlace { color: var(--acento); text-decoration: none; font-weight: 500; }
.enlace:hover { color: var(--acento-hover); text-decoration: underline; text-underline-offset: 2px; }

.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fuente-mono); font-size: .75rem; font-variant-numeric: tabular-nums; }

.icono { width: 1.25em; height: 1.25em; flex: none; }
.icono-relleno { fill: var(--icono-tinte, color-mix(in srgb, var(--marca) 30%, transparent)); transition: fill var(--t); }

/* ---------------------------------------------------------------- cabecera de pantalla
   Todas igual: título (y una línea de contexto) a la izquierda, acciones a la derecha. */
.cabecera-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.cabecera-pagina-titulo { min-width: 0; }
.cabecera-pagina-titulo p { margin-top: .3rem; color: var(--texto-suave); font-size: .8125rem; }
.cabecera-pagina-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---------------------------------------------------------------- botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 2.375rem; padding: .5rem 1.05rem;
    border: 0; border-radius: 999px;
    background: var(--fondo-hundido); color: var(--texto);
    font-family: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.2;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido) var(--curva), opacity var(--t-rapido);
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--texto) 11%, var(--fondo-hundido)); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .icono { width: 1rem; height: 1rem; }

.btn-pri { background: var(--accion); color: var(--accion-texto); font-weight: 600; }
.btn-pri:hover:not(:disabled) { background: var(--accion-hover); color: var(--accion-texto); }
.btn-texto { background: transparent; color: var(--acento); }
.btn-texto:hover:not(:disabled) { background: var(--acento-suave); }
.btn-peligro { background: var(--rojo); color: #FFFFFF; font-weight: 600; }
.btn-peligro:hover:not(:disabled) { background: color-mix(in srgb, var(--rojo) 85%, #000); }
.btn-peligro-texto { background: transparent; color: var(--rojo-texto); }
.btn-peligro-texto:hover:not(:disabled) { background: var(--rojo-fondo); }
.btn-peq { min-height: 1.875rem; padding: .3rem .8rem; font-size: .75rem; }
.btn-icono { padding: 0; width: 2.375rem; height: 2.375rem; min-height: 0; }
.btn-icono.btn-peq { width: 1.875rem; height: 1.875rem; }
.btn-icono svg { width: 1.125rem; height: 1.125rem; }

.btn[aria-busy]:not([aria-busy="false"]) { pointer-events: none; }
.btn[aria-busy]:not([aria-busy="false"])::before {
    content: ""; width: .85rem; height: .85rem; border-radius: 50%; flex: none;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: girar .7s linear infinite;
}

/* ---------------------------------------------------------------- segmentado y pestañas */
.pestanas {
    display: inline-flex; gap: .125rem; padding: .25rem; border-radius: 999px;
    background: var(--fondo-hundido); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 2rem; padding: .35rem .95rem; border-radius: 999px; font-size: .8125rem; font-weight: 500;
    color: var(--texto-suave); background: transparent; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color var(--t) var(--curva), color var(--t-rapido), box-shadow var(--t) var(--curva);
}
.pestana:hover { color: var(--texto); }
.pestana.activa { background: var(--fondo-elevado); color: var(--texto); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 46, 51, .08), 0 2px 8px rgba(11, 46, 51, .06); }
.pestana:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
.pestana-cuenta {
    min-width: 1.125rem; height: 1.125rem; padding: 0 .35rem; border-radius: 999px;
    background: color-mix(in srgb, var(--texto) 12%, transparent); color: var(--texto);
    font-family: var(--fuente-mono); font-size: .625rem; font-weight: 500; line-height: 1.125rem; text-align: center;
}
.pestana.activa .pestana-cuenta { background: var(--accion); color: var(--accion-texto); }

/* El Tabs del nuget con el segmentado de la casa: <Tabs TitlesContainerClassName="pestanas" TitlesClassName="pestana" TitleSelectedClassName="activa" …> */
.pestanas > .pestana > span:first-child:not(:only-child) { display: none; } /* sin emojis delante */

/* ---------------------------------------------------------------- campos */
.campo {
    width: 100%; min-height: 2.5rem; padding: .55rem .9rem;
    border: 1px solid transparent; border-radius: var(--r-m);
    background: var(--campo-fondo); box-shadow: inset 0 0 0 1px var(--linea);
    color: var(--texto); font-family: inherit; font-size: .8125rem; line-height: 1.3;
    transition: background-color var(--t-rapido), box-shadow var(--t-rapido), border-color var(--t-rapido);
}
.campo:hover { box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.campo:focus { outline: none; background: var(--fondo-alt); border-color: var(--acento); box-shadow: 0 0 0 3px var(--foco); }
.campo::placeholder { color: var(--texto-tenue); opacity: 1; }
.campo:disabled, .campo[readonly] { opacity: .75; }
textarea.campo { line-height: 1.55; }
.etiqueta-campo { display: block; font-size: .75rem; font-weight: 500; color: var(--texto-suave); margin-bottom: .35rem; }

.buscador { position: relative; display: flex; align-items: center; }
.buscador > .icono { position: absolute; left: .85rem; width: 1rem; height: 1rem; color: var(--texto-suave); pointer-events: none; }
.buscador > .campo { padding-left: 2.4rem; border-radius: 999px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accion); width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------- etiquetas */
.alerta {
    display: inline-flex; align-items: center; gap: .3rem;
    min-height: 1.375rem; padding: .15rem .6rem; border-radius: 999px;
    font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.alerta-bloque {
    display: block; white-space: normal; padding: .75rem 1rem; border-radius: var(--r-m);
    font-size: .8125rem; font-weight: 500; line-height: 1.55;
}
.alerta-roja   { background: var(--rojo-fondo);   color: var(--rojo-texto); }
.alerta-ambar  { background: var(--ambar-fondo);  color: var(--ambar-texto); }
.alerta-verde  { background: var(--verde-fondo);  color: var(--verde-texto); }
.alerta-azul   { background: var(--azul-fondo);   color: var(--azul-texto); }
.alerta-morada { background: var(--morada-fondo); color: var(--morada-texto); }
.alerta-gris   { background: var(--fondo-hundido); color: var(--texto-suave); }
.alerta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.semaforo { display: inline-block; width: .625rem; height: .625rem; border-radius: 999px; flex: none; }
.semaforo-roja { background: var(--rojo); }
.semaforo-ambar { background: var(--ambar); }
.semaforo-verde { background: var(--verde); }
.semaforo-azul { background: var(--marca); }
.semaforo-gris { background: #9AA7A9; }

/* ---------------------------------------------------------------- tarjetas y bloques */
.tarjeta { border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--fondo-alt); }
.tarjeta-enlace { display: block; text-decoration: none; transition: border-color var(--t-rapido), box-shadow var(--t) var(--curva), transform var(--t) var(--curva); }
.tarjeta-enlace:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
.tarjeta-enlace:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
.rotulo { font-size: .75rem; font-weight: 600; color: var(--texto-suave); }
.evidencia { padding: .6rem .85rem; border-radius: var(--r-s); background: var(--fondo-deep); font-size: .75rem; line-height: 1.55; color: var(--texto-suave); }

/* Cifra con su etiqueta debajo. */
.cifra { display: flex; flex-direction: column; gap: .1rem; }
.cifra b { font-family: var(--fuente-titulo); font-size: 1.375rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { font-size: .75rem; color: var(--texto-suave); }

.avatar {
    width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--acento-suave); color: var(--acento-hover);
    font-family: var(--fuente-titulo); font-size: .8125rem; font-weight: 600;
}

/* Barra de avance. */
.barra { height: .5rem; border-radius: 999px; overflow: hidden; background: var(--fondo-hundido); }
.barra-relleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marca), var(--marca-2)); transition: width var(--t-lento) var(--curva); }

/* Pantalla vacía: qué pasa y qué hacer. */
.vacio { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 3rem 1rem; text-align: center; color: var(--texto-suave); }
.vacio > .icono { width: 2.25rem; height: 2.25rem; color: var(--texto-suave); margin-bottom: .35rem; }
.vacio b { color: var(--texto); font-family: var(--fuente-titulo); font-size: 1.0625rem; font-weight: 600; }

/* Mientras carga: la forma de lo que viene, sin rueda. */
.esqueleto { border-radius: var(--r-s); background: var(--fondo-hundido); animation: latido 1.2s ease-in-out infinite; }

/* ---------------------------------------------------------------- tablas propias */
.tabla { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tabla th { padding: .6rem .75rem; text-align: left; font-size: .75rem; font-weight: 600; color: var(--texto-suave); background: var(--fondo-deep); border-bottom: 1px solid var(--linea); }
.tabla td { padding: .65rem .75rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr { transition: background-color var(--t-rapido); }
.tabla tbody tr:hover { background: var(--fondo-deep); }

/* ---------------------------------------------------------------- Mi equipo
   Personas a la izquierda, una fila cada una; la actividad al lado, con su propio scroll. */
.equipo { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1100px) { .equipo { grid-template-columns: minmax(0, 1fr) 25rem; } }
.equipo-fila { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem 1rem; }
@media (min-width: 768px) { .equipo-fila { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) 12.5rem 8rem; } }
.equipo-fila-cabecera { display: none; padding-block: .5rem; background: var(--fondo-deep); border-bottom: 1px solid var(--linea); }
@media (min-width: 768px) { .equipo-fila-cabecera { display: grid; } }
.equipo-fila-boton { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color var(--t-rapido); }
.equipo-fila-boton:hover { background: var(--fondo-deep); }
.equipo-fila-boton:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--foco); }
.equipo-seleccionado { background: color-mix(in srgb, var(--acento-suave) 40%, transparent); box-shadow: inset 3px 0 0 var(--acento); }
.equipo-seleccionado .equipo-fila-boton:hover { background: transparent; }
.equipo-detalle { display: flex; flex-direction: column; gap: .45rem; padding: 0 1rem .85rem 3.6rem; font-size: .8125rem; }
.equipo-cifras { display: flex; justify-content: flex-end; gap: .9rem; font-size: .75rem; color: var(--texto-suave); white-space: nowrap; }
.equipo-cifras b { font-family: var(--fuente-titulo); font-size: 1rem; font-weight: 600; color: var(--texto); }
.avatar-peq { width: 2rem; height: 2rem; font-size: .75rem; }

/* Comentario de tarea: bocadillo con filo de marca, para que no se confunda con los cambios */
.comentario { min-width: 0; flex: 1; padding: .7rem 1rem .8rem; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--fondo-deep); box-shadow: inset 3px 0 0 var(--marca); }
.comentario-pendiente { background: var(--ambar-fondo); box-shadow: inset 3px 0 0 var(--ambar); }
@media (max-width: 559px) {
    .equipo-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: .4rem; }
    .equipo-fila > :nth-child(2) { grid-column: 1 / -1; order: 3; }
    .equipo-detalle { padding-left: 1rem; }
}

.equipo-actividad { overflow: auto; }
@media (min-width: 1100px) { .equipo-actividad { position: sticky; top: 0; max-height: calc(100dvh - 9.5rem); } }
.equipo-actividad-cabecera {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: 3rem; padding: .5rem 1rem; background: var(--fondo-alt); border-bottom: 1px solid var(--linea);
}
.equipo-dia { position: sticky; top: 3rem; z-index: 1; padding: .4rem 1rem; background: var(--fondo-deep); border-bottom: 1px solid var(--linea); font-size: .75rem; font-weight: 600; color: var(--texto-suave); }
.equipo-evento { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--linea); font-size: .8125rem; }
ul:last-child > .equipo-evento:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- Objetivos: calendario y lateral */
.objetivos { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1100px) { .objetivos { grid-template-columns: minmax(0, 1fr) 20rem; } }
.calendario { overflow: hidden; }
.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .75rem .75rem 1.25rem; }
.calendario-mes { font-family: var(--fuente-titulo); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.calendario-semana, .calendario-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario-semana { border-block: 1px solid var(--linea); background: var(--fondo-deep); }
.calendario-semana span { padding: .4rem .6rem; font-size: .6875rem; font-weight: 600; color: var(--texto-suave); }
.calendario-dia {
    min-height: 6.25rem; padding: .35rem .4rem .5rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0;
    border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.calendario-dia:nth-child(7n) { border-right: 0; }
.calendario-dias > .calendario-dia:nth-last-child(-n+7) { border-bottom: 0; }
.calendario-dia.fuera { background: var(--fondo-deep); }
.calendario-dia.fuera .calendario-num { color: var(--texto-tenue); opacity: .6; }
.calendario-dia-cabecera { display: flex; align-items: center; justify-content: space-between; }
.calendario-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.calendario-dia.hoy .calendario-num { background: var(--accion); color: var(--accion-texto); font-weight: 600; }
.calendario-nuevo {
    width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--texto-suave); opacity: 0; transition: opacity var(--t-rapido), background-color var(--t-rapido);
}
.calendario-nuevo .icono { width: .9rem; height: .9rem; }
.calendario-dia:hover .calendario-nuevo, .calendario-nuevo:focus-visible { opacity: 1; }
.calendario-nuevo:hover { background: var(--fondo-hundido); color: var(--texto); }
.calendario-nuevo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
@media (hover: none) { .calendario-nuevo { display: none; } }
.calendario-objetivo {
    display: flex; align-items: center; justify-content: space-between; gap: .35rem; min-width: 0;
    padding: .2rem .45rem; border-radius: 6px; font-size: .75rem; font-weight: 500; line-height: 1.3; text-decoration: none;
    background: var(--azul-fondo); color: var(--azul-texto); box-shadow: inset 2px 0 0 var(--marca);
    transition: filter var(--t-rapido);
}
.calendario-objetivo:hover { filter: brightness(.96); }
.calendario-objetivo:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--foco); }
.calendario-objetivo.cumplido { background: var(--verde-fondo); color: var(--verde-texto); box-shadow: inset 2px 0 0 var(--verde); }
.calendario-objetivo.atrasado { background: var(--rojo-fondo); color: var(--rojo-texto); box-shadow: inset 2px 0 0 var(--rojo); }
@media (max-width: 767px) {
    .calendario-dia { min-height: 3.75rem; padding: .25rem; }
    .calendario-objetivo { padding: 0; height: .4rem; font-size: 0; border-radius: 999px; box-shadow: none; background: var(--marca); }
    .calendario-objetivo span { display: none; }
    .calendario-objetivo.cumplido { background: var(--verde); }
    .calendario-objetivo.atrasado { background: var(--rojo); }
}
.lista-objetivo { display: flex; flex-direction: column; gap: .4rem; padding: .7rem 1rem; text-decoration: none; transition: background-color var(--t-rapido); }
.lista-objetivo:hover { background: var(--fondo-deep); }
.lista-objetivo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--foco); }
.barra-fina { display: block; height: .3rem; }
.objetivo-de-tarea { display: flex; align-items: center; gap: .35rem; padding: .45rem .25rem .45rem .6rem; border-radius: var(--r-s); background: var(--fondo-deep); font-size: .8125rem; }
.objetivo-de-tarea > a { text-decoration: none; }
.objetivo-de-tarea > a:hover .truncate { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- ficha de objetivo
   Se edita en el sitio: el título y la descripción parecen texto hasta que se tocan. */
.ficha-objetivo { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .ficha-objetivo { grid-template-columns: minmax(0, 1fr) 19rem; } }
.titulo-editable, .texto-editable {
    width: 100%; margin-left: -.5rem; padding: .25rem .5rem; border: 0; border-radius: var(--r-s); background: transparent; color: var(--texto);
    transition: background-color var(--t-rapido), box-shadow var(--t-rapido);
}
.titulo-editable { font-family: var(--fuente-titulo); font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.texto-editable { display: block; resize: none; field-sizing: content; min-height: 2.5rem; font-size: .875rem; line-height: 1.55; color: var(--texto-suave); }
.titulo-editable:hover, .texto-editable:hover { background: var(--fondo-deep); }
.titulo-editable:focus, .texto-editable:focus { outline: none; background: var(--fondo-alt); box-shadow: 0 0 0 1px var(--linea-fuerte), 0 0 0 4px var(--foco); color: var(--texto); }
.titulo-editable::placeholder, .texto-editable::placeholder { color: var(--texto-tenue); opacity: .8; }
.objetivo-tarea { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .65rem 1rem .65rem 1.25rem; font-size: .8125rem; }
@media (max-width: 559px) { .objetivo-tarea { grid-template-columns: minmax(0, 1fr) auto; } .objetivo-tarea > .alerta, .objetivo-tarea > label { display: none; } }
@media (hover: hover) {
    .objetivo-tarea .quitar-tarea { opacity: 0; transition: opacity var(--t-rapido); }
    .objetivo-tarea:hover .quitar-tarea, .objetivo-tarea .quitar-tarea:focus-visible { opacity: 1; }
}
.campo-mini { width: auto; min-height: 0; padding: .2rem 1.6rem .2rem .5rem; font-size: .75rem; }
.anadir-tarea { position: relative; padding: .75rem 1rem; }
.anadir-tarea .buscador > .campo { border-radius: var(--r-s); background: transparent; }
.anadir-tarea .buscador > .campo:hover { background: var(--fondo-deep); box-shadow: none; }
.anadir-tarea .buscador > .campo:focus { background: var(--fondo-alt); }
.sugerencias {
    position: absolute; left: 1rem; right: 1rem; top: calc(100% - .5rem); z-index: 40; max-height: 20rem; overflow-y: auto; padding: .3rem;
    border-radius: var(--r-m); background: var(--fondo-alt); box-shadow: var(--sombra-flotante); animation: aparecer-menu var(--t) var(--curva);
}
.sugerencia { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--r-s); font-size: .8125rem; cursor: pointer; }
.sugerencia.activa { background: var(--acento-suave); }
.propiedades-objetivo { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
.propiedades-objetivo .pestanas { display: flex; }
.propiedades-objetivo .pestana { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .4rem; font-size: .75rem; }
@media (min-width: 1024px) { .propiedades-objetivo { position: sticky; top: 0; } }

/* ---------------------------------------------------------------- ficha de tarea: lateral
   Compacto y fijo: cabe en la altura y acompaña al bajar por la actividad. */
.ficha-tarea { display: flex; flex-direction: column; font-size: .8125rem; }
@media (min-width: 1024px) {
    .ficha-tarea { position: sticky; top: 1rem; max-height: calc(100dvh - 2 * var(--lamina-margen) - 2rem); overflow-y: auto; scrollbar-width: thin; }
}
.ficha-tarea-seccion { padding: .75rem 1.1rem; border-top: 1px solid var(--linea); }
.ficha-tarea-seccion:first-child { border-top: 0; }
.ficha-tarea-pie { margin-top: auto; padding: .6rem 1.1rem; border-top: 1px solid var(--linea); background: var(--fondo-deep); font-size: .6875rem; color: var(--texto-tenue); }

/* Avance: pendiente → en progreso → en revisión → completada, con el siguiente paso debajo. */
.ficha-tarea-flujo { display: flex; flex-direction: column; gap: .85rem; padding: 1rem 1.1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--acento-suave) 55%, var(--fondo-alt)), var(--fondo-alt)); }
.flujo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flujo-paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .6875rem; line-height: 1.2; color: var(--texto-tenue); text-align: center; }
.flujo-paso + .flujo-paso::before { content: ""; position: absolute; top: .5625rem; right: calc(50% + .6rem); width: calc(100% - 1.2rem); height: 2px; border-radius: 2px; background: var(--linea-fuerte); }
.flujo-paso.hecho::before, .flujo-paso.actual::before { background: var(--marca) !important; }
.flujo-punto { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--fondo-alt); box-shadow: inset 0 0 0 2px var(--linea-fuerte); color: #FFFFFF; }
.flujo-punto .icono { width: .75rem; height: .75rem; stroke-width: 2.6; }
.flujo-paso.hecho { color: var(--texto-suave); }
.flujo-paso.hecho .flujo-punto { background: var(--marca); box-shadow: none; }
.flujo-paso.actual { color: var(--texto); font-weight: 600; }
.flujo-paso.actual .flujo-punto { box-shadow: inset 0 0 0 5px var(--acento), 0 0 0 4px var(--foco); }
.flujo-acciones { display: flex; gap: .5rem; }
.flujo-acciones:empty { display: none; }
.flujo-acciones > .btn { flex: 1 1 0; }

/* Propiedad: nombre a la izquierda y valor a la derecha, en una sola línea. */
.propiedad { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; column-gap: .5rem; min-height: 2.375rem; }
.propiedad > label.propiedad-nombre, .propiedad-nombre { flex: none; width: 5.25rem; margin: 0 !important; font-size: .75rem; font-weight: 500; color: var(--texto-suave); }
.propiedad-cambiada > label.propiedad-nombre::after { content: " ·"; color: var(--ambar); font-weight: 700; }
.persona { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 2rem; }
.persona-editable { flex: 1 1 auto; margin-left: -.4rem; padding: 0 .4rem; border: 0; border-radius: var(--r-s); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t-rapido); }
.persona-editable:hover { background: var(--fondo-deep); }
.persona-editable:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
.persona-lapiz { margin-left: auto; width: .9rem; height: .9rem; color: var(--texto-tenue); opacity: 0; transition: opacity var(--t-rapido); }
.persona-editable:hover .persona-lapiz, .persona-editable:focus-visible .persona-lapiz { opacity: 1; }
@media (hover: none) { .persona-lapiz { opacity: 1; } }
.avatar-mini { width: 1.5rem; height: 1.5rem; font-size: .625rem; }
.adjunto-fila { display: flex; align-items: center; gap: .5rem; padding: .3rem .25rem .3rem .5rem; border-radius: var(--r-s); background: var(--fondo-deep); font-size: .75rem; }

/* ---------------------------------------------------------------- tareas: bandejas
   Una bandeja por pregunta (qué hago, qué espero, qué pedí…). En escritorio, columna a la izquierda;
   en móvil, una fila que se desliza. */
.tareas { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .tareas { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: start; } }
.bandejas { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.bandejas::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .bandejas { flex-direction: column; overflow: visible; position: sticky; top: 0; } }
.bandejas-rotulo { display: none; padding: .9rem .7rem .3rem; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }
.bandejas-rotulo:first-child { padding-top: 0; }
@media (min-width: 1024px) { .bandejas-rotulo { display: block; } }
.bandeja {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 2.125rem; padding: .35rem .7rem; border: 0; border-radius: var(--r-s); background: transparent;
    font: inherit; font-size: .8125rem; font-weight: 500; color: var(--texto-suave); text-align: left; white-space: nowrap; cursor: pointer;
    transition: background-color var(--t-rapido), color var(--t-rapido);
}
.bandeja:hover { background: var(--fondo-deep); color: var(--texto); }
.bandeja:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
.bandeja.activa { background: var(--acento-suave); color: var(--acento-hover); font-weight: 600; }
.bandeja-cuenta { min-width: 1.375rem; padding: 0 .4rem; border-radius: 999px; font-family: var(--fuente-mono); font-size: .6875rem; line-height: 1.25rem; text-align: center; background: var(--fondo-hundido); color: var(--texto-suave); }
.bandeja.activa .bandeja-cuenta { background: var(--acento); color: #fff; }
.bandeja-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; min-height: 2rem; }
.pestanas-peq { padding: .2rem; }
.pestanas-peq .pestana { min-height: 1.625rem; padding: .2rem .75rem; font-size: .75rem; }

/* Mi papel en la tarea. */
.papeles { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.papel { display: inline-flex; align-items: center; padding: .05rem .45rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.papel-responsable { background: var(--azul-fondo); color: var(--azul-texto); }
.papel-trabaje { background: var(--verde-fondo); color: var(--verde-texto); }
.papel-solicitante { background: var(--morada-fondo); color: var(--morada-texto); }
.papel-copia { background: var(--fondo-hundido); color: var(--texto-suave); }

/* ---------------------------------------------------------------- mis avisos */
.avisos { max-width: 44rem; overflow: hidden; }
.aviso-opcion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--linea); cursor: pointer; transition: background-color var(--t-rapido); }
.aviso-opcion:last-child { border-bottom: 0; }
.aviso-opcion:hover { background: var(--fondo-deep); }
.aviso-opcion b { display: block; font-size: .875rem; font-weight: 600; }
.aviso-opcion > span > span { display: block; margin-top: .1rem; font-size: .75rem; color: var(--texto-suave); }



/* ---------------------------------------------------------------- pieles del nuget (fuera de capa) */
/* Interruptor de «Mis avisos»: fuera de capa porque el reset de Tailwind a los checkbox le ganaba. */
.interruptor {
    appearance: none; flex: none; position: relative; width: 2.25rem; height: 1.3rem; margin: 0; border-radius: 999px;
    background: var(--linea-fuerte); cursor: pointer; transition: background-color var(--t) var(--curva);
}
.interruptor::after {
    content: ""; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(11, 46, 51, .25); transition: transform var(--t) var(--curva-muelle);
}
.interruptor:checked { background: var(--acento); }
.interruptor:checked::after { transform: translateX(.95rem); }
.interruptor:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
/* El texto del comentario, alineado con su cabecera: sin el relleno que Quill da al editor. */
.comentario .ql-editor { padding: 0; }
/* El selector múltiple del nuget, a la altura de los demás campos del lateral de tarea. */
.propiedad .min-h-\[44px\] { min-height: 2rem; padding-block: .2rem; }
/* El InputGeneric del nuget, con la forma de .campo. */
.lamina-contenido input.border, #modal-container input.border,
.lamina-contenido textarea.border, #modal-container textarea.border,
.lamina-contenido .cursor-pointer.border:has(> span, > div), #modal-container .cursor-pointer.border:has(> span, > div) {
    border-color: var(--linea) !important; border-radius: var(--r-s) !important; background-color: var(--campo-fondo);
    transition: border-color var(--t-rapido), box-shadow var(--t-rapido), background-color var(--t-rapido);
}
.lamina-contenido input.border:focus, #modal-container input.border:focus,
.lamina-contenido textarea.border:focus, #modal-container textarea.border:focus {
    outline: none; border-color: var(--acento) !important; background-color: var(--fondo-alt); box-shadow: 0 0 0 3px var(--foco) !important;
}
/* Su rótulo, igual que .etiqueta-campo: así todos los campos de una ficha se leen igual. */
.lamina-contenido label.text-sm.text-gray-700, #modal-container label.text-sm.text-gray-700 {
    font-size: .75rem; line-height: 1.25; font-weight: 500; color: var(--texto-suave);
}
.lamina-contenido label.text-sm.text-gray-700.block, #modal-container label.text-sm.text-gray-700.block { margin-bottom: .35rem; }
.dropdown-menu-active {
    border: 0 !important; border-radius: var(--r-m) !important; background: var(--fondo-alt) !important;
    box-shadow: var(--sombra-flotante) !important; overflow: hidden; animation: aparecer-menu var(--t) var(--curva);
}


/* El Grid del nuget: caja de la casa, cabecera sin mayúsculas, filas sin cebra y la barra en neutros. */
div:has(> .grid-toolbar) {
    border: 1px solid var(--linea) !important; border-radius: var(--r-l) !important; box-shadow: none !important; background: var(--fondo-alt);
}
div:has(> .grid-toolbar) > div:has(> table) { border: 0 !important; }
.grid-toolbar {
    --panel-accent-bg: var(--acento-suave) !important; --panel-accent-color: var(--acento-hover) !important;
    --panel-accent-border: color-mix(in srgb, var(--acento) 25%, transparent) !important;
    --panel-badge-bg: var(--accion) !important; --panel-badge-color: #FFFFFF !important; --panel-text: var(--texto) !important;
    background: var(--fondo-alt) !important; border-bottom: 1px solid var(--linea) !important;
}
.grid-toolbar-btn {
    border: 0 !important; border-radius: 999px !important; background: var(--fondo-hundido) !important; color: var(--texto) !important;
    font-family: var(--fuente) !important; font-weight: 500 !important; box-shadow: none !important;
}
.grid-toolbar-btn:hover { background: color-mix(in srgb, var(--texto) 11%, var(--fondo-hundido)) !important; }
.grid-toolbar-btn-active { background: var(--acento-suave) !important; color: var(--acento-hover) !important; }
.grid-filter-panel, .grid-group-panel { border-color: var(--linea) !important; border-radius: var(--r-m) !important; background: var(--fondo-deep) !important; }
.grid-filter-panel-label, .grid-group-panel-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .75rem !important; }
div:has(> .grid-toolbar) table { color: var(--texto) !important; font-size: .8125rem; }
div:has(> .grid-toolbar) thead {
    text-transform: none !important; letter-spacing: 0; font-size: .75rem !important; font-weight: 600;
    color: var(--texto-suave) !important; background: var(--fondo-deep) !important;
}
div:has(> .grid-toolbar) thead th { border-bottom: 1px solid var(--linea); }
div:has(> .grid-toolbar) tbody tr { background: transparent !important; border-color: var(--linea) !important; transition: background-color var(--t-rapido); }
div:has(> .grid-toolbar) tbody tr:hover { background: var(--fondo-deep) !important; }
div:has(> .grid-toolbar) tbody td { padding-top: .6rem !important; padding-bottom: .6rem !important; }
div:has(> .grid-toolbar) > div:last-child:not(:has(table)) { border-top: 1px solid var(--linea); background: var(--fondo-alt) !important; color: var(--texto-suave); }
/* La fila abre su ficha; los botones de la fila solo asoman al pasar por encima. */
.acciones-fila { display: flex; justify-content: flex-end; gap: .15rem; }
@media (hover: hover) {
    tr .acciones-fila { opacity: 0; transition: opacity var(--t-rapido); }
    tr:hover .acciones-fila, tr:focus-within .acciones-fila { opacity: 1; }
}

/* ---------------------------------------------------------------- el modal del nuget */
#modal-container { z-index: 1100 !important; }
#modal-container .bg-gray-500 { background: rgba(6, 26, 30, .42) !important; backdrop-filter: blur(3px); animation: velo-entra var(--t) var(--curva); }
#modal-container .bg-white.inline-block {
    width: auto; max-width: min(93vw, 52rem);
    border-radius: 22px !important; background: var(--fondo-alt) !important; color: var(--texto);
    box-shadow: var(--sombra-alta) !important; animation: dialogo-entra var(--t-lento) var(--curva);
}
#modal-container .bg-white.inline-block:has(.modal-ancho) { max-width: 93vw; }
#modal-container .bg-white.inline-block > .w-full:first-child { padding: 1.5rem 1.25rem .5rem 1.75rem; }
#modal-container .bg-white.inline-block > .w-full:first-child h2 { font-size: 1.375rem; letter-spacing: -.02em; color: var(--texto); }
#modal-container .bg-white.inline-block > .w-full:first-child .bg-slate-800 { display: none; } /* el icono del nuget sale vacío */
#modal-container .bg-white.inline-block > .w-full:first-child > button {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
    background: var(--fondo-hundido); color: var(--texto) !important; transition: background-color var(--t-rapido);
}
#modal-container .bg-white.inline-block > .w-full:first-child > button:hover { background: color-mix(in srgb, var(--texto) 11%, var(--fondo-hundido)); }
#modal-container .bg-white.inline-block > .w-full:first-child > button svg { width: 1rem; height: 1rem; }
#modal-container .bg-white.inline-block > .bg-white { background: transparent !important; margin: .25rem 1.75rem 1rem; }
#modal-container .bg-white.inline-block > .bg-gray-50 { background: var(--fondo-alt) !important; border-top: 1px solid var(--linea); padding: 1rem 1.75rem 1.25rem !important; gap: .6rem !important; }
#modal-container .text-slate-500, #modal-container .text-gray-500 { color: var(--texto-suave) !important; }

/* ---------------------------------------------------------------- scroll */
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- movimiento */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer-menu { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.entra { animation: subir var(--t-lento) var(--curva) both; }

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

/* ---------------------------------------------------------------- el armazón
   Barra de áreas a la izquierda sobre el papel y la lámina blanca con la pantalla.
   El scroll ocurre dentro de la lámina, nunca en el navegador. */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--fondo); }

.rail {
    width: var(--rail-ancho); flex: none; height: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem 0;
}
.rail-marca {
    display: flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3rem; margin-bottom: 1rem; border-radius: var(--r-m);
    transition: transform var(--t) var(--curva-muelle);
}
.rail-marca:hover { transform: scale(1.06) rotate(-2deg); }
.rail-marca:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }
.rail-marca img { width: 2.75rem; height: auto; }

.rail-areas { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.rail-pie { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; }

.rail-area {
    width: 4.75rem; padding: .35rem 0; display: flex; flex-direction: column; align-items: center; gap: .3rem;
    text-decoration: none; color: var(--texto-suave); border-radius: var(--r-m);
}
.rail-area:focus-visible { outline: none; }
.rail-area:focus-visible .rail-chip { box-shadow: 0 0 0 3px var(--foco); }
.rail-chip {
    position: relative; width: 3rem; height: 2.375rem; border-radius: var(--r-m);
    display: flex; align-items: center; justify-content: center; color: var(--texto);
    transition: background-color var(--t) var(--curva), box-shadow var(--t) var(--curva), transform var(--t-rapido) var(--curva);
}
.rail-chip .icono { width: 1.5rem; height: 1.5rem; }
.rail-area:hover .rail-chip { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.rail-area:active .rail-chip { transform: scale(.94); }
.rail-area.activo .rail-chip {
    background: var(--fondo-elevado);
    box-shadow: 0 1px 2px rgba(11, 46, 51, .06), 0 4px 14px rgba(11, 46, 51, .09);
    --icono-tinte: color-mix(in srgb, var(--marca) 55%, transparent);
}
.rail-nombre { font-size: .6875rem; font-weight: 500; line-height: 1.1; text-align: center; transition: color var(--t); }
.rail-area.activo .rail-nombre { color: var(--texto); font-weight: 600; }

.usuario { position: relative; }
.usuario-avatar {
    width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--fondo-alt); color: var(--texto);
    font-family: var(--fuente-titulo); font-size: .875rem; font-weight: 600;
    box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3.5px var(--marca);
    transition: transform var(--t) var(--curva-muelle);
}
.usuario-avatar:hover { transform: scale(1.06); }
.usuario-avatar:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 5px var(--foco); }
.usuario-velo { position: fixed; inset: 0; z-index: 1290; }
.usuario-menu {
    position: absolute; left: calc(100% + .75rem); bottom: 0; z-index: 1300; width: 16rem;
    padding: .5rem; border-radius: var(--r-m); background: var(--fondo-alt); box-shadow: var(--sombra-flotante);
    transform-origin: bottom left; animation: aparecer-menu var(--t) var(--curva);
}
.usuario-quien { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem .7rem; border-bottom: 1px solid var(--linea); margin-bottom: .35rem; }
.usuario-quien b { font-weight: 600; }
.usuario-quien span { font-size: .75rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.usuario-opcion {
    width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: 0; border-radius: var(--r-s);
    background: transparent; font: inherit; font-size: .8125rem; color: var(--texto); text-align: left; cursor: pointer; text-decoration: none;
    transition: background-color var(--t-rapido);
}
.usuario-opcion:hover { background: var(--fondo-deep); }

.lamina {
    flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    margin: var(--lamina-margen) var(--lamina-margen) var(--lamina-margen) 0; border-radius: var(--r-l);
    background: var(--fondo-alt); box-shadow: var(--sombra);
}
main.lamina-contenido {
    flex: 1; min-height: 0; overflow: auto; position: relative;
    padding: 1.75rem 1.75rem 4rem;
}
/* Cada pantalla entra suave. backwards y no both: un transform residual descolocaría lo fixed de dentro. */
.pagina { display: contents; }
.pagina > * { animation: subir var(--t-lento) var(--curva) backwards; }

/* Móvil: la barra pasa abajo y la lámina ocupa todo. */
@media (max-width: 767px) {
    .app { flex-direction: column-reverse; }
    .rail {
        width: 100%; height: auto; flex-direction: row; justify-content: space-around; gap: 0;
        padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--fondo);
    }
    .rail-marca { display: none; }
    .rail-areas { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
    .rail-area { width: auto; flex: 1 1 0; min-width: 0; }
    .rail-chip { width: 2.75rem; height: 2rem; }
    .rail-chip .icono { width: 1.3rem; height: 1.3rem; }
    .rail-nombre { font-size: .625rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rail-pie { margin: 0 .25rem 0 .25rem; flex-direction: row; }
    .usuario-avatar { width: 2.25rem; height: 2.25rem; font-size: .8125rem; }
    .usuario-menu { left: auto; right: 0; bottom: calc(100% + .5rem); transform-origin: bottom right; }
    .lamina { margin: 0; border-radius: 0; box-shadow: none; }
    main.lamina-contenido { padding: 1.25rem 1rem 2rem; }
    .lamina-contenido h1 { font-size: 1.4rem; }
}
/* En un móvil estrecho, solo iconos: el nombre queda en el title y el aria. */
@media (max-width: 559px) {
    .rail-nombre { display: none; }
    .rail-area { padding: .25rem 0; }
}

/* ---------------------------------------------------------------- arranque, errores y reconexión */
.precarga { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: var(--fondo); }
.precarga img { width: 3.25rem; animation: latido 1.2s ease-in-out infinite; }
body:has(.app) .precarga, body:has(.acceso) .precarga { display: none; }

.fallo-pantalla { max-width: 32rem; margin: 3rem auto; }

#blazor-error-ui {
    display: none; position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1400;
    align-items: center; gap: .75rem; padding: .7rem .8rem .7rem 1.1rem; border-radius: 999px;
    background: var(--texto); color: #FFFFFF; font-size: .8125rem; box-shadow: var(--sombra-alta);
}
#blazor-error-ui .reload { color: var(--texto); background: #FFFFFF; padding: .35rem .85rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
#blazor-error-ui .dismiss { cursor: pointer; opacity: .7; padding: 0 .35rem; }

/* El aviso de reconexión de Blazor, con la forma de la casa y sin tapar la pantalla. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1400;
    align-items: center; gap: .75rem; padding: .7rem 1.1rem; border-radius: 999px;
    background: var(--texto); color: #FFFFFF; font-size: .8125rem; box-shadow: var(--sombra-alta);
}
#components-reconnect-modal .reconectando, #components-reconnect-modal .reconexion-fallida { display: none; align-items: center; gap: .75rem; }
#components-reconnect-modal.components-reconnect-show .reconectando { display: inline-flex; }
#components-reconnect-modal.components-reconnect-failed .reconexion-fallida,
#components-reconnect-modal.components-reconnect-rejected .reconexion-fallida { display: inline-flex; }
#components-reconnect-modal .girando { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid #FFFFFF; border-right-color: transparent; animation: girar .7s linear infinite; }
#components-reconnect-modal a { color: var(--texto); background: #FFFFFF; padding: .3rem .8rem; border-radius: 999px; font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------- acceso (login y activar cuenta) */
.acceso { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: var(--fondo); }
.acceso-caja { width: 100%; max-width: 24rem; padding: 2rem; border-radius: var(--r-l); background: var(--fondo-alt); box-shadow: var(--sombra); animation: subir var(--t-lento) var(--curva) both; }
.acceso-caja h1 { font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }