/* ==========================================================================
   ControlPBX — consola de operador

   La referencia visual es el equipo de conmutacion telefonica: paneles de
   acero pintado verde-gris institucional, placas grabadas, y el campo de
   lamparas que le decia al operador el estado de cada linea de un vistazo.
   Ese campo de lamparas es el elemento central de esta interfaz porque es,
   literalmente, el mismo problema: treinta lineas, un estado cada una,
   y hay que verlo sin leer.
   ========================================================================== */

:root {
  --plate:      #C7CEC6;
  --plate-dark: #B2BBB1;
  --card:       #F1F3EE;
  --card-sunk:  #E3E7E0;
  --ink:        #171C18;
  --ink-soft:   #59615A;
  --ink-faint:  #8A928A;
  --rule:       #A9B2A8;
  --brass:      #8A7340;

  --live:       #2E7D5B;
  --live-glow:  #4FB286;
  --grace:      #B4762A;
  --grace-glow: #E0A458;
  --cut:        #9E3721;
  --cut-glow:   #C4553D;
  --off:        #9AA39A;

  --plomo: 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(23,28,24,.13);
  --hundido: inset 0 2px 5px rgba(23,28,24,.16);

  --r: 3px;
  --gap: 14px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--plate);
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 100% 3px, 3px 100%;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

code, .mono, .ident { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }

.placa {
  font-family: "Barlow Condensed", "IBM Plex Sans", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .09em;
}

/* --------------------------------------------------------- nameplate --- */

.nameplate {
  background: var(--ink);
  color: var(--plate);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 3px solid var(--brass);
}

.nameplate h1 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .13em;
  line-height: 1;
}
.nameplate h1 span { color: var(--brass); }

.nameplate .resumen {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--plate-dark);
  text-align: right;
  line-height: 1.3;
}

.nameplate button {
  background: none;
  border: 1px solid rgba(199,206,198,.4);
  color: var(--plate);
  padding: 5px 9px;
  border-radius: var(--r);
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 600;
}
.nameplate button:hover { background: rgba(199,206,198,.13); }

/* ------------------------------------------------------------ layout --- */

.envoltura { max-width: 1180px; margin: 0 auto; padding: 18px 14px 60px; }

.pestanas {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--rule);
}
.pestanas button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 9px 14px;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  font-size: 15px;
}
.pestanas button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* ------------------------------------------------------------- panel --- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--plomo);
  margin-bottom: var(--gap);
  overflow: hidden;
}

.panel > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--card-sunk);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.panel > header .titulo {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .07em;
}

.panel > header .ip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--plate);
  padding: 2px 6px;
  border-radius: 2px;
}

.panel > .cuerpo { padding: 14px; }

/* ------------------------------------------------------------ lampara --- */
/* El elemento firma. Un boton iluminado fisico: bisel arriba, sombra
   abajo, halo interior del color del estado.                            */

.lampara {
  --c: var(--off);
  --g: var(--off);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--g) 22%, transparent), transparent 62%),
    var(--card-sunk);
  border: 1px solid var(--rule);
  border-top-color: rgba(255,255,255,.75);
  border-radius: var(--r);
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(23,28,24,.16);
  transition: transform .09s ease, box-shadow .09s ease;
  min-height: 46px;
}
.lampara:hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(255,255,255,.5), 0 3px 8px rgba(23,28,24,.2); }
.lampara:active { transform: translateY(1px); box-shadow: var(--hundido); }
.lampara:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.lampara .bulbo {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(23,28,24,.22), 0 0 7px var(--g);
  flex: none;
}

.lampara .etiqueta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lampara .etiqueta b {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .05em;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lampara .etiqueta small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--ink-soft);
}

.lampara.viva  { --c: var(--live);  --g: var(--live-glow); }
.lampara.aviso { --c: var(--grace); --g: var(--grace-glow); }
.lampara.corte { --c: var(--cut);   --g: var(--cut-glow); }
.lampara.muerta { --c: var(--off);  --g: transparent; opacity: .72; }

.campo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

