/* ===========================================================
   notatext — estilos
   Metáfora: papel (claro) / tinta (oscuro). Tipografía monoespaciada
   porque esto es texto plano, sin adornos.
   =========================================================== */

:root {
  /* --- Modo papel (claro), por defecto --- */
  --color-fondo: #faf7f0;
  --color-texto: #2b2825;
  --color-texto-tenue: #8a8378;
  --color-borde: #e3ddd0;
  --color-acento: #c77d3f;
  --color-acento-texto: #faf7f0;
  --color-peligro: #b5503b;
  --color-superficie: #f1ece1;

  --fuente: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SFMono-Regular',
            Menlo, Consolas, monospace;

  --radio: 4px;
  --transicion: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* --- Modo tinta (oscuro) --- */
:root[data-tema="tinta"] {
  --color-fondo: #1a1b1e;
  --color-texto: #e8e6e1;
  --color-texto-tenue: #76746e;
  --color-borde: #33343a;
  --color-acento: #d99a63;
  --color-acento-texto: #1a1b1e;
  --color-peligro: #d97a68;
  --color-superficie: #222327;
}

/* Respeta la preferencia del sistema si el usuario no ha elegido nada aún */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="papel"]) {
    --color-fondo: #1a1b1e;
    --color-texto: #e8e6e1;
    --color-texto-tenue: #76746e;
    --color-borde: #33343a;
    --color-acento: #d99a63;
    --color-acento-texto: #1a1b1e;
    --color-peligro: #d97a68;
    --color-superficie: #222327;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* altura real visible cuando esté disponible */
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  transition: var(--transicion);
}

main {
  flex: 1;
  display: flex;
}

#editor {
  flex: 1;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: 1.05rem;
  line-height: 1.7;
  padding: 2.5rem clamp(1.25rem, 8vw, 16rem);
  caret-color: var(--color-acento);
}

#editor::placeholder {
  color: var(--color-texto-tenue);
}

#editor::selection {
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
}

/* --- Barra inferior ---
   "sticky" en vez de depender de que el body mida exactamente la
   pantalla: así la barra se queda anclada abajo del viewport visible
   mientras el usuario escribe, sin recortar el área del editor ni
   pelearse con la altura variable de la barra del navegador móvil. */
#barra {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--color-borde);
  background-color: var(--color-superficie);
  font-size: 0.78rem;
  transition: var(--transicion);
}

.grupo-izq,
.grupo-der {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

#contador {
  color: var(--color-texto-tenue);
  white-space: nowrap;
}

.estado {
  color: var(--color-acento);
  min-width: 5.5rem;
}

/* --- Botones --- */
.boton {
  font-family: var(--fuente);
  font-size: 0.78rem;
  color: var(--color-texto-tenue);
  background: transparent;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: var(--transicion);
}

.boton:hover {
  color: var(--color-texto);
  border-color: var(--color-texto-tenue);
}

.boton:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 1px;
}

.boton-peligro:hover {
  color: var(--color-peligro);
  border-color: var(--color-peligro);
}

#btn-tema {
  font-variant: small-caps;
}

/* --- Diálogo de confirmación --- */
.dialogo-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

.dialogo-overlay[hidden] {
  display: none;
}

.dialogo-caja {
  background-color: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  max-width: 26rem;
  width: 100%;
}

.dialogo-titulo {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.dialogo-texto {
  margin: 0 0 1.25rem;
  color: var(--color-texto-tenue);
  font-size: 0.85rem;
  line-height: 1.5;
}

.dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  #editor {
    padding: 1.5rem 1.25rem;
    font-size: 1rem;
  }

  #barra {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .estado {
    min-width: 0;
  }
}

/* --- Accesibilidad: respeta "reducir movimiento" --- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}