/*
 * Hoja de estilos del tablero.
 *
 * Criterios:
 *  - Colores consistentes por estado y prioridad, declarados una sola vez como variables.
 *  - El color NUNCA es la única señal: cada estado lleva ícono + etiqueta de texto.
 *  - Diseño adaptable: una columna en el celular, dos en pantallas medianas y más.
 *  - Modo oscuro automático según la preferencia del sistema.
 *  - Objetivos táctiles de al menos 44 px de alto para uso rápido desde el celular.
 */

:root {
  /* Paleta semántica (requisito del proyecto) */
  --rojo: #dc2626; /* vencidas o urgentes */
  --naranja: #ea580c; /* próximas a vencer o prioridad alta */
  --amarillo: #b45309; /* avances parciales */
  --verde: #15803d; /* completadas */
  --azul: #1d4ed8; /* acciones principales */
  --gris: #6b7280; /* pendientes */

  --fondo: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #f9fafb;
  --borde: #e2e5ea;
  --texto: #111827;
  --texto-suave: #4b5563;

  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --sombra-alta: 0 10px 30px rgba(16, 24, 40, 0.18);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1115;
    --superficie: #171a21;
    --superficie-2: #1e222b;
    --borde: #2a2f3a;
    --texto: #f3f4f6;
    --texto-suave: #b6bcc8;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.6);
    --rojo: #f87171;
    --naranja: #fb923c;
    --amarillo: #fbbf24;
    --verde: #4ade80;
    --azul: #60a5fa;
    --gris: #9ca3af;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

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

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 12px 96px;
}

/* ------------------------------- Encabezado ------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin: -12px -12px 12px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

.barra h1 {
  font-size: 1.05rem;
  margin: 0 8px 0 0;
  white-space: nowrap;
}

.barra .fecha {
  color: var(--texto-suave);
  font-size: 0.85rem;
  margin-right: auto;
}

.barra nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.barra nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-size: 0.9rem;
  min-height: 40px;
}

.barra nav a[aria-current="page"] {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

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

button,
.boton {
  cursor: pointer;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  padding: 9px 13px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter 0.12s ease, background 0.12s ease;
}

button:hover:not(:disabled),
.boton:hover {
  filter: brightness(0.97);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button.principal,
.boton.principal {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  font-weight: 600;
}

button.completar {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
  font-weight: 600;
}

button.avance {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: #fff;
  font-weight: 600;
}

button.peligro {
  color: var(--rojo);
  border-color: var(--rojo);
  background: transparent;
}

button.chico {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 0.85rem;
}

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

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 42px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
}

textarea {
  min-height: 76px;
  resize: vertical;
}

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

.campo {
  margin-bottom: 10px;
}

.fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.fila > * {
  flex: 1 1 150px;
}

/* --------------------------- Alta rápida de tarea -------------------------- */

.alta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
}

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

.alta .fila-principal input[type="text"] {
  flex: 2 1 260px;
}

.alta .fila-principal select {
  flex: 0 1 150px;
}

.alta .fila-principal button {
  flex: 0 0 auto;
}

.alta .mas {
  margin-top: 10px;
  border-top: 1px dashed var(--borde);
  padding-top: 10px;
}

/* -------------------------------- Filtros -------------------------------- */

.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.filtros .campo {
  margin: 0;
  flex: 1 1 140px;
}

.filtros .campo.busqueda {
  flex: 2 1 220px;
}

/* --------------------------------- Grupos -------------------------------- */

.grupos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .grupos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .grupos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grupo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.grupo > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  font-weight: 700;
  font-size: 0.95rem;
}

.grupo .cuenta {
  margin-left: auto;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Franja de color por grupo (además del ícono y el texto) */
.grupo.vencidas > header {
  border-left: 6px solid var(--rojo);
}
.grupo.hoy > header {
  border-left: 6px solid var(--naranja);
}
.grupo.curso > header {
  border-left: 6px solid var(--amarillo);
}
.grupo.pendientes > header {
  border-left: 6px solid var(--gris);
}
.grupo.completadas > header {
  border-left: 6px solid var(--verde);
}

.grupo .lista {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 62vh;
  overflow-y: auto;
}

.grupo .vacio {
  color: var(--texto-suave);
  font-size: 0.88rem;
  padding: 6px 2px;
}

/* --------------------------------- Tarjeta ------------------------------- */

.tarjeta {
  border: 1px solid var(--borde);
  border-left-width: 6px;
  border-radius: var(--radio-chico);
  padding: 10px;
  background: var(--superficie-2);
}

.tarjeta.vencida {
  border-left-color: var(--rojo);
}
.tarjeta.hoy {
  border-left-color: var(--naranja);
}
.tarjeta.parcial {
  border-left-color: var(--amarillo);
}
.tarjeta.completada {
  border-left-color: var(--verde);
}
.tarjeta.pendiente {
  border-left-color: var(--gris);
}
.tarjeta.en_curso {
  border-left-color: var(--azul);
}

.tarjeta h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.3;
}

