/*
 * Gaur — estilos.
 *
 * Pensado para el móvil primero y para leerse de un vistazo: poco texto,
 * botones grandes, nada que parpadee ni se mueva sin motivo.
 *
 * Fondo claro y cálido — papel, no blanco. El blanco puro a las siete de la
 * mañana es agresivo, y esa era la razón de que antes fuera oscuro; sigue
 * valiendo aunque el fondo se haya aclarado.
 *
 * Al pasar de oscuro a claro los colores no cambiaron, se corrigieron: un
 * dorado que se lee sobre negro se pierde sobre papel. Si algún día se toca
 * alguno, hay que volver a comprobarlo contra --fondo, no a ojo.
 */

:root {
  --fondo:        #ffffff;
  --fondo-caja:   #ffffff;
  --fondo-alto:   #f1f1ef;  /* el gris de hover de Notion */
  --borde:        #e9e9e7;
  --texto:        #37352f;  /* el negro de Notion, que no es negro puro */
  --texto-suave:  #787774;

  /* No hay color de acento. Es la decisión que hace que esto se parezca a
     Notion: toda la interfaz es gris, negra y blanca, y el único color de la
     pantalla sale de las etiquetas de estado. Los botones principales van en
     negro, como el "Nuevo" de Notion. */
  --acento:       #37352f;
  --acento-texto: #ffffff;

  --alerta:       #c4554d;  /* el rojo de texto de Notion */
  --personal:     #9b9a97;

  /* Los enlaces a Notion van en negro y subrayados. Sin color propio: en una
     pantalla donde el color significa estado, un enlace de color mentiría. */
  --enlace:       #37352f;

  --radio: 4px;             /* Notion apenas redondea */
}

/* --- Etiquetas de estado -------------------------------------------------
 *
 * Los diez colores de Notion, con sus parejas de fondo y texto. El color de
 * cada estado NO está escrito aquí: se lee del esquema de la base en cada
 * carga (notion_colores_estado). Si Eli recolorea un estado en Notion, la app
 * lo sigue sin que nadie toque código.
 */

.tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
}

