/* Lanzadera móvil — mismo sistema visual del panel de escritorio: superficies
   casi negras, morado solo donde algo es interactivo, tipografía de interfaz.
   Aquí todo se dimensiona para el pulgar: nada táctil por debajo de 44px. */

:root {
  --fondo: #1e1e1e;
  --fondo-hundido: #171717;
  --fondo-elevado: #262626;
  --fondo-hover: #2d2d2d;
  --borde: #333333;
  --borde-suave: #292929;

  --texto: #dadada;
  --texto-suave: #adadad;
  --texto-tenue: #6f6f6f;

  --acento: #7f6df2;
  --acento-vivo: #9a8cf5;
  --verde: #45b881;
  --ambar: #e0ac4d;
  --rojo: #e05252;

  --radio: 10px;
  --radio-chico: 6px;

  --fuente: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --fuente-lectura: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Code", "Menlo", monospace;

  --arriba: env(safe-area-inset-top, 0px);
  --abajo: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #ffffff;
    --fondo-hundido: #f6f6f6;
    --fondo-elevado: #fbfbfb;
    --fondo-hover: #ededed;
    --borde: #dcdcdc;
    --borde-suave: #e9e9e9;
    --texto: #1f1f1f;
    --texto-suave: #4b4b4b;
    --texto-tenue: #888888;
    --acento: #6a55e0;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overflow: hidden; /* cada pantalla maneja su propio scroll */
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px; /* nunca menos: iOS hace zoom al enfocar campos <16px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.pantalla {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
}

.pantalla[hidden] {
  display: none;
}

/* ---------- Pantalla de entrada ---------- */

.pantalla--entrada {
  justify-content: center;
  padding: calc(var(--arriba) + 24px) 24px calc(var(--abajo) + 24px);
  background: var(--fondo-hundido);
}

.entrada-cuerpo {
  width: min(400px, 100%);
  margin: 0 auto;
}

.marca {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.entrada-texto {
  margin: 0 0 26px;
  color: var(--texto-suave);
  font-size: 15px;
}

.campo {
  display: block;
  margin-bottom: 16px;
}

.campo-nombre {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-mono);
  font-size: 14px;
}

.campo input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(127, 109, 242, 0.16);
}

.entrada-nota {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: var(--radio-chico);
  background: rgba(224, 82, 82, 0.1);
  border: 1px solid rgba(224, 82, 82, 0.3);
  color: var(--rojo);
  font-size: 13.5px;
}

.entrada-pie {
  margin: 22px 0 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
  line-height: 1.5;
}

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

.boton {
  width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  color: var(--texto);
  font-family: inherit;
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
}

.boton--principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #ffffff;
}

.boton:active {
  transform: scale(0.985);
}

.boton[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  margin: 0 -10px;
  padding: 0;
  border: none;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
}

.icono:active {
  background: var(--fondo-hover);
}

.icono svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono svg[hidden] {
  display: none;
}

.girando {
  animation: girar 800ms linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Barra superior ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: calc(var(--arriba) + 10px) 18px 10px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde-suave);
}

.barra-titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-titulo--nota {
  font-size: 15.5px;
  text-align: center;
}

/* ---------- Buscador y lista ---------- */

.buscador {
  flex: none;
  padding: 12px 18px;
}

.buscador input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  background: var(--fondo-hundido);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;
}

.buscador input:focus {
  outline: none;
  border-color: var(--acento);
}

.notas {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0 0 calc(var(--abajo) + 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nota-fila {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-bottom: 1px solid var(--borde-suave);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nota-fila:active {
  background: var(--fondo-hover);
}

.nota-nombre {
  display: block;
  font-size: 15.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La carpeta es el contexto del proyecto: en este vault, saber que una nota es
   de El Telar importa tanto como su nombre. */
.nota-carpeta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacio-lista {
  padding: 26px 18px;
  margin: 0;
  color: var(--texto-tenue);
  font-size: 14.5px;
  text-align: center;
}

/* ---------- Lectura ---------- */

.lectura {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(var(--abajo) + 48px);
  font-family: var(--fuente-lectura);
  font-size: 16.5px;
  line-height: 1.68;
  overflow-wrap: break-word;
}

.lectura h1,
.lectura h2,
.lectura h3 {
  margin: 1.5em 0 0.5em;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.lectura > :first-child {
  margin-top: 0;
}

.lectura h1 { font-size: 25px; }
.lectura h2 { font-size: 20px; }
.lectura h3 { font-size: 17.5px; color: var(--texto-suave); }

.lectura p,
.lectura ul,
.lectura ol {
  margin: 0 0 1em;
}

.lectura ul,
.lectura ol {
  padding-left: 1.3em;
}

.lectura li {
  margin-bottom: 0.35em;
}

.lectura a {
  color: var(--acento-vivo);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 109, 242, 0.35);
}

/* Un wikilink es navegación interna, no un enlace a internet: se marca distinto
   para que se note que te lleva a otra nota del vault. */
.wikilink {
  color: var(--acento-vivo);
  border: none;
  background: rgba(127, 109, 242, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
}

.wikilink--roto {
  color: var(--texto-tenue);
  background: none;
  border-bottom: 1px dashed var(--borde);
  cursor: default;
}

.lectura code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--fondo-elevado);
  font-family: var(--fuente-mono);
  font-size: 0.86em;
}

.lectura pre {
  margin: 0 0 1em;
  padding: 13px 14px;
  border-radius: var(--radio);
  background: var(--fondo-hundido);
  border: 1px solid var(--borde-suave);
  overflow-x: auto;
}

.lectura pre code {
  padding: 0;
  background: none;
  font-size: 13.5px;
  line-height: 1.5;
}

.lectura blockquote {
  margin: 0 0 1em;
  padding: 2px 0 2px 15px;
  border-left: 3px solid var(--acento);
  color: var(--texto-suave);
}

.lectura hr {
  margin: 1.8em 0;
  border: none;
  border-top: 1px solid var(--borde-suave);
}

.lectura table {
  width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}

.lectura th,
.lectura td {
  padding: 8px 11px;
  border: 1px solid var(--borde-suave);
  text-align: left;
}

.lectura th {
  background: var(--fondo-hundido);
  font-weight: 600;
}

/* ---------- Editor ---------- */

.editor {
  flex: 1;
  width: 100%;
  padding: 18px 20px;
  border: none;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-mono);
  font-size: 15px;
  line-height: 1.65;
  resize: none;
  outline: none;
  -webkit-overflow-scrolling: touch;
}

.editor[hidden] {
  display: none;
}

.guardar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 12px 18px calc(var(--abajo) + 12px);
  background: var(--fondo-elevado);
  border-top: 1px solid var(--borde-suave);
}

.guardar[hidden] {
  display: none;
}

.guardar-estado {
  flex: 1;
  font-size: 13px;
  color: var(--texto-tenue);
}

.guardar .boton {
  width: auto;
  min-width: 118px;
}

/* ---------- Aviso flotante ---------- */

.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: calc(var(--abajo) + 26px);
  transform: translate(-50%, 12px);
  max-width: calc(100% - 36px);
  padding: 11px 17px;
  border-radius: 22px;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  color: var(--texto);
  font-size: 14px;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 10;
}

.aviso-flotante[hidden] {
  display: none;
}

.aviso-flotante.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.aviso-flotante.es-error {
  border-color: rgba(224, 82, 82, 0.45);
  color: var(--rojo);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}