/* --------------------------------------------------------- metricas --- */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.metrica { background: var(--card); padding: 9px 11px; }
.metrica dt {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.metrica dd {
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
  font-weight: 500;
}
.metrica dd .u { font-size: 11px; color: var(--ink-faint); }
.metrica.alerta dd { color: var(--cut); }

/* ---------------------------------------------------------- botones --- */

.btn {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 13px;
  border: 1px solid var(--rule);
  border-top-color: rgba(255,255,255,.7);
  border-radius: var(--r);
  background: var(--card-sunk);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(23,28,24,.14);
  min-height: 40px;
}
.btn:hover { background: #EAEEE6; }
.btn:active { box-shadow: var(--hundido); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.corte { background: var(--cut); color: #F5EEEA; border-color: #7E2C1A; }
.btn.corte:hover { background: #B03E26; }
.btn.viva  { background: var(--live); color: #EDF5F1; border-color: #236247; }
.btn.viva:hover { background: #35906A; }
.btn.fina { padding: 5px 9px; min-height: 32px; font-size: 13px; }

.acciones { display: flex; gap: 7px; flex-wrap: wrap; }

/* ------------------------------------------------------------ tabla --- */

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .09em;
  color: var(--ink-soft);
  text-align: left;
  padding: 7px 9px;
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
}
.tabla td { padding: 7px 9px; border-bottom: 1px solid var(--card-sunk); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--card-sunk); }
.tabla .ident { font-size: 12.5px; }

.marca {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase; font-size: 12px; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.marca i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.marca.viva  { background: rgba(46,125,91,.13);  color: var(--live); }
.marca.viva i  { background: var(--live); }
.marca.corte { background: rgba(158,55,33,.13); color: var(--cut); }
.marca.corte i { background: var(--cut); }
.marca.aviso { background: rgba(180,118,42,.14); color: var(--grace); }
.marca.aviso i { background: var(--grace); }

/* ------------------------------------------------------------ formas --- */

.campo-form { margin-bottom: 13px; }
.campo-form label {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: .09em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.campo-form input, .campo-form select, .campo-form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--hundido);
  font: inherit;
  color: var(--ink);
  min-height: 42px;
}
.campo-form input:focus, .campo-form select:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}
.campo-form .pista { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.campo-form input.ident { font-family: "IBM Plex Mono", monospace; letter-spacing: .16em; }

/* ------------------------------------------------------------ acceso --- */

.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}
.acceso .panel { width: 100%; max-width: 384px; margin: 0; }
.acceso .marca-sup {
  text-align: center;
  margin-bottom: 22px;
}
.acceso .marca-sup h1 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 33px;
  letter-spacing: .15em;
}
.acceso .marca-sup h1 span { color: var(--brass); }
.acceso .marca-sup p {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------- avisos -- */

.aviso-caja {
  padding: 11px 13px;
  border-radius: var(--r);
  border-left: 3px solid;
  margin-bottom: 13px;
  font-size: 13.5px;
}
.aviso-caja.error { background: rgba(158,55,33,.09); border-color: var(--cut); color: #7A2B19; }
.aviso-caja.ok    { background: rgba(46,125,91,.1);  border-color: var(--live); color: #1F5A41; }
.aviso-caja.nota  { background: rgba(138,115,64,.11); border-color: var(--brass); color: #6B5930; }

.vacio {
  text-align: center;
  padding: 38px 20px;
  color: var(--ink-soft);
}
.vacio p:first-child {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 17px;
  margin-bottom: 5px;
  color: var(--ink);
}

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

.velo {
  position: fixed; inset: 0;
  background: rgba(23,28,24,.55);
  display: grid; place-items: center;
  padding: 18px; z-index: 90;
}
.modal {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 12px 40px rgba(23,28,24,.36);
  width: 100%; max-width: 512px;
  max-height: 88vh; overflow: auto;
}
.modal > header {
  padding: 13px 15px;
  border-bottom: 1px solid var(--rule);
  background: var(--card-sunk);
  display: flex; align-items: center;
}
.modal > header h3 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 17px;
}
.modal > header button {
  margin-left: auto; background: none; border: none;
  font-size: 21px; cursor: pointer; color: var(--ink-soft); line-height: 1;
}
.modal > .cuerpo { padding: 15px; }
.modal > footer {
  padding: 12px 15px; border-top: 1px solid var(--rule);
  display: flex; gap: 8px; justify-content: flex-end; background: var(--card-sunk);
}

/* -------------------------------------------------------------- misc --- */

.cargando { text-align: center; padding: 34px; color: var(--ink-soft); }
.cargando::after {
  content: ""; display: block; width: 22px; height: 22px;
  margin: 12px auto 0;
  border: 2px solid var(--rule); border-top-color: var(--brass);
  border-radius: 50%; animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.barra { height: 5px; background: var(--card-sunk); border-radius: 3px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--live); }
.barra.alerta i { background: var(--cut); }

.oculto { display: none !important; }
.sep { height: 1px; background: var(--rule); margin: 14px 0; }
.tenue { color: var(--ink-soft); font-size: 12.5px; }

#brindis {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: var(--plate);
  padding: 11px 17px; border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(23,28,24,.36);
  z-index: 200; font-size: 13.5px; max-width: 90vw;
  border-left: 3px solid var(--brass);
}
#brindis.error { border-left-color: var(--cut-glow); }
#brindis.ok { border-left-color: var(--live-glow); }

@media (max-width: 640px) {
  .envoltura { padding: 13px 10px 70px; }

  /* En pantalla angosta el resumen empujaba Refrescar y Salir fuera de
     la vista. Se baja a su propia linea, a lo ancho. */
  .nameplate { padding: 8px 11px; gap: 8px; flex-wrap: wrap; }
  .nameplate h1 { font-size: 17px; }
  .nameplate button { padding: 4px 8px; font-size: 12.5px; }
  .nameplate button:nth-of-type(1) { margin-left: auto; }
  .nameplate .resumen {
    order: 10;
    flex: 1 1 100%;
    margin-left: 0;
    text-align: left;
    font-size: 10.5px;
    padding-top: 2px;
    border-top: 1px solid rgba(199,206,198,.16);
  }
  .nameplate .resumen br { display: none; }
  .nameplate .resumen span::before { content: " · "; }

  /* Las pestanas se desplazan en horizontal en vez de cortarse. */
  .pestanas {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas button { padding: 8px 11px; font-size: 14px; white-space: nowrap; }

  /* La cabecera del panel se apila: el alias arriba, el resto en una
     segunda linea con el boton pegado a la derecha. Sin esto el boton
     Abrir se cae solo a un renglon y cada tarjeta crece de mas. */
  .panel > header { padding: 9px 11px; row-gap: 6px; }
  .panel > header .titulo { flex: 1 1 100%; font-size: 16px; }
  .panel > header .ip { font-size: 11px; }
  .panel > header .btn.fina { margin-left: auto; }

  .campo { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .lampara { padding: 8px 10px; }
  .lampara .etiqueta b { font-size: 14px; }

  .metricas { grid-template-columns: repeat(3, 1fr); }
  .metrica { padding: 7px 8px; }
  .metrica dd { font-size: 15px; }

  .tabla { font-size: 13px; }
  .tabla th, .tabla td { padding: 6px 5px; }
  .ocultar-movil { display: none; }
}

@media (max-width: 380px) {
  .campo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}