.tag-default { background: #e3e2e0; color: #37352f; }
.tag-gray    { background: #e3e2e0; color: #32302c; }
.tag-brown   { background: #eee0da; color: #442a1e; }
.tag-orange  { background: #fadec9; color: #49290e; }
.tag-yellow  { background: #fdecc8; color: #402c1b; }
.tag-green   { background: #dbeddb; color: #1c3829; }
.tag-blue    { background: #d3e5ef; color: #183347; }
.tag-purple  { background: #e8deee; color: #412454; }
.tag-pink    { background: #f5e0e9; color: #4c2337; }
.tag-red     { background: #ffe2dd; color: #5d1715; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  max-width: 34rem;
  margin-inline: auto;
  padding-top: env(safe-area-inset-top);
}

h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 1.3rem; letter-spacing: 0.02em; }

h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--texto-suave);
  margin-bottom: 0.6rem;
}

p { margin: 0 0 0.4rem; }

/* --- Cabecera ------------------------------------------------------- */

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 0 1rem;
}

.fecha { color: var(--texto-suave); font-size: 0.95rem; margin: 0; }

.interruptor { display: flex; gap: 0.35rem; }

.interruptor button {
  background: var(--fondo-caja);
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.interruptor button.activo {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
  font-weight: 600;
}

/* --- Pestañas ------------------------------------------------------- */

/* Cuatro pestañas caben justas en un móvil estrecho. El scroll horizontal es
   el seguro por si el texto crece: una pestaña cortada se ve y se busca; una
   pestaña que salta a una segunda línea descoloca la pantalla entera. */
.pestanas {
  display: flex;
  gap: 0.85rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  padding: 0.5rem 0;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pestana.activa { color: var(--texto); border-bottom-color: var(--acento); }

/* El número de cada pestaña. Es lo único que hace que Eli entre a Revisar,
   así que se ve aunque la pestaña no esté activa. */
.cuenta {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--fondo-alto);
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.pestana.activa .cuenta { background: var(--acento); color: var(--acento-texto); }

/* --- Secciones ------------------------------------------------------ */

section { margin-bottom: 1.8rem; }

.vacio, .aviso { color: var(--texto-suave); font-size: 0.95rem; }
.aviso { color: var(--alerta); }

.etiqueta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--texto-suave);
  margin-bottom: 0.15rem;
}

/* --- Agenda --------------------------------------------------------- */

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

.eventos li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borde);
}

.eventos .hora { color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.eventos .nombre { font-weight: 500; }

.eventos .calendario {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* Los calendarios personales ocupan tiempo pero no son trabajo. */
.eventos li.personal .nombre { color: var(--personal); font-weight: 400; font-style: italic; }
.eventos li.personal .calendario { color: var(--personal); opacity: 0.75; }

/* Pasar un evento a tareas. Va en la columna de la derecha y en pequeño: la
   agenda es para mirarla de un vistazo, no una lista de cosas que decidir. */
.a-tarea {
  grid-column: 2;
  justify-self: start;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.2rem 0.6rem;
  margin-top: 0.2rem;
  background: none;
}

.a-tarea:hover { background: var(--fondo-alto); color: var(--texto); }

/* Cuando ya es tarea, el botón se quita de en medio y deja ver la etiqueta. */
.a-tarea.con-estado { border-color: transparent; padding: 0.2rem 0; background: none; }
.a-tarea.con-estado:hover { background: none; }

/* --- Tareas --------------------------------------------------------- */

.empieza-por {
  background: var(--fondo-alto);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  padding: 1rem;
  margin-top: 1.2rem;
}

.empieza-por .titulo { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.8rem; }

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

.tarea {
  background: var(--fondo-caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.85rem;
  margin-bottom: 0.7rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tarea.yendose { opacity: 0; transform: translateX(1.5rem); }

.tarea .titulo { font-weight: 500; }

/* El título lleva a su página de Notion: negro y subrayado, como un enlace
   dentro de un documento de Notion. La raya va fina y gris para que se vea que
   es pulsable sin gritar. */
.titulo a {
  color: var(--enlace);
  text-decoration: underline;
  text-decoration-color: rgba(55, 53, 47, 0.35);
  text-underline-offset: 2px;
}

.titulo a:hover,
.titulo a:focus-visible { text-decoration-color: var(--enlace); }

/* La descripción de una oportunidad del radar: lo justo para decidir en cinco
   segundos sin abrir Notion. */
.que-es {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin: 0 0 0.7rem;
}

/* En el radar el color lo pone la etiqueta, no el botón. */
.tarea .botones button:has(.tag) { background: none; padding: 0.3rem; }
.tarea .botones button:has(.tag):hover { background: var(--fondo-alto); }

/* La línea que explica para qué sirve Revisar y Sin fecha. */
.explica {
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.resto a {
  color: var(--enlace);
  text-decoration: underline;
  text-decoration-color: rgba(55, 53, 47, 0.35);
  text-underline-offset: 2px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin-bottom: 0.7rem;
}

/* Lo vencido no es una etiqueta de Notion, es un aviso de la app: va en texto
   rojo y sin fondo, para que no se confunda con un estado de la base. */
.marca.vencida { color: var(--alerta); }
.proyecto { opacity: 0.8; }

.resto {
  color: var(--texto-suave);
  font-size: 0.9rem;
  text-align: center;
  padding-top: 0.4rem;
}

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

.botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* a.boton es para lo que sale de la app: abrir la tarea en Notion. Se ve igual
   que un botón porque hace lo mismo de cara a Eli — un toque, algo pasa. */
button, a.boton {
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--fondo-alto);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.62rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
}

a.boton {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

button:disabled { opacity: 0.45; }

button.principal {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
  font-weight: 600;
}

button.enlace {
  background: none;
  border: none;
  color: var(--texto-suave);
  text-decoration: underline;
  padding: 0.5rem 0;
  min-height: 0;
}

/* --- Bloque de trabajo y recuperación -------------------------------- */

.tarjeta {
  background: var(--fondo-caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1.4rem;
}

.tarjeta.recuperar { border-color: var(--acento); }
.tarjeta.recuperar .botones { margin-top: 0.7rem; }

.bloque-activo .titulo { font-size: 1.1rem; font-weight: 600; }
.bloque-activo .reloj { color: var(--acento); font-variant-numeric: tabular-nums; }

/* --- Captura rápida -------------------------------------------------- */

#captura { display: flex; gap: 0.5rem; }

input[type="text"], input[type="password"] {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  background: var(--fondo-caja);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  min-height: 44px;
}

input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

/* --- Modales -------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  /* El velo sigue siendo oscuro aunque el fondo sea claro: lo que tiene que
     quedar claro es que detrás no se puede tocar nada. */
  background: rgba(43, 37, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 20;
}

.modal[hidden] { display: none; }

.modal-caja {
  background: var(--fondo-caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.3rem;
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-texto { font-size: 1.05rem; margin: 0 0 0.4rem; }

/* Los ocho estados, en columna y a lo ancho. En una rejilla de dos se leen
   como pares que no significan nada juntos, y con el pulgar en el móvil una
   columna de botones grandes se recorre sin apuntar. */
.estados { display: flex; flex-direction: column; gap: 0.4rem; }

/* El botón es el marco; el color lo pone la etiqueta de dentro, que es la
   misma que se ve en Notion. */
.estados button {
  width: 100%;
  text-align: left;
  background: none;
  border-color: transparent;
  padding: 0.45rem 0.4rem;
  min-height: 40px;
}

.estados button:hover { background: var(--fondo-alto); }

/* El que ya tiene sale marcado y apagado: pulsarlo sería escribir en Notion
   para dejarlo todo igual. */
.estados button.actual {
  background: var(--fondo-alto);
  opacity: 1;
}

.estados button.actual::after {
  content: ' · ahora';
  font-size: 0.78rem;
  color: var(--texto-suave);
}

/* --- Chivato -------------------------------------------------------- */

.chivato {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  z-index: 30;
}

.chivato[hidden] { display: none; }

/* --- Pie y login ---------------------------------------------------- */

footer { padding-top: 1rem; border-top: 1px solid var(--borde); }
footer a { color: var(--texto-suave); font-size: 0.85rem; text-decoration: none; }

.pantalla-login { display: flex; align-items: center; min-height: 100vh; }

.login { width: 100%; }
.login h1 { margin-bottom: 1.5rem; }
.login form { display: flex; flex-direction: column; gap: 0.7rem; }
.login label { font-size: 0.85rem; color: var(--texto-suave); }
.login .error { color: var(--alerta); font-size: 0.9rem; }
.login .apunte { color: var(--texto-suave); font-size: 0.85rem; margin-top: 1.2rem; }

/* En modo ruta la pantalla se aligera: menos adornos, todo más grande. */
body[data-modo="ruta"] .agenda .calendario { display: none; }
body[data-modo="ruta"] .tarea .titulo { font-size: 1.08rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}