/* ===== WT Running · Estilos base ===== */
:root {
  --negro:        #0A0A0A;
  --negro-2:      #141414;
  --negro-3:      #1E1E1E;
  --borde:        #2A2A2A;
  --blanco:       #F5F5F5;
  --gris:         #9A9A9A;
  --amarillo:     #F2D027;
  --amarillo-osc: #D9B81F;
  --rojo:         #D7263D;
  --rojo-osc:     #B71E31;
  --radio:        14px;
  --fuente: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--fuente);
  background: var(--negro);
  color: var(--blanco);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Glow sutil de fondo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(242,208,39,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Login ===== */
.login-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-box { width: 100%; max-width: 360px; text-align: center; }

.login-logo {
  width: 200px;
  max-width: 72%;
  height: auto;
  margin: 0 auto 4px;
  display: block;
}
.bolt { width: 160px; height: 16px; margin: 8px auto 18px; display: block; }
.bolt polyline {
  fill: none;
  stroke: var(--amarillo);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gris);
  font-weight: 600;
  margin-bottom: 28px;
}
.login-form { text-align: left; }
.login-form label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gris);
  margin: 0 0 6px 4px;
}
.login-form input {
  width: 100%;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--blanco);
  font-size: 1rem;
  padding: 14px 16px;
  margin-bottom: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
  outline: none;
  border-color: var(--amarillo);
  box-shadow: 0 0 0 3px rgba(242,208,39,0.15);
}
.btn-primary {
  width: 100%;
  background: var(--amarillo);
  color: var(--negro);
  border: none;
  border-radius: var(--radio);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn-primary:hover { background: var(--amarillo-osc); }
.btn-primary:active { transform: translateY(1px); }

.alert-error {
  background: rgba(215,38,61,0.12);
  border: 1px solid var(--rojo);
  color: #ff8a96;
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 20px;
  text-align: center;
}

/* ===== Barra superior ===== */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.brand { display: flex; align-items: baseline; gap: 7px; text-decoration: none; }
.brand-wt { font-weight: 800; font-size: 1.15rem; color: var(--blanco); letter-spacing: 1px; }
.brand-sub { font-size: .7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--amarillo); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-user { font-size: .85rem; color: var(--gris); }
.topbar-logout { color: var(--gris); display: inline-flex; transition: color .15s; }
.topbar-logout:hover { color: var(--rojo); }
.topbar-logout svg { width: 22px; height: 22px; }

/* ===== Contenedor de páginas ===== */
.contenido {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: 22px 18px 60px;
}

/* ===== Saludo ===== */
.saludo h1 { font-size: 1.35rem; }
.saludo .fecha { color: var(--gris); font-size: .85rem; margin-top: 2px; }

/* ===== Banners ===== */
.banner {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--radio); padding: 14px 16px; margin-top: 16px;
  background: var(--negro-2); border: 1px solid var(--borde);
}
.banner-cumple {
  background: rgba(242,208,39,0.10);
  border-color: rgba(242,208,39,0.45);
  font-size: .95rem;
}
.banner-cumple strong { color: var(--amarillo); }
.banner-evento .evento-dias {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px;
}
.evento-dias strong { font-size: 1.9rem; line-height: 1; color: var(--amarillo); }
.evento-dias span { font-size: .62rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); }
.evento-info { flex: 1; }
.evento-titulo { font-weight: 700; }
.evento-meta { color: var(--gris); font-size: .82rem; margin-top: 2px; }
.bolt-mini { width: 26px; height: 26px; color: var(--amarillo); opacity: .85; flex-shrink: 0; }

/* ===== Botones de módulos (circulares) ===== */
.modulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (max-width: 480px) {
  .modulos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.modulo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--blanco);
}
.modulo-icono {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center;
  color: var(--amarillo);
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.modulo-icono svg { width: 34px; height: 34px; }
.modulo:hover .modulo-icono,
.modulo:focus-visible .modulo-icono {
  border-color: var(--amarillo);
  box-shadow: 0 0 0 4px rgba(242,208,39,0.12);
  transform: translateY(-3px);
}
.modulo-label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gris); text-align: center;
}
.modulo:hover .modulo-label { color: var(--blanco); }

/* ===== Volver / encabezado de página ===== */
.volver { display:inline-block; color:var(--gris); text-decoration:none; font-size:.85rem; margin-bottom:8px; }
.volver:hover { color:var(--amarillo); }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.page-title { font-size:1.3rem; }
.page-sub { color:var(--gris); font-size:.85rem; margin-top:2px; }

