/* OnRig — estilo base del panel (sobrio, azul IBERTEST) */
:root {
  --azul: #1a4f8b; --azul-claro: #e8f0fa; --fondo: #f4f6f9;
  --texto: #1f2933; --gris: #6b7280; --borde: #d9dee5;
  --ok: #1e7d32; --alarma: #b91c1c;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif;
       background: var(--fondo); color: var(--texto); }
body.centrado { min-height: 100vh; display: grid; place-items: center; }

.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 10px;
           padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.login { width: min(380px, 92vw); }
.login h1 { margin: 0; color: var(--azul); font-size: 2rem; }
.sub { color: var(--gris); margin: 4px 0 18px; font-size: .95rem; }
label { display: block; margin: 12px 0 4px; font-size: .9rem; color: var(--gris); }
input { width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 6px;
        font-size: 1rem; }
/* Botones de formulario (Guardar, Crear, Añadir, Registrar, Entrar…): verde, como Nuevo OnRig
   y Configuración. Los de uso (Conectar, Abrir VNC) van en azul; los peligrosos, perfilados en rojo. */
button { margin-top: 18px; width: 100%; padding: 11px; background: var(--ok);
         color: #fff; border: 0; border-radius: 6px; font-size: 1rem; cursor: pointer; }
button:hover { filter: brightness(1.1); }
.error { color: var(--alarma); font-size: .9rem; }

.cabecera { display: flex; justify-content: space-between; align-items: center;
            background: var(--azul); color: #fff; padding: 12px 24px; }
.marca { font-weight: 700; font-size: 1.25rem; }
.marca .sub { color: #cfe0f5; font-weight: 400; font-size: .9rem; margin: 0 0 0 8px; }
.sesion a { color: #fff; }
.rol { background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 10px;
       font-size: .8rem; }
.contenido { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 14px; margin-bottom: 20px; }
.tile { background: #fff; border: 1px solid var(--borde); border-radius: 10px;
        padding: 18px; text-align: center; }
.tile .num { font-size: 2.2rem; font-weight: 700; color: var(--azul); }
.tile .eti { color: var(--gris); }
.aviso h2 { margin-top: 0; color: var(--azul); }
.tile .num.ok { color: var(--ok); }

/* Banners */
.banner { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; }
.banner.error { background: #fdecec; color: var(--alarma); border: 1px solid #f5c2c2; }
.banner.aviso { background: #fff7e6; color: #92400e; border: 1px solid #fde4b5; }

/* Tarjetas de gateway */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px; margin-bottom: 20px; }
.tarjeta.gw { padding: 18px 20px; border-left: 5px solid var(--borde); }
.tarjeta.gw.on { border-left-color: var(--ok); }
.tarjeta.gw.off { border-left-color: var(--alarma); }
.gw-cab { display: flex; align-items: center; gap: 10px; }
.gw-cab h2 { margin: 0; font-size: 1.15rem; }
.gw-sub { color: var(--gris); margin: 4px 0 10px; font-size: .9rem; }
.gw-datos { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0;
            font-size: .9rem; }
.gw-datos dt { color: var(--gris); }
.gw-datos dd { margin: 0; }
.gw-vacio { color: var(--gris); font-size: .85rem; margin: 10px 0 0; }
.txt-ok { color: var(--ok); } .txt-alarma { color: var(--alarma); }
.semaforo { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
            background: #9ca3af; flex: none; }
.semaforo.on { background: var(--ok); box-shadow: 0 0 0 3px #d5efd9; }
.semaforo.off { background: var(--alarma); box-shadow: 0 0 0 3px #f8d7d7; }
.dispositivos { list-style: none; padding: 0; margin: 12px 0 0; font-size: .9rem; }
.dispositivos li { padding: 4px 0; border-top: 1px dashed var(--borde); }
.dispositivos .tipo { background: var(--azul-claro); color: var(--azul); font-size: .75rem;
                      padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
code { background: #f1f3f6; padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* Registro de peers sin ficha */
.form-inline { display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
               align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); }
.form-inline .clave { grid-column: 1; font-size: .78rem; word-break: break-all; }
.form-inline .mini { color: var(--gris); font-size: .8rem; }
.form-inline input { grid-column: span 3; }
.form-inline input[name="nombre"] { grid-column: span 3; }
.form-inline button { grid-column: span 3; margin-top: 4px; }
@media (min-width: 900px) {
  .form-inline { grid-template-columns: 2fr auto auto 1.2fr 1fr 1fr .8fr 1fr auto; }
  .form-inline .clave, .form-inline input, .form-inline button { grid-column: auto; }
  .form-inline button { margin-top: 0; width: auto; padding: 9px 16px; }
}
.pie { color: var(--gris); font-size: .8rem; text-align: center; margin-top: 30px; }

/* F3: ficha, chuleta, cuenta */
.banner.ok { background: #e6f4ea; color: var(--ok); border: 1px solid #bfe3c6; }
.txt-gris { color: var(--gris); }
.marca a { color: #fff; text-decoration: none; }
.migas { margin: 0 0 14px; font-size: .9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.migas a { display: inline-block; background: var(--ok); color: #fff; text-decoration: none; padding: 6px 14px;
           border-radius: 6px; font-size: .9rem; }
.migas a:hover { filter: brightness(1.1); }
.gw-cab h2 a { color: inherit; text-decoration: none; }
.gw-acciones { margin: 12px 0 0; font-size: .9rem; }
.tarjeta + .tarjeta { margin-top: 16px; }
.form-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; }
.form-ficha label { margin: 6px 0 0; }
.form-ficha button { grid-column: 1 / -1; width: auto; justify-self: start; padding: 10px 22px; }
.form-baja { margin-top: 14px; }
button.peligro { background: #fff; color: var(--alarma); border: 1px solid var(--alarma); width: auto; padding: 8px 16px; margin: 0; }
button.peligro:hover { background: #fdecec; filter: none; }
.chuleta { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 8px 0 14px; }
.chuleta th { text-align: left; color: var(--gris); font-weight: 600; padding: 7px 10px 7px 0; width: 32%; }
.chuleta td { padding: 7px 0; border-top: 1px solid var(--borde); }
.chuleta th { border-top: 1px solid var(--borde); }
pre.conf { background: #1f2933; color: #e5e7eb; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: .85rem; }

/* F3b: usuarios, peers, QR */
.sesion a { color: #fff; }
table.lista { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.lista th { text-align: left; color: var(--gris); font-weight: 600; padding: 8px 10px 8px 0; border-bottom: 2px solid var(--borde); }
table.lista td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tr.inactivo td { color: var(--gris); }
.rol-admin { background: #fde4b5; color: #92400e; } .rol-tecnico { background: var(--azul-claro); color: var(--azul); } .rol-cliente { background: #e5e7eb; color: #374151; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.check input { width: auto; }
/* Campos que ocupan la fila entera de la rejilla .form-ficha (clave pública, casilla Netmap) */
.form-ficha label.ancha { grid-column: 1 / -1; }
.form-ficha .check.ancha { grid-column: 1 / -1; align-items: flex-start; margin-top: 6px; }
.form-ficha .check.ancha input { margin-top: 3px; }
.form-ficha .check.ancha span { color: var(--texto); font-size: .95rem; line-height: 1.4; }
fieldset.modo { grid-column: 1 / -1; border: 1px solid var(--borde); border-radius: 8px; padding: 6px 12px 10px; }
select { width: 100%; padding: 9px; border: 1px solid var(--borde); border-radius: 6px; font-size: 1rem; background: #fff; }
form.inline { display: inline; }
button.enlace { background: none; border: 0; color: var(--alarma); padding: 0; margin: 0; width: auto; font-size: inherit; cursor: pointer; text-decoration: underline; }
button.enlace.ok { color: var(--ok); }

/* F4: bloques, permisos, botones Abrir */
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; margin: 6px 0 12px; }
.casillas .check { margin: 4px 0; }
fieldset.modo legend { color: var(--gris); font-size: .9rem; padding: 0 6px; }
.boton-abrir { display: inline-block; background: var(--azul); color: #fff; text-decoration: none; padding: 3px 10px; border-radius: 6px; font-size: .8rem; margin-left: 6px; }
.boton-abrir:hover { filter: brightness(1.1); }
.boton-abrir.deshabilitado { background: var(--gris); opacity: .6; cursor: not-allowed; pointer-events: none; }
.enlace-mini { font-size: .75rem; color: var(--gris); margin-left: 4px; }

/* F6: conexión bajo demanda (Conectar / Desconectar) */
.conexion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
            padding-top: 8px; border-top: 1px dashed var(--borde); font-size: .9rem; }
.conexion form.inline { display: inline-flex; align-items: center; gap: 6px; }
.conexion select { width: auto; padding: 4px 6px; font-size: .85rem; }
button.mini-azul { width: auto; margin: 0; padding: 5px 12px; font-size: .85rem; border-radius: 6px; background: var(--azul); }
button.mini-azul:disabled { background: var(--gris); opacity: .6; cursor: not-allowed; }

/* «● Conectado» late mientras hay sesión abierta */
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.parpadea { animation: parpadeo 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .parpadea { animation: none; } }

/* F5: auditoría */
tr.alarma td { background: #fff7f7; }
.accion { font-family: Consolas, monospace; font-size: .85em; }
.dispositivos li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tarjeta.destacada { border: 2px solid var(--ok); }
.qr { display: flex; justify-content: center; padding: 10px; }
.qr svg { width: min(320px, 80vw); height: auto; background: #fff; }
h3 { color: var(--azul); margin: 22px 0 8px; }

/* Panel en filas (2026-09-03): un OnRig por línea, a todo el ancho, con buscador */
.contenido.ancho { max-width: 1500px; }
.filtro { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.contenido.ancho > .gw-acciones { margin: 0 0 14px; }
.filtro input[type="search"] { max-width: 420px; }
.filtro .check { margin-top: 0; white-space: nowrap; }
.filtro select { width: auto; margin: 0 0 0 4px; padding: 4px 8px; font-size: .9rem; }
.fila.separador.conectados { color: var(--azul); }
.fila.separador.unico { display: none !important; }
.filas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
/* El atributo hidden debe ganar SIEMPRE a cualquier display propio
   (.fila es grid): sin esto el buscador del panel no esconde nada. */
[hidden] { display: none !important; }

.fila { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(130px, 1fr) minmax(170px, 1.3fr) minmax(240px, 2fr) minmax(260px, 2.4fr) auto;
        gap: 6px 16px; align-items: start; background: #fff; border: 1px solid var(--borde); border-left: 5px solid var(--borde);
        border-radius: 10px; padding: 10px 16px; font-size: .9rem; }
.fila.on { border-left-color: var(--ok); } .fila.off { border-left-color: var(--alarma); }
.fila.cabecera { background: transparent; border: 0; padding: 0 16px 0 21px; color: var(--gris); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.fila .col-id { display: flex; align-items: flex-start; gap: 10px; }
.fila .col-id h2 { margin: 0; font-size: 1.05rem; }
.fila .col-id h2 a { color: inherit; text-decoration: none; }
.fila .col-id .gw-sub { margin: 2px 0 0; }
.fila .semaforo { margin-top: 5px; }
.fila .mini { color: var(--gris); font-size: .82rem; margin-top: 2px; }
.fila .conexion { margin-top: 0; padding-top: 0; border-top: 0; }
.fila .dispositivos { margin: 0; }
.fila .dispositivos li:first-child { border-top: 0; padding-top: 0; }
.fila .gw-vacio { margin: 0; }
.fila .col-acciones { white-space: nowrap; font-size: .9rem; }
@media (max-width: 1000px) {
  .fila { grid-template-columns: 1fr 1fr; }
  .fila.cabecera { display: none; }
  .fila .col-disp, .fila .col-conexion { grid-column: 1 / -1; }
}
.fila.separador { grid-template-columns: 1fr; background: transparent; border: 0; padding: 10px 16px 0 21px;
                  color: var(--azul); font-weight: 600; font-size: .95rem; }
.fila.conectada { background: #eef5fc; border-color: #b9d1ec; box-shadow: inset 0 0 0 1px #b9d1ec; }
.fila .dispositivos li { display: block; }
.fila .dispositivos .abrir { margin-top: 5px; }
.fila .dispositivos .abrir .boton-abrir { margin-left: 0; }
/* Colores por tipo de acción: Abrir = azul (por defecto), Nuevo = verde, Configuración = gris perfilado */
.boton-abrir.nuevo { background: var(--ok); padding: 6px 14px; font-size: .9rem; }
.boton-abrir.secundario { background: var(--ok); }

/* Ficha del OnRig: fila plegable para editar un dispositivo */
tr.edicion td { background: #f4f7fb; border-left: 3px solid var(--ok); padding: 10px 14px; }
tr.edicion .form-ficha button.enlace { grid-column: auto; padding: 0; }
td.acciones { white-space: nowrap; }