/* ═══════════════════════════════════════════════════════════════════
   SIGES — Componentes

   Piezas reutilizables: botones, campos, tarjetas, etiquetas, avisos.
   Cada componente tiene un nombre en español y una sola función.
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   BOTONES
   ─────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 12px var(--e-4);
  border: 1.5px solid transparent;
  border-radius: var(--r);
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--t-rapida), border-color var(--t-rapida),
              opacity var(--t-rapida);
  user-select: none;
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Acción principal — ámbar sobre negro */
.btn-principal {
  background: var(--accion);
  color: #fff;
  font-weight: var(--peso-fuerte);
}
.btn-principal:active:not(:disabled) { background: var(--accion-claro); }

/* Acción secundaria — contorno neutro */
.btn-secundario {
  background: var(--superficie-2);
  border-color: var(--borde);
  color: var(--texto-2);
}
.btn-secundario:active:not(:disabled) { background: var(--superficie-3); }

/* Nota — azul, la acción más frecuente en campo */
.btn-nota {
  background: var(--ip-fondo);
  border-color: var(--ip);
  border-width: 2px;
  color: var(--ip);
}
.btn-nota:active:not(:disabled) { background: #123a5c; }

/* Editar — ámbar contorneado */
.btn-editar {
  background: var(--accion-fondo);
  border-color: var(--accion);
  color: var(--accion);
}

/* Destructivo */
.btn-peligro {
  background: var(--falla-fondo);
  border-color: var(--falla-borde);
  color: var(--falla);
}
.btn-peligro:active:not(:disabled) { background: #2d0808; }

/* Discreto — solo texto */
.btn-plano {
  background: none;
  color: var(--texto-3);
  padding: var(--e-2) var(--e-3);
}
.btn-plano:active:not(:disabled) { color: var(--texto-2); }

/* Tamaños */
.btn-sm  { padding: 8px var(--e-3); font-size: var(--txt-sm); }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg  { padding: 15px var(--e-5); font-size: var(--txt-md); }
.btn-completo { width: 100%; }

/* Botón de solo ícono */
.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--texto-3);
  transition: background var(--t-rapida), color var(--t-rapida);
  flex-shrink: 0;
}
.btn-icono:active { background: var(--superficie-2); color: var(--texto); }
.btn-icono svg { width: 20px; height: 20px; }
.btn-icono.peligro:active { color: var(--falla); background: var(--falla-fondo); }

/* ── Botón de acción destacado ─────────────────────────────────────
   Un icono suelto sobre el fondo es fácil de no ver: no parece un
   botón hasta que alguien te dice que lo es. Con recuadro, color y
   más tamaño se lee como lo que es —"aquí se agrega"— sin que nadie
   tenga que explicarlo.

   48px de lado es la medida mínima recomendada para tocar con el
   dedo, y ayuda igual con un ratón y pulso poco firme.            */

.btn-icono.destacado {
  width: 48px;
  height: 48px;
  border: 2px solid var(--accion);
  border-radius: var(--r-md);
  background: var(--accion-fondo);
  color: var(--accion);
}
.btn-icono.destacado svg { width: 26px; height: 26px; stroke-width: 2.4; }

.btn-icono.destacado:hover  { background: var(--accion); color: #fff; }
.btn-icono.destacado:active { background: var(--accion); color: #fff; }


/* ───────────────────────────────────────────────────────────────────
   REQUISITOS DE CONTRASEÑA
   ─────────────────────────────────────────────────────────────────── */

.requisitos-clave {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
}
.requisito {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--txt-xs);
  color: var(--texto-4);
  transition: color var(--t-rapida);
}
.requisito .marca {
  width: 12px;
  text-align: center;
  font-weight: var(--peso-fuerte);
}
.requisito.cumplida { color: var(--ok); }


/* ───────────────────────────────────────────────────────────────────
   FRANJA DE ENTORNO DE PRUEBAS
   Solo aparece cuando la app NO está en el dominio de producción.
   ─────────────────────────────────────────────────────────────────── */

.franja-pruebas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  background: repeating-linear-gradient(
    45deg, #ff8c42, #ff8c42 10px, #e07a35 10px, #e07a35 20px
  );
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  pointer-events: none;
}
.franja-pruebas svg { flex-shrink: 0; }

