/* 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; flex-wrap: wrap; align-items: center; gap: 8px 18px;
            background: var(--azul); color: #fff; padding: 10px 24px; }
/* Menú de secciones como botones (09-09): la sección en la que estás, en blanco; el resto, translúcidos */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.boton-menu { display: inline-block; padding: 5px 13px; border-radius: 15px; background: rgba(255,255,255,.14);
              color: #fff; text-decoration: none; font-size: .9rem; line-height: 1.25; white-space: nowrap; }
.boton-menu:hover { background: rgba(255,255,255,.28); text-decoration: none; }
.boton-menu.activo { background: #fff; color: var(--azul); font-weight: 600; }
.sesion { display: flex; align-items: center; gap: 8px; margin-left: 10px; white-space: nowrap; }
.sesion .salir { background: #dc2626; border: 1px solid #dc2626; border-radius: 15px; padding: 5px 13px; font-size: .9rem; line-height: 1.25; }
.sesion .salir:hover { background: #b91c1c; border-color: #b91c1c; text-decoration: none; }
.marca { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; }
/* El logo de IBERTEST Connect es negro sobre transparente: en la barra azul va sobre una placa blanca (09-09) */
.marca .logo { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 5px 12px; line-height: 0; }
.marca .logo img { height: 30px; width: auto; display: block; }
.marca .sub { color: #cfe0f5; font-weight: 400; font-size: .9rem; margin: 0; }
.login .logo-acceso { margin: 4px 0 6px; text-align: center; }
.login .logo-acceso img { width: 78%; max-width: 280px; height: auto; }
.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; align-items: end; } /* end: los campos de una fila se alinean por abajo aunque una etiqueta ocupe dos líneas */
.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(360px, 2.6fr) minmax(250px, 1.6fr) minmax(170px, 1.3fr) 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; }
/* Conectar va a la IZQUIERDA del nombre del OnRig (Vicente, 08-09; antes debajo): la caja del nombre es una
   fila flexible con el bloque de conexión primero, el nombre después y el conjunto debajo (o en línea, en compacta). */
.fila .col-id > div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
/* El bloque de conexión se «disuelve» en la fila del nombre (display: contents): el botón Conectar o
   Desconectar va el primero, a la izquierda del nombre, y los textos de la sesión (desde qué PC, cuánto
   lleva, caduca) pasan a una línea propia debajo del conjunto (Vicente, 08-09: se pisaban con Estado). */
.fila .col-id .conexion { display: contents; }
.fila .col-id .conexion form.inline, .fila .col-id .conexion > .mini-azul { order: 0; }
.fila .col-id .conexion > .txt-gris, .fila .col-id .conexion > .txt-ok, .fila .col-id .conexion > .txt-alarma,
.fila .col-id .conexion > a { order: 3; font-size: .85rem; }
.fila .col-id .conexion > .txt-gris:first-of-type { flex-basis: 100%; }
.fila .col-id h2 { order: 1; }
.fila .col-id .gw-sub { order: 2; flex-basis: 100%; margin: 0; }
.fila .col-id button.desconectar { background: var(--alarma); }
.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; }

/* Grupo: nivel por conjunto */
table.niveles select { width: auto; min-width: 230px; margin: 0; padding: 5px 8px; }
table.niveles td { vertical-align: middle; }

/* Invitaciones y acceso */
details.plegable > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.tarjeta.destacada { border-left: 4px solid var(--alarma); }
.login .enlaces { margin-top: 14px; }
.login .mensaje { font-style: italic; }
.form-ficha textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }

/* Filas compactas del panel (decisión de Vicente, 07-09): una línea por OnRig; se despliega
   sola con conexión abierta y a mano con «▸ detalles». */
.fila.gw.compacta { padding: 6px 16px; align-items: center; }
.fila.gw.compacta .col-id .gw-sub { flex-basis: auto; }   /* en compacta, el conjunto en la misma línea */
.fila.gw.compacta .col-id .conexion > .txt-gris { display: none; }
.fila.gw.compacta .semaforo { margin-top: 0; }
.fila.gw.compacta .col-estado .mini:not(.salida), .fila.gw.compacta .col-tunel > *,
.fila.gw.compacta .col-disp .dispositivos, .fila.gw.compacta .col-disp .gw-vacio { display: none; }
.fila.gw .resumen-disp { display: none; }
.fila.gw.compacta .resumen-disp { display: block; color: var(--gris); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila.gw.compacta .resumen-disp code { font-size: .8rem; }
.fila .desplegar { color: var(--azul); font-size: .85rem; margin-right: 8px; }
/* «sale por …» en una sola línea, pero SIN invadir la columna Túnel: la celda puede encoger (min-width: 0)
   y el texto se corta con «…»; el texto completo está en el tooltip. Se solapaba con una WiFi de nombre largo (08-09). */
.fila .col-estado { min-width: 0; }
.fila .col-estado .salida { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Asistente de puesta en marcha (barra de pasos, acciones, resumen imprimible) */
.pasos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; padding: 0; list-style: none; }
.pasos li { flex: 1 1 130px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #eef2f7; color: var(--gris); font-size: .9rem; }
.pasos li .n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: #c3ccd8; color: #fff; font-weight: 700; font-size: .85rem; flex: none; }
.pasos li.actual { background: var(--azul); color: #fff; font-weight: 600; }
.pasos li.actual .n { background: #fff; color: var(--azul); }
.pasos li.hecho { background: #e7f3ea; color: var(--ok); }
.pasos li.hecho .n { background: var(--ok); }
.pasos li.na { opacity: .45; }
.pasos li a { color: inherit; }
.paso-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.paso-acciones form { margin: 0; }
.paso-acciones button { margin: 0; }
.lista-pasos li { margin: 6px 0; line-height: 1.45; }
table.resumen th { text-align: left; width: 180px; vertical-align: top; }
@media print {
  .cabecera, .migas, .pasos, .paso-acciones, .banner { display: none !important; }
  .tarjeta { box-shadow: none; border: 0; }
}

/* Ficha del OnRig en pestañas: misma barra que el asistente; pulsas una y solo se ve esa parte */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.pestanas a { flex: 1 1 130px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #eef2f7; color: var(--gris); font-size: .9rem; font-weight: 600; text-decoration: none; }
.pestanas a .n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: #c3ccd8; color: #fff; font-weight: 700; font-size: .85rem; flex: none; }
.pestanas a:hover { background: #e2e8f0; }
.pestanas a.activa { background: var(--azul); color: #fff; }
.pestanas a.activa .n { background: #fff; color: var(--azul); }
.js .pestana { display: none; }
.js .pestana.activa { display: block; }
.pestana + .pestana { margin-top: 0; }
.gw-cab .txt-gris { font-size: 1rem; }


/* Orden en marcha: aviso grande y parpadeante (Vicente, 08-09: el «en curso» casi no se veía) */
.banner.en-proceso { display: flex; align-items: center; gap: 14px; font-size: 1.15rem; padding: 14px 18px; border: 2px solid #b45309; }
.banner.en-proceso .punto { width: 18px; height: 18px; border-radius: 50%; background: #b45309; flex: none; }

/* «Duplicar este OnRig»: en la fila de Conectar, a su derecha (Vicente, 08-09); la línea punteada
   la lleva la fila entera y el formulario se despliega debajo */
.acciones-estado { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borde); }
.acciones-estado .conexion { margin-top: 0; padding-top: 0; border-top: 0; }
.acciones-estado .duplicar-btn { margin-left: auto; margin-right: 0; width: auto; padding: 5px 12px; font-size: .9rem; border: 0; cursor: pointer; }
.duplicar .form-ficha { display: block; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fafbfc; }
.duplicar .nombre-nuevo input { max-width: 360px; }
.duplicar .opciones-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; margin: 10px 0 4px; }
.duplicar .opciones-linea .check { margin: 0; white-space: nowrap; }
.duplicar .paso-acciones { margin-top: 10px; }

/* WiFi de servicio: QR junto al texto */
.qr-servicio { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin: 10px 0; }
.qr-servicio img { flex: none; border: 1px solid var(--borde); border-radius: 8px; background: #fff; padding: 6px; }

/* Móvil: el panel se usa desde el teléfono al configurar un OnRig en planta (WiFi de servicio) */
@media (max-width: 640px) {
  .contenido { padding: 10px 8px; }
  .tarjeta { padding: 12px 12px; }
  .cabecera { flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; }
  .sesion { font-size: .85rem; line-height: 1.7; }
  .pestanas a, .pasos li { flex: 1 1 44%; font-size: .85rem; padding: 7px 8px; }
  .gw-datos { grid-template-columns: 1fr; gap: 2px; }
  .gw-datos dt { font-size: .8rem; color: var(--gris); }
  .form-ficha { grid-template-columns: 1fr; }
  .acciones-estado .duplicar-btn { margin-left: 0; }
  .paso-acciones form, .paso-acciones button { width: 100%; }
  .paso-acciones button { width: 100%; }
  table.lista { display: block; overflow-x: auto; }
}

/* Cobertura WiFi (cuatro barras) junto a ONLINE: verde buena/excelente, naranja débil, rojo muy débil */
.senal-wifi { vertical-align: -2px; margin-left: 7px; }
.senal-wifi rect { fill: #cbd5e1; }
.senal-wifi.n4 rect { fill: var(--ok); }
.senal-wifi.n3 rect:nth-child(-n+4) { fill: var(--ok); }
.senal-wifi.n3 rect:nth-child(5) { fill: #cbd5e1; }
.senal-wifi.n2 rect:nth-child(2), .senal-wifi.n2 rect:nth-child(3) { fill: #d97706; }
.senal-wifi.n1 rect:nth-child(2) { fill: var(--alarma); }

/* Filtros por categoría de la auditoría y del historial de un OnRig (09-09) */
.chips { margin: 6px 0 10px; }
.chip { display: inline-block; padding: 3px 11px; margin: 0 6px 6px 0; border-radius: 14px; border: 1px solid #cbd5e1;
        color: #334155; font-size: .9em; text-decoration: none; background: #fff; }
.chip:hover { border-color: #1e3a8a; color: #1e3a8a; }
.chip.activa { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }

@media (max-width: 640px) {
  .marca .logo { padding: 4px 8px; }
  .marca .logo img { height: 22px; }
  .marca .sub { display: none; }
}

/* ── Portal del cliente (fase 1, 09-09): sus máquinas, botones grandes, quién está conectado, historial ── */
.conjunto-titulo { color: var(--azul); font-size: 1.05rem; margin: 22px 0 10px; }
.maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 8px; }
.maquina { padding: 18px 20px; border-left: 5px solid var(--borde); }
.maquina.on { border-left-color: var(--ok); }
.maquina.off { border-left-color: var(--alarma); }
.maq-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maq-cab h3 { margin: 0; font-size: 1.15rem; }
.maq-cab h3 a { color: var(--texto); text-decoration: none; }
.maq-cab h3 a:hover { color: var(--azul); }
.maq-estado { margin: 6px 0 10px; }
.quien { background: #fff7e6; border: 1px solid #fde4b5; color: #92400e; border-radius: 8px;
         padding: 8px 12px; margin: 0 0 10px; font-size: .92rem; }
.abrir-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.abrir-lista form { margin: 0; }
.abrir-grande { margin: 0; width: auto; padding: 9px 16px; background: var(--azul); font-size: .95rem;
                display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.abrir-grande small { font-weight: 400; opacity: .85; font-size: .76rem; }
.abrir-grande:disabled { background: var(--gris); opacity: .6; cursor: not-allowed; }
.maq-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 0; font-size: .9rem; }
.maq-pie form { margin: 0; }
.maq-pie button.enlace { margin: 0; width: auto; }
.tile .num.alarma { color: var(--alarma); }
/* La «llave» del cliente (fase 2, 09-09): permitida en azul claro, cerrada en rojo claro */
.llave { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
         margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--azul-claro); font-size: .92rem; }
.llave.cerrada { background: #fdecec; border: 1px solid #f5c2c2; color: var(--alarma); }
.llave form { margin: 0; }
.llave-boton { margin: 0; width: auto; padding: 5px 12px; font-size: .85rem; border-radius: 15px; }
.llave-boton.cerrar { background: #fff; color: var(--alarma); border: 1px solid var(--alarma); }
.llave-boton.abrir { background: var(--ok); }
/* Avisos por correo (fase 3, 10-09): línea bajo las cifras del portal */
.avisos-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; font-size: .9rem; color: var(--gris); }
.avisos-linea form { margin: 0; }
.avisos-linea button.enlace { margin: 0; width: auto; padding: 0; font-size: .9rem; }
/* Idiomas (fase A, 10-09): selector en el acceso, en Mi cuenta y en la cabecera del cliente */
.idiomas a { margin: 0 6px; color: var(--gris); text-decoration: none; }
.idiomas a.activo { color: var(--azul); font-weight: 600; text-decoration: underline; }
.idioma-sel { display: inline-flex; gap: 6px; margin-right: 6px; font-size: .78rem; }
.idioma-sel a { color: #cfe0f5; text-decoration: none; }
.idioma-sel a.activo { color: #fff; font-weight: 700; text-decoration: underline; }
/* Teléfono con país + número (10-09) */
.telefono-campos { display: flex; gap: 6px; }
.form-ficha label.telefono { grid-column: span 2; }   /* cada teléfono ocupa dos columnas: cabe «+32 Belgique / België» */
.telefono-campos select { width: 55%; padding: 9px 6px; border: 1px solid var(--borde); border-radius: 6px; font-size: .95rem; background: #fff; }
.telefono-campos input { width: 45%; }