.tarjeta .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-bottom: 8px;
}

.tarjeta .descripcion {
  font-size: 0.88rem;
  color: var(--texto-suave);
  margin: 0 0 8px;
  white-space: pre-wrap;
}

.tarjeta .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tarjeta.completada h3 {
  text-decoration: line-through;
  color: var(--texto-suave);
}

/* Etiquetas de estado y prioridad: siempre con texto, nunca solo color */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.etiqueta.vencida {
  background: color-mix(in srgb, var(--rojo) 16%, transparent);
  color: var(--rojo);
  border-color: color-mix(in srgb, var(--rojo) 40%, transparent);
}
.etiqueta.hoy,
.etiqueta.alta {
  background: color-mix(in srgb, var(--naranja) 16%, transparent);
  color: var(--naranja);
  border-color: color-mix(in srgb, var(--naranja) 40%, transparent);
}
.etiqueta.parcial {
  background: color-mix(in srgb, var(--amarillo) 18%, transparent);
  color: var(--amarillo);
  border-color: color-mix(in srgb, var(--amarillo) 40%, transparent);
}
.etiqueta.completada {
  background: color-mix(in srgb, var(--verde) 16%, transparent);
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 40%, transparent);
}
.etiqueta.pendiente,
.etiqueta.normal,
.etiqueta.neutra {
  background: var(--superficie);
  color: var(--texto-suave);
  border-color: var(--borde);
}
.etiqueta.en_curso {
  background: color-mix(in srgb, var(--azul) 14%, transparent);
  color: var(--azul);
  border-color: color-mix(in srgb, var(--azul) 35%, transparent);
}
.etiqueta.baja {
  background: var(--superficie);
  color: var(--texto-suave);
  border-color: var(--borde);
}

/* --------------------------- Leyenda y estadísticas ---------------------- */

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin: 0 0 12px;
}

.resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.resumen .dato {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 6px 12px;
  font-size: 0.85rem;
}

.resumen .dato b {
  font-size: 1rem;
}

/* ------------------------- Detalle de tarea / historial ------------------ */

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  box-shadow: var(--sombra);
  margin-bottom: 14px;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.historial {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--borde);
}

.historial li {
  position: relative;
  padding: 0 0 12px 14px;
  font-size: 0.9rem;
}

.historial li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gris);
}

.historial li.tipo-avance::before {
  background: var(--amarillo);
}
.historial li.tipo-completada::before {
  background: var(--verde);
}
.historial li.tipo-asignada::before,
.historial li.tipo-reasignada::before {
  background: var(--azul);
}
.historial li.tipo-reabierta::before {
  background: var(--rojo);
}

.historial .cuando {
  display: block;
  color: var(--texto-suave);
  font-size: 0.78rem;
}

/* ------------------------------ Modal / login ---------------------------- */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
  z-index: 50;
}

.modal .caja {
  background: var(--superficie);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  padding: 16px;
  width: 100%;
  max-width: 620px;
}

.modal .caja h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.modal .caja .pie {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.login {
  max-width: 400px;
  margin: 8vh auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}

.login h1 {
  margin: 0 0 4px;
  font-size: 1.3rem;
}

.login p.ayuda {
  color: var(--texto-suave);
  font-size: 0.88rem;
  margin: 0 0 16px;
}

/* --------------------------------- Avisos -------------------------------- */

.avisos {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  max-width: min(92vw, 520px);
}

.aviso {
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-alta);
  background: var(--superficie);
  border-left: 6px solid var(--azul);
  font-size: 0.9rem;
}

.aviso.ok {
  border-left-color: var(--verde);
}
.aviso.error {
  border-left-color: var(--rojo);
}
.aviso.aviso-suave {
  border-left-color: var(--naranja);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--borde);
}

.tabla code {
  font-size: 0.85em;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

pre {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 10px;
  overflow-x: auto;
  font-size: 0.82rem;
}

.sutil {
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.oculto {
  display: none !important;
}

@media (max-width: 560px) {
  .barra h1 {
    font-size: 1rem;
  }
  .grupo .lista {
    max-height: none;
  }
}