/* El hueco lo reserva la variable --franja en layout.css, que la
   cabecera y las páginas ya tienen en cuenta. Empujar el body además
   de eso sumaba el desplazamiento dos veces. */


/* ───────────────────────────────────────────────────────────────────
   FRANJA DE SESIÓN VENCIDA SIN SEÑAL

   Va abajo y no arriba: arriba ya está la franja de pruebas, y dos
   avisos apilados en la cabecera dejarían de leerse los dos.
   ─────────────────────────────────────────────────────────────────── */

.franja-sesion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 10px var(--e-4);
  padding-bottom: calc(10px + var(--seguro-abajo));
  background: var(--alerta-fondo);
  border-top: 2px solid var(--alerta);
  color: var(--alerta);
  font-size: var(--txt-sm);
  line-height: 1.4;
  text-align: center;
}
.franja-sesion svg { flex-shrink: 0; }
.franja-sesion strong { color: var(--texto); }


/* ───────────────────────────────────────────────────────────────────
   CABECERA "QUIÉN SOY" — pantallas previas a la app (clientes, zonas)
   ─────────────────────────────────────────────────────────────────── */

.previa-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--txt-sm);
}
.previa-usuario-nombre {
  color: var(--texto-2);
  font-weight: var(--peso-medio);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ───────────────────────────────────────────────────────────────────
   TARJETAS DE CLIENTE
   ─────────────────────────────────────────────────────────────────── */

/* Elegir cliente es lo primero que se hace al entrar, y se hace una
   vez al día. Merece la pantalla entera: tarjetas grandes, centradas
   y con espacio, en vez de una fila apretada arriba a la izquierda. */

.clientes-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  justify-content: center;
  align-content: center;
  gap: var(--e-5);
  min-height: 100%;
  padding: var(--e-6) var(--e-4);
}

.cliente-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-4);
  background: var(--superficie-1);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida),
              transform var(--t-rapida);
}
.cliente-tarjeta:hover {
  border-color: var(--accion);
  background: var(--superficie-2);
  transform: translateY(-2px);
}
.cliente-tarjeta:active { transform: none; }

/* El icono en un círculo teñido del color del cliente: se reconoce de
   lejos sin tener que leer el nombre. */
.cliente-tarjeta-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  font-size: 34px;
  line-height: 1;
}

.cliente-tarjeta-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
}

.cliente-tarjeta-detalle {
  font-size: var(--txt-xs);
  color: var(--texto-4);
  min-height: 16px;      /* reserva el sitio: al llegar el dato nada salta */
}

.cliente-tarjeta-conteo { font-size: var(--txt-xs); color: var(--texto-4); }

@media (max-width: 480px) {
  .clientes-rejilla {
    grid-template-columns: 1fr;
    gap: var(--e-3);
    padding: var(--e-4);
  }
  .cliente-tarjeta {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--e-4);
  }
  .cliente-tarjeta-icono { width: 52px; height: 52px; font-size: 24px; flex-shrink: 0; }
}


/* ───────────────────────────────────────────────────────────────────
   SELECTOR VISUAL DE ÍCONOS
   ─────────────────────────────────────────────────────────────────── */

.selector-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.icono-opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--borde);
  background: var(--superficie-1);
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.icono-opcion:active,
.icono-opcion:hover { background: var(--superficie-3); }
.icono-opcion.activo { border-color: var(--accion); background: var(--superficie-3); }


/* ───────────────────────────────────────────────────────────────────
   CAMPOS DE FORMULARIO
   ─────────────────────────────────────────────────────────────────── */

.campo { margin-bottom: var(--e-3); }
.campo:last-child { margin-bottom: 0; }

.campo-etiqueta {
  display: block;
  margin-bottom: 5px;
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--texto-4);
}

.campo-entrada,
.campo-lista,
.campo-texto {
  width: 100%;
  padding: 11px var(--e-3);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
  color: var(--texto);
  letter-spacing: .2px;
  transition: border-color var(--t-rapida);
}

