/* BTC Alert — tema oscuro, pensado primero para el teléfono. */

:root {
  /* --- Paleta ---------------------------------------------------------------
     Midnight green domina, pine green acompaña y coral acentúa.

     Reparto semántico: el coral marca la sobrecompra y las acciones; el pine,
     la sobreventa y los estados correctos. Son los dos extremos del RSI y se
     distinguen por tono Y por luminosidad, así que siguen leyéndose con
     daltonismo — algo que el clásico verde/rojo no garantiza. */
  --fondo: #023436;          /* midnight green */
  --pino: #03b5aa;           /* pine green */
  --coral: #ff8552;          /* coral */

  /* Derivados: con tres colores no hay superficies ni texto, así que se
     calculan aclarando el midnight green y manteniendo su temperatura. */
  --superficie: #04464a;     /* tarjetas */
  --superficie-alta: #076065;/* campos, chips, zona neutra de la barra */
  --borde: #0a5257;
  --texto: #e6f4f2;
  --tenue: #8fb3b2;
  --sobre-acento: #012427;   /* texto sobre coral o pine */

  /* Sobre el fondo oscuro, coral y pine se quedan justo por debajo de 4.5:1 en
     texto pequeño. Estos aclarados del mismo tono suben a 5.5:1 y 5.9:1. */
  --coral-texto: #ffa47c;
  --pino-texto: #45d6cc;

  /* Respeta la zona del notch y la barra inferior en iOS. */
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Evita el rebote elástico que hace parecer web a una PWA. */
  overscroll-behavior-y: none;
}

.oculto { display: none !important; }
.tenue { color: var(--tenue); }
.pequeno { font-size: 0.78rem; }
.error { color: var(--coral-texto); font-size: 0.875rem; margin-top: 0.75rem; }
code { background: var(--superficie-alta); padding: 0.1em 0.35em; border-radius: 4px; }

/* ---------------------------------------------------------------- login */