/* ===== Botones ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:none; border-radius:var(--radio); cursor:pointer;
  font-size:.92rem; font-weight:600; padding:12px 18px;
  text-decoration:none; font-family:inherit;
  transition: background .15s, border-color .15s, transform .05s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-amarillo { background:var(--amarillo); color:var(--negro); }
.btn-amarillo:hover { background:var(--amarillo-osc); }
.btn-ghost { background:transparent; color:var(--blanco); border:1px solid var(--borde); }
.btn-ghost:hover { border-color:var(--amarillo); color:var(--amarillo); }
.btn-peligro { background:transparent; color:var(--rojo); border:1px solid rgba(215,38,61,0.4); }
.btn-peligro:hover { background:rgba(215,38,61,0.12); }
.btn-sm { padding:8px 13px; font-size:.82rem; }

/* ===== Filtros (chips) ===== */
.filtros { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.chip { font-size:.8rem; padding:7px 14px; border-radius:999px; text-decoration:none; color:var(--gris); border:1px solid var(--borde); background:var(--negro-2); }
.chip-on { color:var(--negro); background:var(--amarillo); border-color:var(--amarillo); font-weight:600; }

/* ===== Lista de items ===== */
.lista { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.item {
  background:var(--negro-2); border:1px solid var(--borde);
  border-radius:var(--radio); padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.item-main { flex:1; min-width:0; }
.item-nombre { font-weight:600; }
.item-meta { color:var(--gris); font-size:.82rem; margin-top:5px; }
.item-acciones { display:flex; gap:8px; flex-shrink:0; }

/* ===== Badges ===== */
.badge { display:inline-block; font-size:.68rem; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px; vertical-align:middle; }
.badge-tipo { background:rgba(242,208,39,0.14); color:var(--amarillo); border:1px solid rgba(242,208,39,0.35); }
.badge-off { background:rgba(215,38,61,0.14); color:#ff8a96; border:1px solid rgba(215,38,61,0.35); margin-left:6px; }

/* ===== Formularios ===== */
.form { max-width:520px; margin-top:20px; display:flex; flex-direction:column; gap:16px; }
.campo label { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--gris); margin:0 0 6px 4px; }
.campo input, .campo select {
  width:100%; background:var(--negro-2); border:1px solid var(--borde); border-radius:var(--radio);
  color:var(--blanco); font-size:1rem; padding:13px 15px; font-family:inherit;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus { outline:none; border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(242,208,39,0.15); }
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity:.6; }
.form-acciones { display:flex; gap:12px; margin-top:6px; }

/* ===== Estado vacío y alertas ===== */
.vacio { text-align:center; color:var(--gris); padding:40px 20px; }
.alert-ok { background:rgba(242,208,39,0.10); border:1px solid rgba(242,208,39,0.4); color:var(--amarillo); border-radius:var(--radio); padding:12px 14px; margin-top:16px; font-size:.9rem; }

/* ===== Precio destacado ===== */
.item-precio { font-weight:700; color:var(--amarillo); font-size:1.05rem; margin-top:6px; }
.por-mes { font-size:.78rem; color:var(--gris); font-weight:400; }

/* ===== Tarjetas de totales ===== */
.totales { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.total-card { flex:1 1 120px; background:var(--negro-2); border:1px solid var(--borde); border-radius:var(--radio); padding:14px; }
.total-card.destacado { border-color:rgba(242,208,39,0.5); background:rgba(242,208,39,0.07); }
.total-lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--gris); }
.total-num { font-size:1.15rem; font-weight:700; color:var(--blanco); margin-top:6px; white-space:nowrap; }
.total-card.destacado .total-num { color:var(--amarillo); }

/* ===== Tabla ===== */
.tabla-wrap { overflow-x:auto; margin-top:14px; -webkit-overflow-scrolling:touch; }
.tabla { width:100%; border-collapse:collapse; font-size:.88rem; min-width:340px; }
.tabla th, .tabla td { padding:10px 12px; text-align:right; white-space:nowrap; }
.tabla th:first-child, .tabla td:first-child { text-align:left; }
.tabla thead th { color:var(--gris); font-size:.7rem; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--borde); font-weight:600; }
.tabla tbody td { border-bottom:1px solid rgba(42,42,42,0.5); }
.tabla .td-total { color:var(--amarillo); font-weight:700; }
.tabla tfoot td { border-top:2px solid var(--borde); font-weight:700; padding-top:12px; }

/* ===== Pulido general ===== */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(242,208,39,0.30); color: var(--blanco); }
:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--negro-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--borde); }

/* ===== Áreas seguras (notch / barra de gestos en el cel) ===== */
.topbar {
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
}
.contenido {
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

/* ===== Selects con flecha propia (consistente en dark) ===== */
.campo select, .periodo-form select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 38px;
}

/* ===== Feedback táctil ===== */
.modulo-icono { will-change: transform; }
.modulo:active .modulo-icono { transform: scale(0.95); }
.item { transition: border-color .15s, background .15s; }

/* ===== Entrada suave del contenido ===== */
@keyframes subir { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.contenido { animation: subir .35s ease both; }

/* ===== Respetar quien prefiere menos movimiento ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}