.campo-entrada::placeholder,
.campo-texto::placeholder {
  color: var(--texto-5);
  font-family: var(--fuente);
  letter-spacing: 0;
  text-transform: none;
}

.campo-entrada:focus,
.campo-lista:focus,
.campo-texto:focus {
  outline: none;
  border-color: var(--accion);
}

.campo-texto {
  min-height: 80px;
  resize: vertical;
  font-family: var(--fuente);
  line-height: 1.5;
}

/* Los campos de datos técnicos van siempre en mayúsculas */
.campo-entrada.mayus { text-transform: uppercase; }

/* Coloreado según el tipo de dato */
.campo-entrada.tipo-ip     { color: var(--ip); }
.campo-entrada.tipo-mac    { color: var(--accion); }
.campo-entrada.tipo-red    { color: var(--red); }
.campo-entrada.tipo-enlace { color: var(--enlace); }

/* Estado bloqueado — IP de fábrica */
.campo-entrada:read-only,
.campo-entrada.bloqueado {
  background: var(--red-fondo);
  border-color: var(--red-borde);
  color: var(--texto-4);
  cursor: not-allowed;
}

/* Lista desplegable con flecha propia */
.campo-lista {
  padding-right: var(--e-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a9ab8' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-3) center;
  font-family: var(--fuente);
  cursor: pointer;
}

/* Dos o tres campos en una fila */
.campo-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.campo-fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--e-2); }
.campo-fila-2 > .campo,
.campo-fila-3 > .campo { margin-bottom: var(--e-3); }

/* Mensaje bajo un campo */
.campo-ayuda {
  margin-top: 4px;
  font-size: var(--txt-xs);
  color: var(--texto-4);
  line-height: 1.4;
}
.campo-ayuda.error { color: var(--falla); }


/* ───────────────────────────────────────────────────────────────────
   SECCIONES DE FORMULARIO
   ─────────────────────────────────────────────────────────────────── */

.seccion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--e-5) 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
  font-size: var(--txt-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accion);
}
.seccion:first-child { margin-top: 0; }
.seccion svg { width: 14px; height: 14px; }


/* ───────────────────────────────────────────────────────────────────
   TARJETAS
   ─────────────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
}

.tarjeta-clic {
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.tarjeta-clic:active { border-color: var(--accion); background: var(--superficie-3); }


/* ───────────────────────────────────────────────────────────────────
   ETIQUETAS DE DATOS
   Píldoras pequeñas que muestran IP, MAC, UF, tipo, estado.
   ─────────────────────────────────────────────────────────────────── */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  line-height: 1.4;
}

.etiqueta-ip     { background: var(--ip-fondo);     color: var(--ip);     border-color: var(--ip-borde); }
.etiqueta-mac    { background: var(--accion-fondo); color: var(--accion); border-color: var(--accion-borde); }
.etiqueta-uf     { background: var(--red-fondo);    color: var(--ok);     border-color: var(--red-borde); }
.etiqueta-tipo   { background: var(--info-fondo);   color: var(--info);   border-color: var(--info-borde); }
.etiqueta-red    { background: var(--red-fondo);    color: var(--red);    border-color: var(--red-borde); }
.etiqueta-neutra { background: var(--superficie-3); color: var(--texto-3); border-color: var(--borde); }

/* Estados operativos */
.etiqueta-ok      { background: var(--ok-fondo);     color: var(--ok);     border-color: var(--ok-borde); }
.etiqueta-alerta  { background: var(--alerta-fondo); color: var(--alerta); border-color: var(--alerta-borde); }
.etiqueta-falla   { background: var(--falla-fondo);  color: var(--falla);  border-color: var(--falla-borde); }

