/* Matriz de Eisenhower — hoja unica.
   Sin framework: la app son cuatro listas y unos formularios, y meterle un
   framework encima pesaria mas que el problema que resuelve.

   Dos reglas gobiernan este fichero:

   1. La CSP de la app es `styleSrc: 'self'` SIN `unsafe-inline`. No hay ni un
      `style=` ni un `<style>` en ninguna plantilla, y no puede haberlo. Todo
      lo que dependa de un dato —el color de un area, el avance de la
      revision— tiene que salir de una clase fija o de un atributo del propio
      HTML (`<progress value max>`), nunca de un estilo generado.
   2. Nada de aqui hace falta para que la app funcione. Es un producto de
      formularios con POST y redireccion; esto lo hace usable, no posible.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. Tokens
   =========================================================================== */
:root {
  color-scheme: light dark;

  /* Superficies. Tres niveles y no mas: el lienzo, el panel que se levanta y
     el hueco que se hunde. El hundido es lo que hace legible la jerarquia
     entre cuadrantes sin necesidad de tamanos distintos. */
  --lienzo:      #f2f4f7;
  --panel:       #ffffff;
  --hundido:     #e7eaef;
  --panel-2:     #eef1f5;

  --linea:       #d5dae2;
  --linea-suave: #e4e8ee;

  --texto:       #14181e;
  --texto-2:     #4d5663;   /* 7.1:1 sobre --panel */
  --texto-3:     #656f7d;   /* 5.3:1 sobre --panel */

  --acento:         #2b5fd0;
  --acento-fuerte:  #1e4bb0;
  --acento-texto:   #ffffff;
  --acento-tenue:   #e6edfb;

  /* Los cuatro cuadrantes. No son decoracion: son la identidad de cada
     casilla y se repiten en la ficha, en el historico y en la revision. */
  --hacer:      #bc3a2f;
  --planificar: #1f7a4d;
  --delegar:    #91600e;
  --descartar:  #5c6470;

  --hacer-tenue:      #fdeceb;
  --planificar-tenue: #e7f5ed;
  --delegar-tenue:    #fbf1de;
  --descartar-tenue:  #eceef2;

  --peligro:       #b3261e;
  --peligro-tenue: #fdecea;
  --aviso:         #8a5a00;

  --radio:        14px;
  --radio-medio:  10px;
  --radio-chico:  7px;

  /* Sombras con desplazamiento y desenfoque: un halo sin offset es adorno. */
  --sombra-1: 0 1px 2px rgb(16 24 40 / 6%), 0 2px 6px -2px rgb(16 24 40 / 8%);
  --sombra-2: 0 2px 4px -1px rgb(16 24 40 / 6%), 0 14px 28px -12px rgb(16 24 40 / 18%);

  --tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --paso: 180ms cubic-bezier(.2, .7, .3, 1);

  /* Ancho util. La matriz quiere sitio; los listados de una columna, no. */
  --ancho-matriz: 1240px;
  --ancho-lectura: 780px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lienzo:      #101318;
    --panel:       #191d24;
    --hundido:     #14181e;
    --panel-2:     #222831;

    --linea:       #2f3742;
    --linea-suave: #262d36;

    --texto:       #e9edf2;
    --texto-2:     #a7b1bf;
    --texto-3:     #8d97a5;

    --acento:         #6fa4ff;
    --acento-fuerte:  #8fbaff;
    --acento-texto:   #0c1016;
    --acento-tenue:   #1b2740;

    --hacer:      #f5786c;
    --planificar: #4fc389;
    --delegar:    #e0a63a;
    --descartar:  #98a3b2;

    --hacer-tenue:      #2b1a1a;
    --planificar-tenue: #14261e;
    --delegar-tenue:    #2a2314;
    --descartar-tenue:  #1e232b;

    --peligro:       #f07a70;
    --peligro-tenue: #2c1a19;
    --aviso:         #e0b25f;

    --sombra-1: 0 1px 2px rgb(0 0 0 / 45%), 0 2px 6px -2px rgb(0 0 0 / 40%);
    --sombra-2: 0 2px 4px -1px rgb(0 0 0 / 45%), 0 14px 28px -12px rgb(0 0 0 / 60%);
  }
}