.pantalla { display: none; min-height: 100dvh; }
.pantalla.activa { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.login-caja { width: 100%; max-width: 360px; }
.login-marca { text-align: center; margin-bottom: 2rem; }
.login-marca img { border-radius: 18px; margin-bottom: 1rem; }
.login-marca h1 { font-size: 1.5rem; font-weight: 600; }

/* ------------------------------------------------------------ formularios */

label {
  display: block;
  font-size: 0.8rem;
  color: var(--tenue);
  margin: 1rem 0 0.35rem;
}

input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  /* 16px exactos: por debajo, iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--coral); outline-offset: -1px; }

.check {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--texto); font-size: 0.95rem; margin: 0.85rem 0;
}
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--coral); }

button { font-family: inherit; font-size: 1rem; cursor: pointer; border: none; }

.btn-principal, .btn-secundario, .btn-peligro {
  width: 100%; padding: 0.8rem; margin-top: 1.25rem;
  border-radius: 10px; font-weight: 600;
}
.btn-principal { background: var(--coral); color: var(--sobre-acento); }
.btn-secundario { background: var(--superficie-alta); color: var(--texto); border: 1px solid var(--borde); }
.btn-peligro { background: transparent; color: var(--coral-texto); border: 1px solid rgba(255, 133, 82, 0.45); }
.btn-principal:active, .btn-secundario:active, .btn-peligro:active { opacity: 0.75; }

.btn-icono {
  background: transparent; color: var(--tenue);
  font-size: 1.25rem; padding: 0.35rem 0.6rem; border-radius: 8px;
  transition: color 0.2s ease;
}

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

.btn-icono.girando {
  animation: girar 0.7s linear infinite;
  color: var(--pino);
}

.fila-form { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.fila-form input { flex: 1 1 7rem; }
.fila-form button { width: auto; margin-top: 0; padding: 0.7rem 1.1rem; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ------------------------------------------------------------- estructura */

.cabecera {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(0.85rem + var(--seguro-arriba)) 1rem 0.85rem;
  background: rgba(2, 52, 54, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
}
.cabecera > div { display: flex; align-items: center; gap: 0.6rem; }

main { padding: 1rem; padding-bottom: calc(5.5rem + var(--seguro-abajo)); }

.vista { display: none; }
.vista.activa { display: block; }

.barra-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(2, 52, 54, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
  padding-bottom: var(--seguro-abajo);
}
.nav-btn {
  background: transparent; color: var(--tenue);
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.6rem 0.25rem; font-size: 0.7rem;
}
.nav-btn span { font-size: 1.15rem; }
.nav-btn.activo { color: var(--pino); }

/* --------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 0.85rem;
}
.tarjeta-cab {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.8rem; color: var(--tenue); margin-bottom: 0.75rem;
}

.chip {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--superficie-alta); color: var(--tenue);
  white-space: nowrap;
}
.chip.alta { background: rgba(255, 133, 82, 0.18); color: var(--coral-texto); }
.chip.baja { background: rgba(3, 181, 170, 0.18); color: var(--pino-texto); }
.chip.ok   { background: rgba(3, 181, 170, 0.18); color: var(--pino-texto); }
.chip.mal  { background: rgba(255, 133, 82, 0.18); color: var(--coral-texto); }

/* ------------------------------------------------- tarjeta compacta de regla

   Tres renglones por regla: identidad + valor, barra, y metadatos. Con más de
   dos o tres reglas, cada línea de más obliga a desplazarse para ver el
   conjunto — que es justo lo que esta pantalla debe evitar. */

.panel-regla {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 0.6rem 0.8rem 0.7rem;
  margin-bottom: 0.5rem;
}
.panel-regla.inactiva { opacity: 0.45; }

.panel-cab { display: flex; align-items: baseline; gap: 0.6rem; }
.panel-nombre {
  flex: 1; min-width: 0;
  font-size: 0.85rem; font-weight: 600; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-valor {
  font-size: 1.35rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.panel-valor.alta { color: var(--coral-texto); }
.panel-valor.baja { color: var(--pino-texto); }

.panel-meta {
  font-size: 0.7rem; color: var(--tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- barra RSI */

.barra-rsi {
  position: relative; display: flex; height: 6px;
  border-radius: 3px; overflow: hidden; margin: 0.5rem 0 0.4rem;
}
/* El reparto lo fija cada tarjeta con `style="flex:N"`, según los umbrales de su
   propia regla. Aquí solo el color. */
.barra-zona.baja  { background: rgba(3, 181, 170, 0.55); }
.barra-zona.media { background: var(--superficie-alta); }
.barra-zona.alta  { background: rgba(255, 133, 82, 0.55); }
.barra-marcador {
  position: absolute; top: -2px; width: 3px; height: 10px;
  background: var(--texto); border-radius: 2px;
  transition: left 0.4s ease;
}

/* --------------------------------------------------------------- listados */

.lista { display: flex; flex-direction: column; }
.item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.6rem 0;
  border-bottom: 1px solid var(--borde);
}
.item:last-child { border-bottom: none; }
.item-txt { min-width: 0; }
.item-tit { font-size: 0.9rem; font-weight: 500; }
.item-sub { font-size: 0.75rem; color: var(--tenue); }
.item-val { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.tarjeta-regla {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 0.8rem 0.9rem; margin-bottom: 0.6rem;
}
.tarjeta-regla.inactiva { opacity: 0.5; }
.regla-cab { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.regla-acciones { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.regla-acciones button {
  flex: 1; margin: 0; padding: 0.5rem; font-size: 0.8rem;
  border-radius: 8px; background: var(--superficie-alta);
  color: var(--texto); border: 1px solid var(--borde);
}

.filtros { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; }
.filtros select { width: auto; flex: 1; }

.vacio { text-align: center; color: var(--tenue); padding: 2rem 1rem; font-size: 0.9rem; }

/* ----------------------------------------------------------------- modal */

.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(1, 22, 23, 0.75);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-caja {
  background: var(--fondo);
  width: 100%; max-width: 520px;
  max-height: 92dvh; overflow-y: auto;
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--borde);
  padding: 1.25rem;
  padding-bottom: calc(1.25rem + var(--seguro-abajo));
}
.modal-cab {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 0.5rem;
}
.modal-acciones { display: flex; gap: 0.75rem; }
.modal-acciones button { flex: 1; }

@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal-caja { border-radius: 18px; }
}

/* ----------------------------------------------------------------- aviso */

.aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5.5rem + var(--seguro-abajo)); z-index: 100;
  background: var(--superficie-alta); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 0.7rem 1.1rem; font-size: 0.9rem;
  max-width: 90vw; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.aviso.mal { border-color: var(--coral); color: var(--coral-texto); }

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