/* Cocina: pantalla pequena, prisa, manos mojadas y a veces poca luz.
   De ahi las tres decisiones de todo esto: contraste alto, nada por debajo de
   48px de alto en lo que se pulsa, y el estado de una tarea legible sin leer
   -por el color de la barra lateral- antes de acercarse a mirar. */

:root {
  --tinta: #14213d;
  --papel: #f7f7f5;
  --caja: #ffffff;
  --raya: #e3e3de;
  --suave: #6b7280;
  --azul: #1d3557;
  --vencida: #c1121f;
  --pronto: #e07a00;
  --hecha: #2a9d4a;
  --radio: 14px;
  /* El aviso lleva sus propios colores y no --tinta. Con --tinta quedaba
     blanco sobre casi blanco en modo oscuro, porque alli --tinta es el color
     claro: el fondo se invertia y el texto no. */
  --aviso-fondo: #14213d;
  --aviso-texto: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--papel);
  -webkit-tap-highlight-color: transparent;
}

.pantalla { max-width: 620px; margin: 0 auto; padding: 16px 16px 92px; }
[hidden] { display: none !important; }

/* --- Porteria --- */
.marca { font-size: 30px; margin: 32px 0 2px; letter-spacing: -.5px; }
.marca-pequena { font-weight: 700; display: block; font-size: 13px; color: var(--suave); }
.sub, .ayuda { color: var(--suave); margin: 0 0 24px; }
.ayuda { font-size: 14px; margin: -8px 0 14px; }
.titulillo { font-weight: 600; margin: 24px 0 10px; }
.rotulo {
  display: block; margin: 18px 0 6px;
  font-size: 13px; font-weight: 600; color: var(--suave);
}
.rotulo .campo { margin-top: 6px; font-weight: 400; color: var(--tinta); }

.nombres { display: grid; gap: 10px; }
.nombre {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px; font-size: 18px; font-weight: 600; text-align: left;
  background: var(--caja); border: 1px solid var(--raya);
  border-radius: var(--radio); cursor: pointer; color: inherit;
}
.nombre .marca-nueva { font-size: 12px; font-weight: 600; color: var(--pronto); }

.puntos { display: flex; gap: 12px; justify-content: center; margin: 22px 0; height: 18px; }
.punto { width: 16px; height: 16px; border-radius: 50%; background: var(--raya); }
.punto.lleno { background: var(--azul); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tecla {
  height: 62px; font-size: 24px; font-weight: 600;
  background: var(--caja); border: 1px solid var(--raya);
  border-radius: var(--radio); cursor: pointer; color: inherit;
}
.tecla:active { background: #ececea; }
.tecla.ok { background: var(--azul); color: #fff; border-color: var(--azul); }
.tecla.flojo { color: var(--suave); }

/* En el movil ocupa el ancho entero, que es para lo que esta pensado. En una
   pantalla grande un teclado de 600px de ancho queda absurdo, y ademas obliga a
   recorrer mucha distancia con el raton entre tecla y tecla. */
.teclado { max-width: 340px; margin: 0 auto; }

/* El ✓ apagado mientras el PIN esta corto: impedir el error es mejor que
   avisar despues de que se cometa. */
.tecla.ok[disabled] {
  background: var(--raya); color: var(--suave); border-color: var(--raya);
  cursor: default;
}

/* --- Cabecera --- */
.cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 18px;
}
.saludo { font-size: 20px; font-weight: 700; }
.enlace {
  background: none; border: 0; color: var(--suave);
  font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer;
  padding: 8px;
}

/* --- Tareas --- */
.tarea {
  display: flex; align-items: stretch; gap: 12px; margin-bottom: 10px;
  background: var(--caja); border: 1px solid var(--raya);
  border-radius: var(--radio); overflow: hidden;
}
/* La barra de la izquierda: de un vistazo, sin leer nada. */
.barra { width: 7px; flex: none; background: var(--hecha); }
.tarea.vencida .barra { background: var(--vencida); }
.tarea.pronto  .barra { background: var(--pronto); }

.cuerpo { flex: 1; padding: 14px 0 14px 2px; min-width: 0; }
.tarea h3 { margin: 0 0 3px; font-size: 17px; }
.meta { font-size: 13px; color: var(--suave); }
.meta .cuando { font-weight: 600; }
.tarea.vencida .meta .cuando { color: var(--vencida); }

/* "Te toca a ti" es lo unico que se resalta de verdad: es el mensaje que
   convierte una lista de cosas pendientes en algo que alguien va a hacer. */
.tuya {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  font-size: 12px; font-weight: 700; border-radius: 999px;
  background: var(--azul); color: #fff;
}
.deotro { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--suave); }

.hecho {
  flex: none; width: 74px; border: 0; border-left: 1px solid var(--raya);
  background: transparent; font-size: 26px; color: var(--hecha);
  cursor: pointer;
}
.hecho:active { background: #eaf6ee; }

.anadir {
  width: 100%; padding: 16px; margin-top: 6px;
  background: none; border: 2px dashed var(--raya); border-radius: var(--radio);
  color: var(--suave); font: inherit; font-weight: 600; cursor: pointer;
}

/* --- Compra --- */
.fila-anadir { display: flex; gap: 8px; margin-bottom: 16px; }
.campo {
  width: 100%; padding: 14px; font: inherit;
  border: 1px solid var(--raya); border-radius: var(--radio);
  background: var(--caja); color: inherit;
}
.boton {
  padding: 14px 18px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--azul); color: #fff; border: 0; border-radius: var(--radio);
  flex: none;
}
.boton.flojo { background: var(--raya); color: var(--tinta); }
.boton.ancho { display: block; width: 100%; margin-top: 8px; }

.articulo {
  display: flex; align-items: center; gap: 12px; padding: 15px 14px;
  background: var(--caja); border: 1px solid var(--raya);
  border-radius: var(--radio); margin-bottom: 8px;
}
.articulo .texto { flex: 1; font-size: 17px; }
.articulo .quien { font-size: 12px; color: var(--suave); }
.comprar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--raya); background: transparent;
  font-size: 20px; color: var(--hecha); cursor: pointer;
}

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

/* --- Pestanas --- */
.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; background: var(--caja); border-top: 1px solid var(--raya);
  padding-bottom: env(safe-area-inset-bottom);
}
.pestana {
  flex: 1; padding: 16px; font: inherit; font-weight: 600;
  background: none; border: 0; color: var(--suave); cursor: pointer;
}
.pestana.activa { color: var(--azul); box-shadow: inset 0 3px 0 var(--azul); }
.globo {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px;
  font-size: 12px; border-radius: 999px; background: var(--vencida); color: #fff;
}

/* --- Dialogo --- */
dialog {
  border: 0; border-radius: var(--radio); padding: 22px;
  width: min(94vw, 420px); color: inherit;
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 16px; }
dialog label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
dialog label .campo { margin-top: 6px; font-weight: 400; }
.botones { display: flex; gap: 10px; justify-content: flex-end; }

/* --- Aviso --- */
.aviso {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--aviso-fondo); color: var(--aviso-texto); padding: 12px 20px;
  border-radius: 999px; font-size: 14px; z-index: 10;
  max-width: 90vw; text-align: center;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #f0f0ee; --papel: #16181c; --caja: #21242a;
    --raya: #343941; --suave: #9aa1ab; --azul: #5b8cc4;
    --aviso-fondo: #e8e8e4; --aviso-texto: #14213d;
  }
  .tecla:active { background: #2c3038; }
  .hecho:active { background: #1e2c22; }
}