/* Etiqueta de rol de usuario */
.etiqueta-rol {
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* El admin va en el color de marca, no en rojo. El rojo significa
   "algo va mal" en toda la aplicación, y ser administrador no lo es —
   además chocaba con las alertas de verdad. */
.rol-admin      { background: var(--accion-fondo); color: var(--accion);  border: 1px solid var(--accion-borde); }
.rol-gerencia   { background: var(--alerta-fondo); color: var(--alerta);  border: 1px solid var(--alerta-borde); }
.rol-lider      { background: var(--ok-fondo);     color: var(--ok);      border: 1px solid var(--ok-borde); }
.rol-supervisor { background: var(--info-fondo);   color: var(--info);    border: 1px solid var(--info-borde); }
.rol-tecnico    { background: var(--ip-fondo);     color: var(--ip);      border: 1px solid var(--ip-borde); }
.rol-gestion    { background: var(--superficie-3); color: var(--texto-3); border: 1px solid var(--borde); }
.rol-visor      { background: var(--superficie-3); color: var(--texto-3); border: 1px solid var(--borde); }


/* ───────────────────────────────────────────────────────────────────
   FILTRO DE ENCENDIDO/APAGADO (varios activos a la vez)

   No es .periodo-btn: aquello es una tira de pestañas donde solo una
   puede estar activa (Hoy / 7 días / 30 días — ver Panel). Un filtro
   como "Mantenimiento" + "Comunicaciones" es lo contrario, los dos
   pueden estar prendidos o apagados sin relación entre sí, y usar el
   mismo aspecto de pestaña sugiere "elige una" cuando la app espera
   "marca las que quieras". La marca de verificado solo aparece cuando
   está activo, para que se lea como un interruptor, no como una pestaña.
   ─────────────────────────────────────────────────────────────────── */

.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-full);
  color: var(--texto-3);
  font-size: var(--txt-sm);
  cursor: pointer;
}
.filtro-chip.activo {
  border-color: var(--accion);
  color: var(--accion);
  background: var(--accion-fondo);
}
.filtro-chip svg { display: none; }
.filtro-chip.activo svg { display: block; }


/* ───────────────────────────────────────────────────────────────────
   ACCESOS ASIGNADOS A UN USUARIO
   ─────────────────────────────────────────────────────────────────── */

.acceso-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin-bottom: 6px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
}
.acceso-nivel {
  font-size: 10px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--texto-4);
  flex-shrink: 0;
}
.acceso-sitio {
  flex: 1;
  min-width: 0;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acceso-permiso {
  font-size: 10px;
  font-weight: var(--peso-fuerte);
  padding: 2px 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.acceso-permiso.lectura { background: var(--superficie-3); color: var(--texto-3); }
.acceso-permiso.edicion { background: var(--ok-fondo);     color: var(--ok); }


/* ───────────────────────────────────────────────────────────────────
   AVISOS
   ─────────────────────────────────────────────────────────────────── */

.aviso {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: 10px var(--e-3);
  border: 1px solid;
  border-radius: var(--r);
  font-size: var(--txt-sm);
  line-height: 1.5;
}
.aviso svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.aviso-info   { background: var(--ip-fondo);     border-color: var(--ip-borde);     color: var(--ip); }
.aviso-ok     { background: var(--ok-fondo);     border-color: var(--ok-borde);     color: var(--ok); }
.aviso-alerta { background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta); }
.aviso-error  { background: var(--falla-fondo);  border-color: var(--falla-borde);  color: var(--falla); }
.aviso-neutro { background: var(--superficie-2); border-color: var(--borde);        color: var(--texto-3); }


/* ───────────────────────────────────────────────────────────────────
   CAMPO DE UNIDAD FUNCIONAL
   Destacado en verde: es el agrupador principal del sistema.
   ─────────────────────────────────────────────────────────────────── */

.campo-uf {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 11px var(--e-3);
  background: var(--red-fondo);
  border: 2px solid var(--ok);
  border-radius: var(--r);
}
.campo-uf svg { width: 18px; height: 18px; color: var(--ok); flex-shrink: 0; }
.campo-uf input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ok);
  font-family: var(--fuente-datos);
  font-weight: var(--peso-fuerte);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.campo-uf input::placeholder {
  color: #1a4a2a;
  font-family: var(--fuente);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  text-transform: none;
}

