/* portal.css - Vista web para clientes (misma marca que el mapa: navy, vidrio, acento azul) */
@import url('/fonts/brand-fonts.css');
@font-face { font-family: 'FA Solid'; src: url('/fonts/fa-solid-900.ttf') format('truetype');
             font-weight: 900; font-style: normal; font-display: block; }

:root {
  --navy-950: #030914; --navy-900: #060d1f; --navy-800: #0a1226; --navy-700: #0e1630;
  --panel: rgba(10, 22, 48, 0.72); --panel-solido: #0b1630;
  --borde: rgba(120, 170, 255, 0.16); --borde-fuerte: rgba(120, 170, 255, 0.30);
  --azul: #008ed5; --azul-hi: #00a7ec; --cian: #00d0ff;
  --texto: #e8f0fb; --tenue: #8ea3c4; --muy-tenue: #5a6f92;
  --rojo: #ff4d4f; --rojo-fondo: #1f0b12; --ambar: #f5a623; --verde: #2ecc71;
  --radio: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--navy-950); color: var(--texto);
             font: 13px/1.4 'Inter', system-ui, 'Segoe UI', sans-serif; }
button { font: inherit; color: inherit; }
.fa { font-family: 'FA Solid'; font-weight: 900; font-style: normal; line-height: 1; display: inline-block; }
.num { font-family: 'Barlow', 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* ── barra superior ─────────────────────────────────────────── */
#barra { height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px;
         background: linear-gradient(180deg, #0b1630, #081126); border-bottom: 1px solid var(--borde); }
#barra .logo { height: 26px; }
#barra .sitio { display: flex; flex-direction: column; min-width: 0; }
#barra .sitio b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#barra .sitio span { color: var(--tenue); font-size: 11px; }
.sep { width: 1px; height: 28px; background: var(--borde); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
        background: rgba(255,255,255,0.04); border: 1px solid var(--borde); white-space: nowrap; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--muy-tenue); flex: none; }
.punto.vivo { background: var(--verde); box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: latido 2s infinite; }
.punto.aprende { background: var(--ambar); }
.punto.caido { background: var(--rojo); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); } 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
.kpi { display: flex; align-items: baseline; gap: 6px; }
.kpi .num { font-size: 20px; font-weight: 700; }
.kpi .lbl { color: var(--tenue); font-size: 11px; }
.kpi.alerta .num { color: var(--rojo); }
#barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
       background: rgba(255,255,255,0.04); border: 1px solid var(--borde); font-weight: 600; font-size: 12px; }
.btn:hover { border-color: var(--azul-hi); background: rgba(0,141,213,0.16); }
.btn.principal { background: var(--azul); border-color: var(--cian); color: #fff; }
.btn.principal:hover { background: var(--azul-hi); }
.btn.peligro { background: rgba(255,77,79,0.16); border-color: var(--rojo); color: #ffd0d0; }
.btn.peligro:hover { background: rgba(255,77,79,0.30); }
.btn.chico { padding: 4px 9px; font-size: 11px; }
.btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.usuario { color: var(--tenue); font-size: 12px; text-align: right; line-height: 1.25; }
.usuario b { color: var(--texto); display: block; }

/* ── distribución ───────────────────────────────────────────── */
#principal { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; display: grid;
             grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
             grid-template-rows: minmax(0, 1fr) minmax(190px, 34%); gap: 10px; padding: 10px; }
.panel { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
         overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.panel > .cab { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--borde);
                font-weight: 700; font-size: 12px; letter-spacing: .02em; flex: none; }
.panel > .cab .fa { color: var(--cian); }
.panel > .cab .info { margin-left: auto; color: var(--tenue); font-weight: 500; }
#panel-mapa iframe { border: 0; width: 100%; flex: 1; background: var(--navy-900); }
#panel-eventos { grid-column: 1 / span 2; }

/* ── cascada ────────────────────────────────────────────────── */
#cascada-caja { position: relative; flex: 1; min-height: 0; cursor: crosshair; }
#cascada { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#cascada-vacia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                 color: var(--tenue); text-align: center; pointer-events: none; padding: 20px; }
#cascada-tip { position: absolute; pointer-events: none; padding: 5px 8px; border-radius: 7px; font-size: 11px;
               background: rgba(3,9,20,.88); border: 1px solid var(--borde-fuerte); white-space: nowrap; display: none; }