/* ---------------------------------------------------------------------------
   La paleta de areas: ocho clases fijas, una por color.

   Aqui esta la solucion al problema que dejo la migracion 002 sin resolver. El
   color del area vive en la base como `#rrggbb`, y pasarlo al HTML pedia un
   `style=` que la CSP no admite. Se cierra la paleta a ocho colores, cada uno
   con su clase, y `src/lib/paleta.js` traduce de hexadecimal a clase.
   --------------------------------------------------------------------------- */
.area-verde     { --area: #2f8f5b; --area-tenue: #e6f3ec; }
.area-azul      { --area: #2f6fd0; --area-tenue: #e7eefb; }
.area-cian      { --area: #12808f; --area-tenue: #e0f2f4; }
.area-violeta   { --area: #7c5cd6; --area-tenue: #eee9fb; }
.area-rosa      { --area: #c2467f; --area-tenue: #fbe8f1; }
.area-ambar     { --area: #b57515; --area-tenue: #fbf0dd; }
.area-terracota { --area: #b4532f; --area-tenue: #fbeae4; }
.area-gris      { --area: #6b7280; --area-tenue: #eceef2; }

@media (prefers-color-scheme: dark) {
  .area-verde     { --area: #52c98d; --area-tenue: #16281f; }
  .area-azul      { --area: #6ea5ff; --area-tenue: #172236; }
  .area-cian      { --area: #45c2d1; --area-tenue: #12262a; }
  .area-violeta   { --area: #a892f0; --area-tenue: #201c33; }
  .area-rosa      { --area: #ef7fb2; --area-tenue: #2c1723; }
  .area-ambar     { --area: #e0a63a; --area-tenue: #2a2114; }
  .area-terracota { --area: #e08461; --area-tenue: #2b1a14; }
  .area-gris      { --area: #97a1af; --area-tenue: #20252d; }
}

/* ===========================================================================
   2. Base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--texto);
  font-family: var(--tipo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.2; }
/* `balance` en los titulos cortos; en el h1 no, porque muchos son el titulo de
   una tarea escrito por el usuario y balance los partia en tres lineas cortas
   y desiguales. `pretty` solo evita la palabra huerfana del final. */
h2, h3 { text-wrap: balance; }
h1 { font-size: 1.55rem; letter-spacing: -.015em; margin: 0 0 .35rem; font-weight: 680; text-wrap: pretty; }
h2 { font-size: 1.1rem;  letter-spacing: -.008em; margin: 2rem 0 .5rem; font-weight: 640; }
h3 { font-size: .95rem;  margin: 1.25rem 0 .35rem; font-weight: 640; }

p { margin: 0 0 .75rem; }

a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-fuerte); }

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

/* Primer salto de teclado del documento. Solo visible al tabular. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: var(--acento-texto);
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radio-chico) 0;
  font-weight: 600;
  z-index: 40;
}
.saltar:focus { left: 0; }

/* Presente en el arbol de accesibilidad, invisible en pantalla. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main {
  max-width: var(--ancho-matriz);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* Los iconos son SVG dibujados, un solo grosor de trazo en toda la app. */
.icono {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ===========================================================================
   3. Barra superior y navegacion
   =========================================================================== */
.barra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .7rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 680;
  letter-spacing: -.01em;
  color: var(--texto);
  text-decoration: none;
}

/* Cuatro cuadritos: la matriz, en miniatura. */
.marca-icono {
  width: 19px; height: 19px;
  border-radius: 5px;
  background:
    linear-gradient(var(--hacer), var(--hacer)) 0 0 / 47% 47% no-repeat,
    linear-gradient(var(--planificar), var(--planificar)) 100% 0 / 47% 47% no-repeat,
    linear-gradient(var(--delegar), var(--delegar)) 0 100% / 47% 47% no-repeat,
    linear-gradient(var(--descartar), var(--descartar)) 100% 100% / 47% 47% no-repeat;
}

.barra-nav { display: flex; gap: .15rem; margin-left: auto; }

.barra-nav a {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: var(--radio-chico);
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 560;
  font-size: .92rem;
  transition: background var(--paso), color var(--paso);
}
.barra-nav a:hover { color: var(--texto); background: var(--panel-2); }
.barra-nav a[aria-current="page"] {
  color: var(--acento);
  background: var(--acento-tenue);
}
.barra-nav .icono { opacity: .85; }

.barra-salir { margin: 0; }

/* La navegacion inferior solo existe en movil: ver la seccion 12. */
.nav-movil { display: none; }

/* ===========================================================================
   4. Botones y campos
   =========================================================================== */
.boton, .boton-mini, .boton-texto, .boton-icono {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  transition: background var(--paso), color var(--paso), border-color var(--paso);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  min-height: 40px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 620;
  text-decoration: none;
}
.boton:hover { background: var(--acento-fuerte); color: var(--acento-texto); }

.boton-secundario {
  background: var(--panel);
  color: var(--texto);
  border-color: var(--linea);
}
.boton-secundario:hover { background: var(--panel-2); color: var(--texto); }

.boton-peligro { background: var(--peligro); color: #fff; }
.boton-peligro:hover { background: var(--peligro); filter: brightness(1.1); color: #fff; }

.boton-mini {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  min-height: 32px;
  font-size: .82rem;
  font-weight: 560;
  background: var(--panel);
  color: var(--texto-2);
  border-color: var(--linea);
  text-decoration: none;
}
.boton-mini:hover { background: var(--panel-2); color: var(--texto); }
.boton-mini[disabled] { opacity: .35; cursor: default; }
.boton-mini[disabled]:hover { background: var(--panel); color: var(--texto-2); }

.boton-mini.boton-peligro {
  background: transparent;
  color: var(--peligro);
  border-color: transparent;
}
.boton-mini.boton-peligro:hover { background: var(--peligro-tenue); filter: none; }

/* La accion que el bloque recomienda. Una por bloque, nunca dos. */
.boton-mini.boton-sugerido {
  background: var(--acento-tenue);
  border-color: transparent;
  color: var(--acento);
  font-weight: 640;
}
.boton-mini.boton-sugerido:hover { background: var(--acento); color: var(--acento-texto); }

/* Cuando la accion recomendada es borrar —el bloque de Descartar—, se destaca
   en rojo y no en azul: el color tiene que seguir diciendo lo que hace. */
.boton-mini.boton-peligro.boton-sugerido {
  background: var(--peligro);
  color: #fff;
  border-color: transparent;
}
.boton-mini.boton-peligro.boton-sugerido:hover { filter: brightness(1.1); color: #fff; }

.boton-texto {
  background: none;
  padding: .4rem .6rem;
  min-height: 36px;
  color: var(--texto-3);
  font-size: .9rem;
}
.boton-texto:hover { color: var(--texto); background: var(--panel-2); }

/* Boton de solo icono: la diana sigue siendo de 32 px aunque el dibujo sea
   de 14. En el movil sube a 40 (seccion 12). */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: transparent;
  color: var(--texto-3);
  border-color: transparent;
}
.boton-icono:hover { background: var(--panel-2); color: var(--texto); }
.boton-icono[disabled] { opacity: .28; cursor: default; }
.boton-icono[disabled]:hover { background: transparent; color: var(--texto-3); }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], textarea, select {
  font: inherit;
  color: var(--texto);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: .5rem .65rem;
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  transition: border-color var(--paso), box-shadow var(--paso);
}
input:hover, textarea:hover, select:hover { border-color: var(--texto-3); }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
textarea { resize: vertical; min-height: 4rem; }

label { font-size: .84rem; color: var(--texto-2); font-weight: 580; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ===========================================================================
   5. Avisos
   =========================================================================== */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .95rem;
  border-radius: var(--radio-medio);
  border: 1px solid var(--linea);
  background: var(--panel);
  box-shadow: var(--sombra-1);
  margin: 0 0 1.25rem;
  font-size: .92rem;
}
.aviso .icono { margin-top: .15rem; }
.aviso-error {
  border-color: var(--peligro);
  background: var(--peligro-tenue);
  color: var(--peligro);
}
.aviso-bueno { border-color: var(--planificar); background: var(--planificar-tenue); }
.aviso code {
  background: var(--panel-2);
  color: var(--texto);
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}

/* ===========================================================================
   6. Primer arranque: la matriz vacia explica el metodo
   =========================================================================== */
.arranque {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  padding: 1.75rem;
  margin: 0 0 1.5rem;
}
.arranque h1 { font-size: 1.4rem; }
.arranque-entrada {
  color: var(--texto-2);
  max-width: 62ch;
  margin: 0 0 1.25rem;
}

.arranque-pasos {
  list-style: none;
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem;
  margin: 0 0 1.25rem;
  padding: 0;
}
.arranque-pasos li {
  counter-increment: paso;
  background: var(--hundido);
  border-radius: var(--radio-medio);
  padding: .9rem 1rem;
  font-size: .92rem;
  color: var(--texto-2);
}
.arranque-pasos li::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.arranque-pasos strong { display: block; color: var(--texto); font-weight: 620; }

/* ===========================================================================
   7. La matriz
   =========================================================================== */
.filtro {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}
.filtro label { flex: 0 0 auto; }
.filtro select { width: auto; max-width: 15rem; min-height: 36px; }
.filtro .boton-mini { text-decoration: none; }

.matriz {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.6rem 1fr 1fr;
  grid-template-areas:
    ".  x  x"
    "y  a  b"
    "y  c  d";
  /* `stretch` y no `start`: las dos casillas de una fila miden lo mismo aunque
     una tenga cuatro tareas y la otra nueve. Con `start` quedaba un hueco
     debajo de la mas corta y la rejilla dejaba de leerse como una matriz. */
  align-items: stretch;
}

.eje {
  margin: 0;
  font-size: .7rem;
  font-weight: 640;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  display: flex;
}
.eje-x { grid-area: x; justify-content: space-around; }

/* El giro de 180 grados es lo que hace que el texto se lea de abajo arriba,
   como toca en un eje vertical. Pero gira la caja entera, y con ella el orden
   de las dos etiquetas: sin el row-reverse, "Importante" acababa al lado de
   la fila de No importante, etiquetando mal la matriz. */
.eje-y {
  grid-area: y;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex-direction: row-reverse;
  justify-content: space-around;
  height: 100%;
}

.cuadrante:nth-of-type(1) { grid-area: a; }
.cuadrante:nth-of-type(2) { grid-area: b; }
.cuadrante:nth-of-type(3) { grid-area: c; }
.cuadrante:nth-of-type(4) { grid-area: d; }

.cuadrante {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  padding: 1.1rem 1.1rem .9rem;
  border: 1px solid var(--linea);
}

/*  LA JERARQUIA ENTRE CUADRANTES.

    Los cuatro no valen lo mismo y la pantalla lo dice sin que haya que
    leerla. Hacer y Planificar —los dos importantes— van elevados sobre el
    lienzo, con sombra, titulo grande y una barra de color arriba. Delegar y
    Descartar van HUNDIDOS: fondo mas oscuro que el lienzo, sin sombra, titulo
    mas pequeno. La fila de abajo se lee como lo que es, trabajo del que hay
    que salir.

    El rango sale de `src/lib/cuadrantes.js`, no de aqui: es metodo, no estilo. */
.cuadrante-primario {
  background: var(--panel);
  box-shadow: var(--sombra-2);
  border-top: 3px solid var(--color-cuadrante, var(--linea));
  padding-top: calc(1.1rem - 2px);
}
.cuadrante-secundario {
  background: var(--hundido);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgb(16 24 40 / 5%);
}
.cuadrante-secundario .cuadrante-titulo { font-size: .98rem; }
.cuadrante-secundario .tarea-titulo { font-weight: 520; }

@media (prefers-color-scheme: dark) {
  .cuadrante-secundario { box-shadow: inset 0 1px 2px rgb(0 0 0 / 35%); }
}

.cuadrante-hacer      { --color-cuadrante: var(--hacer);      --tenue-cuadrante: var(--hacer-tenue); }
.cuadrante-planificar { --color-cuadrante: var(--planificar); --tenue-cuadrante: var(--planificar-tenue); }
.cuadrante-delegar    { --color-cuadrante: var(--delegar);    --tenue-cuadrante: var(--delegar-tenue); }
.cuadrante-descartar  { --color-cuadrante: var(--descartar);  --tenue-cuadrante: var(--descartar-tenue); }

/* Las tres piezas van colocadas a mano. Dejarlas al reparto automatico
   mandaba la cuenta a una tercera fila, estirada de lado a lado: parecia una
   barra de progreso en vez de un numero. */
.cuadrante-cabecera {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: .6rem;
  margin-bottom: .85rem;
}
.cuadrante-titulo {
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 680;
  letter-spacing: -.012em;
  color: var(--color-cuadrante);
}
.cuadrante-cabecera .lema {
  grid-column: 1 / -1; grid-row: 2;
  margin: .1rem 0 0;
  font-size: .8rem;
  color: var(--texto-3);
}
.cuenta {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 640;
  color: var(--color-cuadrante);
  background: var(--tenue-cuadrante);
  border-radius: 999px;
  padding: .15rem .55rem;
  min-width: 1.75rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Tareas
   --------------------------------------------------------------------------- */
.tareas { list-style: none; margin: 0 0 .5rem; padding: 0; }

.tarea {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .35rem;
  margin: 0 -.35rem;
  border-radius: var(--radio-chico);
  border-bottom: 1px solid var(--linea-suave);
  transition: background var(--paso);
}
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: var(--tenue-cuadrante, var(--panel-2)); }
.tarea:focus-within { background: var(--tenue-cuadrante, var(--panel-2)); }

.tarea-marcar { margin: 0; flex: 0 0 auto; }

/* La casilla ensena su marca al pasar por encima: dice que hace antes de
   pulsarla, que es lo unico que se le pide a un control destructivo-por-error. */
.casilla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-top: .1rem;
  border: 2px solid var(--linea);
  border-radius: 7px;
  background: var(--panel);
  cursor: pointer;
  color: var(--planificar);
  padding: 0;
  transition: border-color var(--paso), background var(--paso);
}
.casilla .icono { width: 13px; height: 13px; stroke-width: 3; opacity: 0; transition: opacity var(--paso); }
.casilla:hover { border-color: var(--planificar); }
.casilla:hover .icono { opacity: .55; }
.casilla-marcada { border-color: var(--planificar); background: var(--planificar-tenue); }
.casilla-marcada .icono { opacity: 1; }

/* Base 0 y no `auto`: con `auto` la base es el ancho del texto, y en movil un
   titulo largo hacia saltar de linea al bloque entero, dejando la casilla
   sola arriba y el titulo debajo. Con base 0 encoge y se queda al lado. */
.tarea-cuerpo { flex: 1 1 0; min-width: 0; }

.tarea-titulo {
  color: var(--texto);
  text-decoration: none;
  font-weight: 580;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.tarea-titulo:hover { color: var(--texto); text-decoration: underline; }

.tarea-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  margin: .3rem 0 0;
  font-size: .78rem;
  color: var(--texto-3);
}
.tarea-vencida .vence { color: var(--peligro); font-weight: 640; }

/* Las acciones de la fila: reordenar y mover. Van juntas, calladas, y solo
   toman color al pasar por encima o al enfocarlas con el teclado. La
   alternativa —esconderlas tras un desplegable— cuesta un clic en la accion
   central del metodo, y sin JavaScript no se puede hacer mejor. */
.tarea-acciones {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex: 0 0 auto;
}
.tarea-acciones form { margin: 0; display: flex; gap: .1rem; align-items: center; }

.tarea-mover select {
  width: auto;
  min-width: 7rem;
  min-height: 30px;
  font-size: .8rem;
  padding: .2rem 1.35rem .2rem .45rem;
  color: var(--texto-2);
  background: transparent;
  border-color: transparent;
}
/* Los controles solo se dibujan cuando la fila esta bajo el cursor o bajo el
   foco. Siempre estan ahi —se puede tabular hasta ellos y funcionan sin
   JavaScript—, pero en reposo no compiten con el titulo, que es lo que se lee. */
.tarea:hover .tarea-mover select,
.tarea:focus-within .tarea-mover select,
.fila:hover .tarea-mover select,
.fila:focus-within .tarea-mover select { border-color: var(--linea); background: var(--panel); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .05rem .5rem .05rem .4rem;
  background: var(--area-tenue, var(--panel-2));
  color: var(--texto-2);
  font-weight: 560;
  font-size: .75rem;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--area, var(--texto-3));
}

.etiqueta { color: var(--color-cuadrante, var(--texto-3)); font-weight: 640; }

.tareas-hechas .tarea-titulo { color: var(--texto-3); text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   El cuadrante vacio: la mejor ocasion para ensenar el metodo
   --------------------------------------------------------------------------- */
.vacio-cuadrante {
  border: 1px dashed var(--linea);
  border-radius: var(--radio-medio);
  padding: .95rem 1rem;
  margin: 0 0 .5rem;
  background: var(--tenue-cuadrante);
}
.vacio-cuadrante p { margin: 0; font-size: .85rem; color: var(--texto-2); }
.vacio-cuadrante .que { font-weight: 580; color: var(--texto); margin-bottom: .3rem; }
.vacio-cuadrante .ejemplo { color: var(--texto-3); font-size: .8rem; }

/* Descartar vacio no es un hueco: es la unica casilla que se quiere vacia. */
.cuadrante-descartar .vacio-cuadrante { border-style: solid; }

/* Pegado al fondo de la casilla: con las filas estiradas, el consejo hace de
   pie de la tarjeta y las cuatro casillas terminan a la misma altura. */
.consejo {
  margin: auto 0 0;
  padding-top: .8rem;
  border-top: 1px dashed var(--linea);
  font-size: .8rem;
  color: var(--texto-3);
}

/* ---------------------------------------------------------------------------
   Anadir
   --------------------------------------------------------------------------- */
.anadir { margin-top: .35rem; }
.anadir summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 560;
  color: var(--texto-2);
  padding: .35rem .6rem .35rem .4rem;
  border-radius: var(--radio-chico);
  min-height: 32px;
  transition: background var(--paso), color var(--paso);
}
.anadir summary::-webkit-details-marker { display: none; }
.anadir summary:hover { color: var(--texto); background: var(--panel-2); }
.anadir summary .icono { width: 1em; height: 1em; }
.anadir[open] summary { color: var(--texto); font-weight: 620; }
.anadir[open] summary .icono { transform: rotate(45deg); }

.form-tarea { display: grid; gap: .5rem; padding: .6rem 0 .25rem; }
.form-fila { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.form-fila label { flex: 0 0 auto; }
.form-fila input[type="date"] { width: auto; flex: 1 1 9rem; }
.form-fila .boton { margin-left: auto; }

.resumen {
  color: var(--texto-2);
  font-size: .88rem;
  margin-top: 1.5rem;
}

/* ===========================================================================
   8. Revision semanal
   =========================================================================== */
.revision-cabecera { margin-bottom: 1.5rem; }

.medidor {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: .85rem 0 .25rem;
}

/* El avance sale de `<progress value max>`: son ATRIBUTOS, no estilos, y por
   eso es la unica forma de pintar una barra dependiente del dato sin romper
   la CSP. Una barra de <div> necesitaria `style="width:%"`. */
.medidor progress {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.medidor progress::-webkit-progress-bar { background: var(--panel-2); border-radius: 999px; }
.medidor progress::-webkit-progress-value { background: var(--acento); border-radius: 999px; }
.medidor progress::-moz-progress-bar { background: var(--acento); border-radius: 999px; }
.medidor-cifra {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  font-weight: 620;
  color: var(--texto-2);
  flex: 0 0 auto;
}

.bloque {
  margin-top: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.bloque-cabecera {
  padding: .95rem 1.1rem;
  background: var(--hundido);
  border-bottom: 1px solid var(--linea);
}
.bloque-cabecera h2 {
  margin: 0;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.bloque-cabecera .cuenta { background: var(--panel-2); color: var(--texto-2); }
.bloque-cabecera .pista { margin: .3rem 0 0; }

/* La decision que el bloque recomienda, dicha en voz alta. */
.bloque-decision {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--acento);
  background: var(--acento-tenue);
  border-radius: 999px;
  padding: .2rem .65rem;
}

.pista { margin: .3rem 0; font-size: .83rem; color: var(--texto-2); }

.fichas { list-style: none; margin: 0; padding: 0; }

.fila {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linea-suave);
  transition: background var(--paso);
}
.fila:last-child { border-bottom: 0; }
.fila:hover, .fila:focus-within { background: var(--panel-2); }
.fila-cuerpo { flex: 1 1 16rem; min-width: 0; }
/* Envuelve a proposito: la fila de un area lleva nombre, ocho muestras de
   color y el boton de guardar, y en un movil eso no cabe en una linea. Sin
   `wrap` el nombre se aplastaba a 30 px y "Guardar" se salia de la tarjeta. */
.fila-form { margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; flex: 1 1 16rem; }
.fila-form input[type="text"] { flex: 1 1 8rem; }
.fila-dato { margin: 0; font-size: .8rem; color: var(--texto-3); flex: 0 0 auto; }
.fila-borrar { margin: 0; flex: 0 0 auto; }
.fila-apagada .tarea-titulo { color: var(--texto-3); }

.revision-acciones {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.revision-acciones form { margin: 0; display: flex; gap: .3rem; align-items: center; }
.revision-acciones select { width: auto; min-width: 8.5rem; min-height: 32px; font-size: .82rem; padding: .25rem .5rem; }

/* El motivo por el que la tarea esta en la revision, delante del titulo. */
.motivo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: .05rem .35rem;
}
.motivo-vencida { color: var(--peligro); background: var(--peligro-tenue); }
.motivo-parada  { color: var(--aviso); background: var(--delegar-tenue); }
.motivo-sobra   { color: var(--descartar); background: var(--descartar-tenue); }

/* ===========================================================================
   9. Estados vacios de pantalla completa
   =========================================================================== */
.nada {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.nada-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--texto-3);
}
.nada-icono .icono { width: 1.5rem; height: 1.5rem; }
.nada h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.nada p { color: var(--texto-2); max-width: 48ch; margin: 0 auto .5rem; font-size: .92rem; }
.nada .boton { margin-top: .85rem; }

/* ===========================================================================
   10. Ficha, listados, historico, entrar
   =========================================================================== */
.ficha, .historico, .entrar, .listado {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.75rem;
  box-shadow: var(--sombra-2);
}
.listado { max-width: 900px; }

/* La revision maneja sus propias tarjetas: el contenedor no lleva caja. */
.pantalla-revision {
  max-width: 900px;
  margin: 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.ficha h1 { margin-bottom: 1.5rem; }
.migas { margin: 0 0 1rem; font-size: .86rem; }
.migas a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--texto-2); }
.migas a:hover { color: var(--acento); text-decoration: underline; }

.ficha-cuadrante {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-cuadrante, var(--texto-2));
  background: var(--tenue-cuadrante, var(--panel-2));
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .85rem;
  font-weight: 620;
  margin: 0 0 1.25rem;
}
.punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.ficha-datos {
  display: grid;
  gap: 0;
  margin: 0 0 1.5rem;
  font-size: .88rem;
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-medio);
  overflow: hidden;
}
.ficha-datos > div {
  display: flex;
  gap: .75rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--linea-suave);
}
.ficha-datos > div:last-child { border-bottom: 0; }
.ficha-datos > div:nth-child(odd) { background: var(--hundido); }
.ficha-datos dt { color: var(--texto-3); min-width: 9.5rem; flex: 0 0 auto; }
.ficha-datos dd { margin: 0; color: var(--texto); }
.ficha-datos .vence { color: var(--peligro); font-weight: 620; }

.form-ficha { max-width: 100%; }
.form-ficha .boton { justify-self: start; margin-top: .6rem; }

.form-mover-ficha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.form-mover-ficha select { flex: 1 1 14rem; }

.ficha-acciones {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}
.ficha-acciones form { margin: 0; }

.vaciar { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }

/* ---------------------------------------------------------------------------
   Las muestras de color de area: la paleta cerrada, en radios
   --------------------------------------------------------------------------- */
.muestras { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.muestras-titulo {
  flex: 1 0 100%;
  padding: 0;
  margin-bottom: .3rem;
  font-size: .84rem;
  font-weight: 580;
  color: var(--texto-2);
}

.muestra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--paso), transform var(--paso);
}
.muestra:hover { transform: scale(1.08); }
.muestra-punto {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--area);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}
.muestra:has(input:checked) { border-color: var(--texto-2); }
.muestra:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 1px; }
.muestra:has(input:checked) .muestra-punto { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%); }

/* ---------------------------------------------------------------------------
   Entrar
   --------------------------------------------------------------------------- */
.entrar { max-width: 26rem; margin-top: 3.5rem; }
.entrar-marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.entrar-marca .marca-icono { width: 40px; height: 40px; border-radius: 11px; }
.entrar h1 { font-size: 1.35rem; text-align: center; }
.entrar .error-codigo { text-align: center; }
.entrar-lema {
  color: var(--texto-2);
  font-size: .92rem;
  text-align: center;
  margin: 0 0 1.75rem;
}
.form-entrar { display: grid; gap: .45rem; }
.form-entrar .boton { margin-top: .85rem; justify-content: center; }

.pie {
  text-align: center;
  color: var(--texto-3);
  font-size: .78rem;
  padding: 1.25rem;
}

/* ===========================================================================
   11. Error
   =========================================================================== */
.error-codigo {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--texto-3);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   12. Movil
   =========================================================================== */
@media (max-width: 860px) {
  /* Los ejes son una ayuda de lectura de la rejilla 2x2: sin rejilla no
     dicen nada, y en una columna estorban. El nombre de cada cuadrante y su
     lema siguen ahi, que es lo que de verdad informa. */
  .eje { display: none; }

  .matriz {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d";
    gap: .85rem;
  }

  main { padding: 1.1rem .9rem 1rem; }
  .ficha, .historico, .entrar, .listado { padding: 1.25rem; }

  /* LA NAVEGACION EN MOVIL.

     Cinco enlaces mas "Salir" no caben en una barra superior de 390 px: hacian
     dos lineas, y de hecho "Reglas" y "Salir" se salian de la pantalla sin
     forma de alcanzarlos. Se bajan a una barra fija al pie, con icono y
     etiqueta, que es donde llega el pulgar. Arriba se queda la marca y el
     boton de salir, que no es navegacion.

     El DOM no cambia: la barra sigue siendo el mismo <nav> del <header>, asi
     que el orden de tabulacion y el landmark de navegacion siguen donde el
     lector de pantalla los espera. */
  .barra { padding: .6rem .9rem; }

  /* Con la navegacion sacada del flujo, quien empuja a la derecha es Salir. */
  .barra-salir { margin-left: auto; }

  .barra-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -2px 4px -1px rgb(16 24 40 / 6%), 0 -12px 24px -12px rgb(16 24 40 / 14%);
  }
  .barra-nav a {
    flex-direction: column;
    gap: .15rem;
    padding: .4rem .15rem;
    min-height: 52px;
    justify-content: center;
    font-size: .68rem;
    font-weight: 580;
    letter-spacing: -.01em;
    border-radius: var(--radio-chico);
  }
  .barra-nav .icono { width: 1.35rem; height: 1.35rem; }
  .barra-nav a[aria-current="page"] { background: none; color: var(--acento); }
  .barra-nav a[aria-current="page"] .icono { opacity: 1; }

  /* Hueco para que la barra fija no tape el final de la pagina. */
  body { padding-bottom: 4.75rem; }
  .pie { padding-bottom: .5rem; }

  /* Las dianas suben a 40 px: 32 en el pulgar no se aciertan. */
  .boton-icono { width: 40px; height: 40px; }
  .boton-mini { min-height: 38px; padding: .45rem .7rem; }

  /* La fila de tarea pasa a dos lineas: texto arriba, acciones abajo a la
     derecha. Los controles dejan de competir con el titulo por el ancho. */
  .tarea { flex-wrap: wrap; padding: .7rem .35rem; }
  .tarea-acciones {
    width: 100%;
    justify-content: flex-end;
    padding-left: 1.85rem;
    margin-top: .1rem;
  }
  .tarea-mover { flex: 1 1 auto; }
  .tarea-mover select { flex: 1 1 auto; width: 100%; min-height: 38px; border-color: var(--linea); background: var(--panel); }

  .fila { padding: .85rem .9rem; }

  /* Cada pieza de la fila de un area ocupa su propia linea. */
  .fila-form input[type="text"] { flex: 1 1 100%; }
  .fila-form .muestras { flex: 1 1 100%; justify-content: space-between; }
  .fila-form > .boton-mini { margin-left: auto; }
  .revision-acciones { width: 100%; }
  .revision-acciones .tarea-mover { flex: 1 1 auto; }
  .revision-acciones select { flex: 1 1 auto; width: 100%; }

  .bloque-cabecera { padding: .85rem .9rem; }

  .ficha-datos dt { min-width: 7.5rem; }
}

/* Movil estrecho de verdad: las etiquetas de la barra inferior se aprietan. */
@media (max-width: 400px) {
  .barra-nav a { font-size: .64rem; }
  .arranque { padding: 1.25rem; }
}

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