/* Sugerencias de UF existentes */
.uf-sugerencias {
  margin-top: -1px;
  background: var(--red-fondo);
  border: 1px solid var(--red-borde);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
}
.uf-sugerencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 9px var(--e-3);
  border-bottom: 1px solid var(--red-borde);
  font-family: var(--fuente-datos);
  font-size: var(--txt-sm);
  color: var(--ok);
  cursor: pointer;
}
.uf-sugerencia:last-child { border-bottom: none; }
.uf-sugerencia:active { background: #051505; }
.uf-sugerencia-conteo { font-size: var(--txt-xs); color: #4a7a4a; }
.uf-sugerencia.nueva { color: var(--info); font-family: var(--fuente); }


/* ───────────────────────────────────────────────────────────────────
   CAMPOS PERSONALIZADOS
   ─────────────────────────────────────────────────────────────────── */

.campo-extra {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: 6px;
  padding: 8px var(--e-3);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
}
.campo-extra input {
  min-width: 0;
  background: none;
  border: none;
  outline: none;
}
.campo-extra .nombre {
  flex: 1;
  color: var(--texto-2);
  font-size: var(--txt-sm);
  text-transform: uppercase;
}
.campo-extra .valor {
  flex: 1.4;
  padding-left: var(--e-2);
  border-left: 1px solid var(--borde);
  color: var(--texto);
  font-family: var(--fuente-datos);
  font-size: var(--txt-sm);
  text-transform: uppercase;
}
.campo-extra input::placeholder {
  color: var(--texto-5);
  font-family: var(--fuente);
  text-transform: none;
}

.btn-agregar-campo {
  width: 100%;
  padding: 11px;
  background: none;
  border: 1.5px dashed var(--borde);
  border-radius: var(--r);
  color: var(--texto-4);
  font-size: var(--txt-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color var(--t-rapida), color var(--t-rapida);
}
.btn-agregar-campo:active { border-color: var(--ip); color: var(--ip); }
.btn-agregar-campo svg { width: 15px; height: 15px; }


/* ───────────────────────────────────────────────────────────────────
   SELECTOR TX / RX
   ─────────────────────────────────────────────────────────────────── */

.selector-enlace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }

.opcion-enlace {
  padding: var(--e-3);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.opcion-enlace .sigla {
  display: block;
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto-4);
  margin-bottom: 2px;
}
.opcion-enlace .detalle { font-size: var(--txt-xs); color: var(--texto-4); }

.opcion-enlace.activo-tx {
  background: var(--alerta-fondo);
  border-color: var(--alerta);
}
.opcion-enlace.activo-tx .sigla { color: var(--alerta); }

.opcion-enlace.activo-rx {
  background: var(--info-fondo);
  border-color: var(--info);
}
.opcion-enlace.activo-rx .sigla { color: var(--info); }


/* ───────────────────────────────────────────────────────────────────
   MODAL / PANEL INFERIOR
   ─────────────────────────────────────────────────────────────────── */

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--capa-modal);
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--capa-modal) + 1);
  max-height: 88vh;
  /* En móvil, cuando aparece el teclado, "vh" no se achica y el botón
     de guardar queda tapado. "dvh" sí se ajusta a la altura visible real. */
  max-height: 88dvh;
  background: var(--superficie-1);
  border-top: 2px solid var(--borde-fuerte);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%);
  transition: transform var(--t-lenta);
  display: flex;
  flex-direction: column;
}
.panel.abierto { transform: translateY(0); }

.panel-asa {
  width: 40px;
  height: 4px;
  margin: var(--e-3) auto var(--e-2);
  background: var(--borde-fuerte);
  border-radius: 2px;
  flex-shrink: 0;
}

.panel-cabecera {
  padding: 0 var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.panel-titulo { font-family: var(--fuente-titulo); font-size: var(--txt-lg); font-weight: var(--peso-medio); }
.panel-sub    { margin-top: 2px; font-size: var(--txt-sm); color: var(--texto-3); }

.panel-cuerpo {
  padding: var(--e-4);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.panel-pie {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + var(--seguro-abajo));
  border-top: 1px solid var(--borde);
  flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────────
   MENSAJE FLOTANTE
   ─────────────────────────────────────────────────────────────────── */

.mensaje {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-nav) + var(--seguro-abajo) + var(--e-4));
  z-index: var(--capa-aviso);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  max-width: calc(100vw - var(--e-8));
  padding: 11px var(--e-5);
  background: var(--superficie-3);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  box-shadow: var(--sombra);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  transform: translateX(-50%) translateY(80px);
  opacity: 0;
  transition: transform var(--t-lenta), opacity var(--t);
  pointer-events: none;
}
.mensaje.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.mensaje svg { width: 16px; height: 16px; flex-shrink: 0; }
.mensaje.ok    { border-color: var(--ok-borde);    color: var(--ok); }
.mensaje.error { border-color: var(--falla-borde); color: var(--falla); }


