/* =============================================================================
   CONSOLA DE OPERADOR DE PIA — ESTILO FUNCIONAL, NO DE MARCA
   =============================================================================
   Ver el comentario de cabecera en index.html: esto no lo ve un cliente, y no
   copia element/brand/pia-tokens.css. Fuente del sistema, sin @font-face, sin
   nada remoto — el CSP del backend es `default-src 'none'` y así se cumple sin
   pedirle una excepción a nadie.
   ========================================================================== */

:root{
  --tinta:#111318;
  --tinta-suave:#4a4f5c;
  --borde:#d8dbe2;
  --fondo:#f6f7f9;
  --superficie:#ffffff;
  --peligro:#b3261e;
  --peligro-fondo:#fbe9e7;
  --exito:#1a7f37;
  --exito-fondo:#e9f7ee;
  --radio:10px;
  --espacio:16px;
}

*{ box-sizing:border-box; }

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

header.cabecera{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--espacio);
  background:var(--superficie);
  border-bottom:1px solid var(--borde);
}
header.cabecera h1{ margin:0; font-size:1.05rem; font-weight:650; }
.marca-admin{ color:var(--tinta-suave); font-weight:500; }
.cabecera-derecha{ display:flex; align-items:center; gap:10px; }
.pastilla-sesion{
  font-size:.8rem; color:var(--exito);
  background:var(--exito-fondo); padding:3px 10px; border-radius:999px;
}

main{ max-width:720px; margin:0 auto; padding:var(--espacio); }

.tarjeta{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--espacio);
  margin-bottom:var(--espacio);
}
.tarjeta h2{ margin:0 0 10px; font-size:.95rem; font-weight:650; }
.tarjeta-login{ max-width:360px; margin:15vh auto 0; }

.ayuda{ color:var(--tinta-suave); font-size:.85rem; margin:0 0 10px; }
.ayuda-campo{ display:block; color:var(--tinta-suave); font-size:.75rem; font-weight:400; }
.nota-pie{ color:var(--tinta-suave); font-size:.78rem; margin-top:14px; }

.fila{ display:flex; gap:8px; }

input, select{
  font:inherit; color:var(--tinta);
  border:1px solid var(--borde); border-radius:8px;
  padding:8px 10px; background:var(--superficie);
  width:100%;
}
input:focus, select:focus, button:focus{
  outline:2px solid var(--tinta); outline-offset:1px;
}

button{
  font:inherit; font-weight:600; cursor:pointer;
  border:none; border-radius:8px; padding:9px 16px;
  background:var(--tinta); color:#fff;
}
button:hover{ opacity:.9; }
button:disabled{ opacity:.5; cursor:not-allowed; }
button.fantasma{
  background:transparent; color:var(--tinta);
  border:1px solid var(--borde);
}
button.peligro{ background:var(--peligro); }

.error{
  color:var(--peligro); background:var(--peligro-fondo);
  border-radius:8px; padding:8px 10px; font-size:.85rem; margin-top:10px;
}
.problema{
  color:var(--peligro); background:var(--peligro-fondo);
  border-radius:8px; padding:8px 10px; font-size:.85rem;
}

.formulario-acunar{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:6px;
}
.formulario-acunar label{ font-size:.8rem; color:var(--tinta-suave); display:block; }
.formulario-acunar .campo-nota{ grid-column:1 / -1; }
.formulario-acunar button{ grid-column:1 / -1; margin-top:4px; }

.aviso-codigo{
  margin-top:12px; padding:12px; border-radius:8px;
  background:var(--exito-fondo); border:1px solid var(--exito);
}
.aviso-codigo code{
  display:block; font-size:1.1rem; letter-spacing:.03em;
  margin:6px 0 10px; word-break:break-all;
}

/* --- Tabla de códigos ------------------------------------------------- */
table.tabla-codigos{ width:100%; border-collapse:collapse; font-size:.85rem; }
table.tabla-codigos th, table.tabla-codigos td{
  text-align:left; padding:7px 6px; border-bottom:1px solid var(--borde);
}
table.tabla-codigos th{ color:var(--tinta-suave); font-weight:600; font-size:.75rem; }
.estado-chip{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem;
}
.estado-activo{ background:var(--exito-fondo); color:var(--exito); }
.estado-revocado, .estado-caducado, .estado-agotado{
  background:var(--peligro-fondo); color:var(--peligro);
}

/* --- Pool free ---------------------------------------------------------- */
.pool-resumen{ display:flex; gap:24px; margin-bottom:10px; }
.pool-cifra{ font-size:1.6rem; font-weight:700; }
.pool-cifra-etiqueta{ font-size:.75rem; color:var(--tinta-suave); }
table.tabla-hosts{ width:100%; border-collapse:collapse; font-size:.82rem; }
table.tabla-hosts th, table.tabla-hosts td{
  text-align:left; padding:6px; border-bottom:1px solid var(--borde);
}