/* Agenda — hoja de estilo del rediseño. Reemplaza estilo.css entero. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --papel: oklch(0.965 0.03 95);
  --tarjeta: oklch(0.995 0.014 95);
  --campo: oklch(0.98 0.022 95);
  --tinta: oklch(0.26 0.05 288);
  --tinta-suave: oklch(0.55 0.05 288);
  --linea: oklch(0.9 0.035 90);
  --linea-lista: oklch(0.915 0.028 90);
  --acento: oklch(0.63 0.19 33);
  --acento-osc: oklch(0.55 0.2 33);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box }

body {
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 6rem;
  max-width: 44rem;
  background: var(--papel);
  color: var(--tinta);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

input, select, button { font: inherit; color: inherit }
button { cursor: pointer }

/* ── entrada ─────────────────────────────────────────────────────────── */
#pantallaEntrar {
  max-width: 24rem; margin: 8vh auto 0;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 6px; padding: 3rem 2.5rem 2.75rem;
  box-shadow: 0 1px 2px oklch(0.3 0.09 285 / .08);
}
#pantallaEntrar h1 {
  margin: 0 0 1.75rem; font-size: 2.125rem; font-weight: 500; letter-spacing: -.02em;
}
#pantallaEntrar h1::before {
  content: ""; display: block; width: 26px; height: 3px;
  background: var(--acento); margin-bottom: .875rem;
}
#formEntrar { display: flex; flex-direction: column; gap: .75rem }
#clave {
  width: 100%; padding: .75rem .875rem; letter-spacing: .1em;
  border: 1px solid oklch(0.87 0.04 90); border-radius: 4px;
  background: var(--campo); outline: none;
}
#clave:focus { border-color: var(--acento); background: var(--tarjeta) }
#formEntrar button {
  margin-top: .5rem; padding: .8rem 1rem; border: none; border-radius: 4px;
  background: oklch(0.38 0.15 288); color: var(--papel); font-weight: 500;
  transition: background .15s;
}
#formEntrar button:hover { background: var(--acento) }

/* ── nueva tarea ─────────────────────────────────────────────────────── */
#formNueva {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .875rem;
  box-shadow: 0 1px 2px oklch(0.3 0.09 285 / .08);
}
#texto {
  width: 100%; padding: .375rem 0; font-size: 1.1875rem;
  border: none; border-bottom: 1px solid var(--linea); background: transparent; outline: none;
}
#texto:focus { border-bottom-color: var(--acento) }
#formNueva > *:not(#texto):not(button) { }
#area, #vence {
  padding: .5rem .75rem; font-size: .875rem; color: oklch(0.45 0.06 288);
  border: 1px solid oklch(0.88 0.04 90); border-radius: 4px;
  background: var(--campo); outline: none;
}
#area:focus, #vence:focus { border-color: var(--acento) }
#formNueva button[type="submit"] {
  padding: .5625rem 1.375rem; border: none; border-radius: 4px;
  background: var(--acento); color: oklch(0.985 0.02 95);
  font-weight: 500; font-size: .875rem; transition: background .15s;
}
#formNueva button[type="submit"]:hover { background: var(--acento-osc) }
#formNueva .fila { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap }
#formNueva .fila button[type="submit"] { margin-left: auto }

/* ── filtros y contador ──────────────────────────────────────────────── */
#filtros {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin: 2.125rem 0 0; padding-bottom: .625rem; border-bottom: 1px solid var(--linea);
}
#filtros button {
  padding: 0 0 .5rem; margin-bottom: -.6875rem; border: none; background: none;
  font-size: .9375rem; color: var(--tinta-suave); border-bottom: 2px solid transparent;
}
#filtros button:hover { color: var(--tinta) }
#filtros [data-activo="true"] {
  color: var(--tinta); font-weight: 500; border-bottom-color: var(--acento);
}
#contador, #resumenCuando, #errorEntrar {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave);
}
#contador { margin: .875rem 0 0 }
#errorEntrar { text-transform: none; letter-spacing: 0; color: var(--acento); min-height: 1rem }

/* ── lista ───────────────────────────────────────────────────────────── */
#lista { margin-top: 1.25rem }
.tarea {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem .25rem; border-top: 1px solid var(--linea-lista);
}
.tarea .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4375rem }
.tarea [data-campo="texto"] { font-size: 1.0625rem; line-height: 1.35 }
.tarea .meta {
  display: flex; gap: .625rem; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em;
}
.tarea [data-campo="marcar"] {
  margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--acento); cursor: pointer;
}
.tarea [data-campo="prioridad"] {
  padding: 2px 6px; border-radius: 3px; font-weight: 500;
  background: oklch(0.38 0.15 288); color: var(--papel);
}
.tarea[data-prioridad="1"] [data-campo="prioridad"] { background: var(--acento) }
.tarea [data-campo="area"] {
  padding: 2px 6px; border: 1px solid oklch(0.88 0.04 90); border-radius: 3px;
  color: oklch(0.5 0.06 288);
}
.tarea [data-campo="vence"] { color: var(--tinta-suave) }
.tarea [data-campo="notas"] {
  font-family: "DM Sans", sans-serif; font-size: .8125rem; font-style: italic;
  letter-spacing: 0; color: oklch(0.6 0.06 288);
}
.tarea [data-campo="borrar"] {
  border: none; background: none; color: oklch(0.72 0.05 288);
  font-size: .9375rem; line-height: 1; padding: .25rem .375rem;
}
.tarea [data-campo="borrar"]:hover { color: oklch(0.55 0.21 25) }

.tarea[data-hecha="true"] { opacity: .5 }
.tarea[data-hecha="true"] [data-campo="texto"] { text-decoration: line-through }
.tarea[data-vencida="true"] [data-campo="vence"] { color: var(--acento); font-weight: 500 }

/* ── resumen ─────────────────────────────────────────────────────────── */
#pantallaApp h2 {
  margin: 3rem 0 0; font-size: .9375rem; font-weight: 500; letter-spacing: .02em;
}
#resumenCuando { margin: .375rem 0 1rem }
#resumen {
  font-family: var(--mono); font-size: .8125rem; line-height: 1.85;
  white-space: pre-wrap; color: oklch(0.4 0.06 288);
  background: var(--tarjeta); border: 1px solid var(--linea); border-left: 2px solid var(--acento);
  border-radius: 0 6px 6px 0; padding: 1.25rem 1.5rem;
}
.vacio {
  font-family: var(--mono); font-size: .8125rem; color: var(--tinta-suave);
  padding: 1.5rem .25rem; border-top: 1px solid var(--linea-lista); margin: 0;
}