/* ───────────────────────────────────────────────────────────────────
   ESTADO VACÍO
   ─────────────────────────────────────────────────────────────────── */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-5);
  text-align: center;
  color: var(--texto-4);
}
.vacio svg { width: 44px; height: 44px; opacity: .5; }
.vacio-titulo { font-size: var(--txt-md); font-weight: var(--peso-medio); color: var(--texto-3); }
.vacio-texto  { font-size: var(--txt-sm); max-width: 300px; line-height: 1.6; }


/* ── Estado de fallo ──────────────────────────────────────────────
   Se diferencia del vacío con color de alerta: "no hay nada" y
   "no se pudo cargar" no deben confundirse de un vistazo.          */

.vacio-fallo svg { color: var(--alerta); opacity: .85; }

.vacio-fallo .btn { margin-top: var(--e-2); }

.fallo-detalle {
  margin-top: var(--e-3);
  max-width: 320px;
  font-size: var(--txt-xs);
  text-align: left;
}
.fallo-detalle summary {
  cursor: pointer;
  color: var(--texto-4);
  list-style: none;
}
.fallo-detalle summary::-webkit-details-marker { display: none; }
.fallo-detalle summary::before { content: '▸ '; }
.fallo-detalle[open] summary::before { content: '▾ '; }
.fallo-detalle code {
  display: block;
  margin-top: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  color: var(--texto-4);
  font-family: var(--fuente-datos);
  word-break: break-word;
  white-space: pre-wrap;
}


/* ───────────────────────────────────────────────────────────────────
   BARRA DE ACCIONES
   Atrás a la izquierda, acciones a la derecha. Una sola fila arriba
   en vez de una pila de botones al final.
   ─────────────────────────────────────────────────────────────────── */

.barra-acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}

.barra-acciones-derecha {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* El de borrar se separa de los demás: un dedo apurado no debería
   encontrarlo pegado al de "agregar equipo". */
.barra-acciones-derecha .btn-icono.peligro { margin-left: var(--e-3); }


/* ───────────────────────────────────────────────────────────────────
   DATOS DE LA CUENTA
   Fichas de "Mi cuenta": rótulo a la izquierda, valor a la derecha.
   ─────────────────────────────────────────────────────────────────── */

.datos-cuenta {
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}

.dato-cuenta {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-1) 0;
  font-size: var(--txt-sm);
}

.dato-cuenta-rotulo {
  flex-shrink: 0;
  min-width: 84px;
  font-size: var(--txt-xs);
  color: var(--texto-4);
}

.dato-cuenta-valor {
  flex: 1;
  min-width: 0;
  color: var(--texto-2);
  word-break: break-word;
}


/* ───────────────────────────────────────────────────────────────────
   PAGINACIÓN
   ─────────────────────────────────────────────────────────────────── */

.paginacion:not(:empty) {
  margin-top: var(--e-3);
  margin-bottom: var(--e-2);
}

.paginacion-cuenta {
  margin-top: var(--e-2);
  font-size: var(--txt-xs);
  color: var(--texto-4);
  text-align: center;
}


/* ───────────────────────────────────────────────────────────────────
   CARGANDO
   ─────────────────────────────────────────────────────────────────── */

.cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-6);
  color: var(--texto-4);
  font-size: var(--txt-sm);
}

.girador {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borde);
  border-top-color: var(--accion);
  border-radius: 50%;
  animation: girar .7s linear infinite;
  flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Esqueleto de carga */
.esqueleto {
  background: linear-gradient(90deg,
    var(--superficie-2) 25%,
    var(--superficie-3) 50%,
    var(--superficie-2) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}