/* Marca de eugenia: navy #040D2C, azul #7C99F1, celeste #8AB4E7, morado #7737EC. */
:root {
  --fondo: #000000;
  --panel: #0e0e12;
  --panel2: #18181e;
  --borde: #2b2b34;
  --texto: #f2f2f6;
  --tenue: #9b9ba7;
  --azul: #7c99f1;
  --celeste: #8ab4e7;
  --morado: #7737ec;
  --verde: #34d399;
  --rojo: #fb7185;
  --ambar: #fbbf24;
  --radio: 16px;
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.oculto { display: none !important; }
.nota { color: var(--tenue); font-size: 13px; margin: 0 0 12px; }
.error { color: var(--rojo); font-size: 14px; text-align: center; margin-top: 14px; }
.tenue { color: var(--tenue); }

/* ── portada ─────────────────────────────────────────────────────────── */
.portada { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
           align-items: center; padding: 24px; gap: 6px; }
.marca { width: min(240px, 64vw); }
.marca-chica { height: 20px; }
.portada-sub { color: var(--tenue); margin: 0 0 22px; font-size: 14px; }
.forma { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.forma label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tenue); }
input, textarea, select {
  background: var(--panel2); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 12px; padding: 12px 14px; font: inherit; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
textarea { resize: vertical; line-height: 1.4; }

/* ── estructura ──────────────────────────────────────────────────────────
   El armazón es fijo y SOLO <main> hace scroll. Si scrollea el documento, el
   navegador encoge y estira la ventana al colapsar sus barras, y una pestañera
   `fixed; bottom:0` sube y baja sola según la vista tenga o no scroll. Así ya
   no puede pasar: la barra de abajo es parte del armazón, no flota. */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

.barra { flex: none; display: flex; align-items: center;
         justify-content: space-between; gap: 10px;
         padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
         background: #000; border-bottom: 1px solid var(--borde); }

main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
       overscroll-behavior: contain; padding: 14px 14px 20px;
       max-width: 620px; width: 100%; margin: 0 auto; }
h2.titulo { font-size: 19px; margin: 4px 0 14px; }
h3 { font-size: 16px; margin: 0 0 10px; }

.chip { font-size: 12px; padding: 5px 11px; border-radius: 999px;
        background: var(--panel2); border: 1px solid var(--borde); color: var(--tenue); white-space: nowrap; }
.chip.ok { color: var(--verde); border-color: #1c4a3a; background: #0a1c16; }
.chip.mal { color: var(--rojo); border-color: #4d2029; background: #1d0d12; }

/* ── tarjetas ────────────────────────────────────────────────────────── */
.tarjeta { background: var(--panel); border: 1px solid var(--borde);
           border-radius: var(--radio); padding: 16px; margin-bottom: 14px; }
.tarjeta.alerta { border-color: var(--morado); box-shadow: 0 0 0 1px rgba(119,55,236,.35); }
.tarjeta.peligro { border-color: #4d2029; }

.cabeza { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cabeza .quien { font-weight: 600; }
.cabeza .meta { color: var(--tenue); font-size: 12px; }

.burbuja { background: var(--panel2); border-radius: 12px; padding: 11px 13px;
           margin-bottom: 12px; white-space: pre-wrap; word-break: break-word; }
.burbuja.sugerida { border-left: 3px solid var(--azul); }
.burbuja.script { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
                  max-height: 220px; overflow: auto; color: var(--celeste); }
.etiqueta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
            color: var(--tenue); margin-bottom: 6px; }

/* ── botones: todo lo tocable es <button> y se nota ──────────────────── */
.btn { appearance: none; border: 1px solid var(--borde); background: var(--panel2);
       color: var(--texto); border-radius: 12px; padding: 12px 14px; font: inherit;
       font-weight: 500; cursor: pointer; display: inline-flex; align-items: center;
       justify-content: center; gap: 7px; min-height: 46px; }
.btn:active { transform: scale(.985); filter: brightness(1.15); }
.btn.primario { background: linear-gradient(135deg, var(--azul), var(--morado));
                border-color: transparent; color: #fff; font-weight: 600; }
.btn.bueno { background: #0a1c16; border-color: #1c4a3a; color: var(--verde); }
.btn.malo  { background: #1d0d12; border-color: #4d2029; color: var(--rojo); }
.btn:disabled { opacity: .45; }
.botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.botones .ancho { grid-column: 1 / -1; }

/* Fila tocable de lista: la flecha avisa que se puede entrar. */
.fila { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px;
        background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
        padding: 14px; margin-bottom: 8px; color: var(--texto); font: inherit; cursor: pointer; }
.fila::after { content: "›"; margin-left: auto; color: var(--tenue); font-size: 22px; line-height: 1; }
.fila .cuerpo { min-width: 0; }
.fila .cuerpo b { display: block; font-weight: 600; }
.fila .cuerpo small { color: var(--tenue); display: block; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.fila.sin-flecha::after { content: ""; }

/* Interruptor: informativo a la izquierda, tocable a la derecha. */
.opcion { display: flex; align-items: center; justify-content: space-between; gap: 14px;
          padding: 13px 0; border-bottom: 1px solid var(--borde); }
.opcion:last-child { border-bottom: 0; }
.opcion .txt b { display: block; font-weight: 500; }
.opcion .txt small { color: var(--tenue); }
.sw { appearance: none; width: 50px; height: 30px; border-radius: 999px; flex: none;
      background: var(--panel2); border: 1px solid var(--borde); position: relative; cursor: pointer; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
             border-radius: 50%; background: var(--tenue); transition: .18s; }
.sw:checked { background: linear-gradient(135deg, var(--azul), var(--morado)); border-color: transparent; }
.sw:checked::after { left: 23px; background: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip-btn { background: var(--panel2); border: 1px solid var(--borde); color: var(--texto);
            border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.chip-btn:active { filter: brightness(1.2); }

/* ── pestañas ────────────────────────────────────────────────────────── */
.pestanas { flex: none; display: grid;
            grid-template-columns: repeat(5, 1fr); gap: 2px;
            background: #000; border-top: 1px solid var(--borde);
            /* iOS reserva 34px para el home indicator y la barra quedaba flotando
               muy arriba. Con ~55% sigue sin chocar con el indicador (que ocupa
               unos 13px) y el menú se sienta abajo, como se espera. */
            padding: 4px 6px calc(2px + env(safe-area-inset-bottom) * 0.35); }
.pestana { background: none; border: 0; color: var(--tenue); font: inherit; font-size: 10px;
           display: flex; flex-direction: column; align-items: center; gap: 2px;
           padding: 5px 2px; cursor: pointer; position: relative; border-radius: 10px; }
.pestana .ico { font-size: 18px; line-height: 1; }
.pestana.activa { color: var(--texto); background: var(--panel); }
.badge { position: absolute; top: 0; right: 16%; background: var(--rojo); color: #1d0d12;
         font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }

/* ── hoja inferior ───────────────────────────────────────────────────── */
.hoja { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.hoja-cuerpo { position: relative; width: 100%; background: var(--panel);
               border-radius: 20px 20px 0 0; border-top: 1px solid var(--borde);
               padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
               max-height: 88dvh; overflow: auto; }
.hoja-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

/* ── conversación ────────────────────────────────────────────────────── */
.msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; margin-bottom: 8px;
       white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.msg.mio { margin-left: auto; background: var(--morado); border-bottom-right-radius: 4px; }
.msg.suyo { background: var(--panel2); border-bottom-left-radius: 4px; }
.msg .autor { display: block; font-size: 11px; color: var(--celeste); margin-bottom: 2px; }

.vacio { text-align: center; color: var(--tenue); padding: 48px 20px; }
.vacio .grande { font-size: 40px; display: block; margin-bottom: 10px; }

.aviso { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom) * 0.35);
         transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--borde);
         color: var(--texto); padding: 11px 18px; border-radius: 999px; z-index: 30;
         font-size: 14px; max-width: 92vw; text-align: center; }
.aviso.malo { border-color: #4d2029; color: var(--rojo); }

.cargando { text-align: center; color: var(--tenue); padding: 30px; }

/* ── chat con Claude ─────────────────────────────────────────────────── */
.hilo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.turno { max-width: 88%; padding: 11px 14px; border-radius: 16px; white-space: pre-wrap;
         word-break: break-word; font-size: 15px; }
.turno.yo { margin-left: auto; background: var(--morado); border-bottom-right-radius: 4px; }
.turno.claude { background: var(--panel); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.trabajando { font-size: 12px; color: var(--tenue); font-family: ui-monospace, Menlo, monospace;
              background: var(--panel2); border-radius: 10px; padding: 8px 11px;
              max-height: 130px; overflow: auto; }
.redactar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end;
            background: var(--fondo); padding: 10px 0 4px; }
.redactar textarea { flex: 1; max-height: 140px; }
.redactar .btn { flex: none; width: 52px; padding: 0; }

/* Días de la semana: el encendido debe distinguirse de un vistazo. */
/* Los siete días SIEMPRE en una fila: en dos se lee como otra cosa. */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 0; }
.chip-btn.dia { min-width: 0; padding: 10px 0; text-align: center; color: var(--tenue); }
.chip-btn.dia.encendido { background: linear-gradient(135deg, var(--azul), var(--morado));
                          border-color: transparent; color: #fff; font-weight: 600; }

/* Fila de horas del silencio: en flex la segunda hora se salía de la tarjeta. */
.horas { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center;
         gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--borde); }
.horas input { width: 100%; padding: 10px; }
.horas b { font-weight: 500; }

/* Botón suelto (fuera de una rejilla .botones) que debe ocupar todo el ancho. */
.btn.pleno { width: 100%; }

/* ── lo que el bot trae entre manos ──────────────────────────────────── */
.trabajando-tarjeta { border-color: var(--azul); border-style: dashed; }
.cuenta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cuenta-barra { flex: 1; height: 6px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.cuenta-barra i { display: block; height: 100%; width: 0;
                  background: linear-gradient(90deg, var(--azul), var(--morado));
                  transition: width .95s linear; }
.cuenta-txt { font-size: 12px; color: var(--tenue); white-space: nowrap; }
/* Sin vencimiento conocido (Claude redactando): barra que va y viene. */
.cuenta.indefinida .cuenta-barra i { width: 35%; transition: none; animation: vaiven 1.4s ease-in-out infinite; }
@keyframes vaiven { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* Mientras se decide si hay sesión: algo en pantalla, nunca el vacío. */
.portada-cargando { margin-top: 10px; animation: latir 1.2s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Que nunca quede duda de si el celular va a sonar con la configuración actual. */
.ahora { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; text-align: center; }
.ahora.suena { background: #0a1c16; border: 1px solid #1c4a3a; color: var(--verde); }
.ahora.callado { background: #241a05; border: 1px solid #5a4410; color: var(--ambar); }

/* Resultado de una ejecución que salió bien. */
.tarjeta.exito { border-color: #1c4a3a; }