/* ── eventos ────────────────────────────────────────────────── */
.pestanas { display: flex; gap: 4px; }
.pestanas button { padding: 4px 10px; border-radius: 7px; border: 1px solid transparent; background: none; cursor: pointer;
                   color: var(--tenue); font-weight: 600; font-size: 12px; }
.pestanas button.activa { color: var(--texto); background: rgba(0,141,213,.18); border-color: var(--borde-fuerte); }
.pestanas .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px;
                    background: var(--rojo); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
#tabla-caja { flex: 1; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; background: var(--panel-solido); color: var(--tenue); font-weight: 600; font-size: 11px;
     text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 7px 12px; border-bottom: 1px solid rgba(120,170,255,.07); vertical-align: middle; }
tr:hover td { background: rgba(0,141,213,.07); }
td.acciones { text-align: right; white-space: nowrap; }
.tipo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tipo i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.etq { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
       border: 1px solid var(--borde); color: var(--tenue); white-space: nowrap; }
.etq.e-alarma { color: #ffd0d0; border-color: rgba(255,77,79,.6); background: rgba(255,77,79,.14); }
.etq.e-aviso { color: #ffe2b0; border-color: rgba(245,166,35,.5); background: rgba(245,166,35,.10); }
.etq.ok { color: #c9f5da; border-color: rgba(46,204,113,.45); background: rgba(46,204,113,.10); }
.etq.activa { color: #bfefff; border-color: rgba(0,208,255,.45); }
.tenue { color: var(--tenue); }
.vacio { padding: 26px; text-align: center; color: var(--tenue); }

/* ── alarmas ────────────────────────────────────────────────── */
#alarmas { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(520px, calc(100vw - 32px));
           display: flex; flex-direction: column; gap: 8px; }
.alarma { background: var(--rojo-fondo); border: 1px solid var(--rojo); border-radius: 12px; padding: 12px 14px;
          box-shadow: 0 14px 40px rgba(0,0,0,.55); display: flex; gap: 12px; align-items: flex-start;
          animation: entra .25s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.alarma .ico { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,77,79,.18); display: flex;
               align-items: center; justify-content: center; color: var(--rojo); font-size: 16px; flex: none;
               animation: pulso 1.2s infinite; }
@keyframes pulso { 50% { background: rgba(255,77,79,.40); } }
.alarma .cuerpo { flex: 1; min-width: 0; }
.alarma .t { font-size: 11px; color: #ff9b9c; font-weight: 700; letter-spacing: .04em; }
.alarma .x { font-size: 15px; font-weight: 700; margin: 2px 0; }
.alarma .d { color: #e2b9bd; font-size: 12px; }
.alarma .botones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

#aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 9px 16px;
         border-radius: 10px; background: var(--panel-solido); border: 1px solid var(--borde-fuerte); display: none; }

/* ── teléfono / tablet ──────────────────────────────────────── */
@media (max-width: 900px) {
  #barra { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 10px; }
  #barra .sep, #barra .logo { display: none; }
  #principal { position: static; display: flex; flex-direction: column; padding: 10px 16px; }
  #panel-mapa { height: 62vh; }
  #panel-cascada { height: 56vh; }
  #panel-eventos { min-height: 320px; }
  .col-fibra, .col-fin, #panel-eventos .cab .info { display: none; }
  #barra .derecha { margin-left: 0; width: 100%; justify-content: space-between; }
  #alarmas { top: auto; bottom: 12px; }
  td, th { padding: 7px 8px; }
  html, body { height: auto; }
}

/* ── entrada ────────────────────────────────────────────────── */
body.entrada { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px;
               background: radial-gradient(1200px 600px at 70% -10%, rgba(0,141,213,.22), transparent 60%), var(--navy-950); }
.tarjeta-entrada { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
                   padding: 28px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.tarjeta-entrada img { height: 34px; display: block; margin-bottom: 18px; }
.tarjeta-entrada h1 { font-size: 18px; margin: 0 0 4px; }
.tarjeta-entrada p { margin: 0 0 20px; color: var(--tenue); }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 12px; color: var(--tenue); margin-bottom: 6px; }
.campo input { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--borde-fuerte);
               background: rgba(3,9,20,.6); color: var(--texto); font: inherit; font-size: 14px; }
.campo input:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px rgba(0,208,255,.15); }
.tarjeta-entrada .btn { width: 100%; justify-content: center; padding: 10px; font-size: 14px; }
#error { color: #ff9b9c; min-height: 18px; margin: -4px 0 10px; font-size: 12px; }
.pie-entrada { margin-top: 16px; color: var(--muy-tenue); font-size: 11px; text-align: center; }