/* ============================================================================
   admin.css — Estilos propios de la vista superadmin (#/admin).
   Prefijo .admin-*. Todos los colores y medidas salen de tokens.css;
   los componentes base (tarjeta, tabla, campo, botón…) los da componentes.css.
   ============================================================================ */

.admin {
  max-width: 52rem;
  padding-bottom: var(--esp-7);
}

/* ----------------------------------------------------------------------------
   Cabecera: logo + salir arriba; título y subtítulo debajo
   --------------------------------------------------------------------------- */
/* Enmarcada como banda kraft: la cabecera se siente PORTADA, no una sección
   más. La textura la pinta .fondo-kraft (base.css), suavizada. */
/* Etiqueta manila (la pinta .etiqueta-kraft): SIEMPRE distinta del cartón
   del fondo. Sin overflow:hidden para que la cinta cruce el borde. */
.admin-cabecera {
  margin-top: var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}
.admin-cabecera > * { position: relative; }
.admin-cabecera img[data-logo] { height: 46px; width: auto; }
.admin-cabecera__acciones {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}
/* Botón-avatar del superadmin: abre el selector de gallina de perfil */
.admin-cabecera__foto {
  animation: foto-invita 2.4s ease-in-out infinite;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
}
.admin-cabecera__foto .gallina-avatar,
.admin-cabecera__foto .avatar { width: 2.4rem; height: 2.4rem; }
.admin-cabecera__foto .gallina-avatar { padding: 0.34rem; }
.admin-cabecera__foto:hover,
.admin-cabecera__foto:focus-visible {
  animation: none;
  box-shadow: 0 0 0 3px var(--dorado-ambar), 0 0 16px 6px rgba(255, 199, 11, 0.8);
}
@media (prefers-reduced-motion: reduce) {
  .admin-cabecera__foto {
    animation: none;
    box-shadow: 0 0 0 2px var(--amarillo-marca);
  }
}
.admin-cabecera h1 { margin-top: var(--esp-2); font-size: var(--texto-2xl); }
.admin-cabecera .texto-suave { color: #4a3a1c; }

/* ----------------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------------- */
.admin-seccion { margin-top: var(--esp-7); }
.admin-seccion__ayuda { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); color: var(--color-texto-2); font-size: var(--texto-sm); max-width: 48rem; }
.admin-seccion > h2 {
  letter-spacing: 0.2px; margin-bottom: var(--esp-2); }
/* Todos los títulos de sección al MISMO tamaño y con la misma pestaña
   amarilla: la página se escanea de arriba a abajo sin sorpresas. */
.admin-seccion > h2,
.admin-seccion-cabecera h2 {
  font-size: var(--texto-xl);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.admin-seccion > h2::before,
.admin-seccion-cabecera h2::before {
  content: '';
  width: 0.5rem;
  height: 1.35rem;
  border-radius: 3px;
  background: var(--amarillo-marca);
  border: 1px solid var(--dorado-bronce);
  flex: none;
}
.admin-seccion__ayuda { margin-bottom: var(--esp-4); max-width: 60ch; }

/* Cabecera de sección con acción (título + botón primario) */
.admin-seccion-cabecera {
  flex-wrap: wrap;
  row-gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
.admin-seccion-cabecera h2 { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Cambiar de vista — TRES tarjetas gemelas en grilla: cabeza (icono+título),
   descripción y acción al fondo, todo alineado entre tarjetas.
   --------------------------------------------------------------------------- */
.admin-vistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--esp-3);
  align-items: stretch;
}

.admin-vista {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-3);
  padding: var(--esp-4);
}
.admin-vista__cab {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.admin-vista__icono {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: #f6efdd;
  border: 1.5px solid var(--dorado-bronce);
  color: var(--color-icono);
  flex: none;
}
.admin-vista h3 { font-size: var(--texto-base); }
.admin-vista__desc { flex: 1; } /* empuja la acción al fondo: botones a ras */
.admin-vista__accion { justify-content: center; }


/* ----------------------------------------------------------------------------
   EQUIPO — fichas del equipo interno (una rejilla simétrica, no una tabla)
   --------------------------------------------------------------------------- */
.admin-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.admin-ficha {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
  /* Papel con grano + una franja de color a la izquierda según el rol: el
     equipo se reconoce de un golpe de vista, sin leer. */
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--gris-claro);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--dur-rapida) linear, border-color var(--dur-rapida) linear,
              transform 0.12s ease;
}
.admin-ficha:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.admin-ficha:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.admin-ficha[data-rol='superadmin'] { border-left-color: var(--rojo-sello); }
.admin-ficha[data-rol='asesor'] { border-left-color: var(--dorado-ambar); }
.admin-ficha[data-rol='campo'] { border-left-color: var(--est-bodega_mercurio); }
/* Dado de baja: se ve apagado pero sigue legible */
.admin-ficha[data-inactivo='si'] { opacity: 0.72; border-left-color: var(--gris-claro); }

.admin-ficha__cab { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.admin-ficha__cab .gallina-avatar { width: 2.5rem; height: 2.5rem; flex: none; }
.admin-ficha__id { min-width: 0; flex: 1; }
.admin-ficha__nombre {
  font-weight: var(--peso-semibold);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-ficha__usuario {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}
.admin-ficha__acciones { flex: none; display: inline-flex; align-items: center; gap: 0.15rem; }
.admin-ficha__editar { flex: none; color: var(--color-icono); display: inline-flex; }
.admin-ficha:hover .admin-ficha__editar { color: var(--dorado-texto); }
/* Borrar: discreto hasta que se apunta, y en rojo para que no se confunda con
   el lápiz de editar. */
.admin-ficha__borrar { color: var(--gris-medio); }
.admin-ficha__borrar:hover,
.admin-ficha__borrar:focus-visible {
  color: var(--color-excepcion);
  background: var(--color-excepcion-velo);
}

/* Modal de borrado: el aviso manda, la lista explica y el botón espera */
.admin-borrar__aviso { align-items: flex-start; }
.admin-borrar__lista {
  margin: var(--esp-2) 0 0;
  padding-left: 1.1rem;
  font-size: var(--texto-sm);
  line-height: 1.5;
}
.admin-borrar__lista li { margin-bottom: 0.3rem; }
.admin-borrar__lista li:last-child { margin-bottom: 0; }

.admin-ficha__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

/* Chip del rol, con el color de su franja */
.admin-rol-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-rol-chip[data-rol='superadmin'] {
  background: var(--rojo-velo); color: var(--rojo-vino); border-color: rgba(179, 40, 44, 0.35);
}
.admin-rol-chip[data-rol='asesor'] {
  background: var(--dorado-velo); color: var(--dorado-texto); border-color: rgba(199, 128, 1, 0.35);
}
.admin-rol-chip[data-rol='campo'] {
  background: #eef3e2; color: #41570f; border-color: rgba(85, 115, 26, 0.35);
}

/* Contacto y horario (solo el comercial): dos datos con su icono */
.admin-ficha__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px dashed var(--color-borde);
}
.admin-ficha__dato {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
  font-variant-numeric: tabular-nums;
}
.admin-ficha__dato .icono { color: var(--color-icono); }
/* Falta el dato: se avisa, porque sin número el cliente cae a la línea general */
.admin-ficha__dato.es-falta { color: var(--color-excepcion); }
.admin-ficha__dato.es-falta .icono { color: var(--color-excepcion); }

/* Badge sí/no de activo: icono + texto; el color solo refuerza */
.admin-activo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.7rem 0.22rem 0.55rem;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.admin-activo[data-activo='si'] {
  background: var(--dorado-velo);
  color: var(--estado-actual-texto);
}
.admin-activo[data-activo='no'] {
  background: var(--gris-velo);
  color: var(--color-texto-suave);
}

/* ----------------------------------------------------------------------------
   Modal crear/editar usuario — bloques simétricos de dos columnas
   --------------------------------------------------------------------------- */
.admin-form { gap: var(--esp-4); }

.admin-bloque {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  margin: 0;
  background-color: var(--color-superficie-2);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.admin-bloque__titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  margin-left: -0.2rem;
  border-radius: var(--radio-xs);
  background: var(--color-acento);
  color: var(--negro);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-bloque--atencion { border-left: 4px solid var(--est-bodega_mercurio); }
.admin-bloque--atencion .admin-bloque__titulo {
  background: var(--est-bodega_mercurio);
  color: var(--blanco);
}
.admin-bloque__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
  margin-top: var(--esp-3);
}
.admin-campo--ancho { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .admin-bloque__rejilla { grid-template-columns: 1fr; }
  .admin-campo--ancho { grid-column: auto; }
}

/* Días de atención: siete pastillas cuadradas, simétricas */
.admin-dias { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.admin-dia {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  color: var(--color-texto-suave);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
  cursor: pointer;
  transition: background-color var(--dur-rapida) linear, color var(--dur-rapida) linear,
              border-color var(--dur-rapida) linear;
}
.admin-dia input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.admin-dia.es-activo {
  background: var(--est-bodega_mercurio);
  border-color: var(--est-bodega_mercurio);
  color: var(--blanco);
}
.admin-dia:has(input:focus-visible) { outline: 3px solid var(--color-foco); outline-offset: 2px; }

.admin-form__acciones {
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

/* Interruptor de activo (checkbox accesible con etiqueta visible) */
.admin-interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
  cursor: pointer;
}
.admin-interruptor input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--dorado-ambar);
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   Configuración: campo con el botón Guardar al lado, no debajo
   --------------------------------------------------------------------------- */
.admin-config { max-width: none; }
.admin-config .campo__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ----------------------------------------------------------------------------
   Buscador de clientes (vista cliente): combobox con resultados desplegables
   --------------------------------------------------------------------------- */

/* Las tarjetas de configuración apiladas con el mismo ritmo */
/* Tarjetas de configuración: mismo aire, mismo radio, misma sombra suave.
   Sin bordes marcados (el color del papel ya separa); h3 con la misma
   jerarquía en todas. */
.admin-seccion .admin-config {
  margin-bottom: var(--esp-4);
  padding: var(--esp-5);
  border-radius: var(--radio-lg);
  border-color: transparent;
}
.admin-config h3 { font-size: var(--texto-md); margin-bottom: 0.2rem; }
.admin-config .campo__ayuda { max-width: 60ch; }

/* Foto de la gallina: vista previa · texto · acción */
.admin-pollito {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}
.admin-pollito__vista {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 50%;
  background: var(--dorado-velo);
  padding: 0.35rem;
  flex: none;
}
.admin-pollito__texto { flex: 1; min-width: 0; }
.admin-pollito > .boton { flex: none; cursor: pointer; }

/* FAQ: filas numeradas [nº · pregunta/respuesta · quitar], todas iguales */
.admin-faq { display: flex; flex-direction: column; gap: var(--esp-3); }
.admin-faq__filas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  counter-reset: faq;
}
.admin-faq__fila {
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background-image: linear-gradient(rgba(253, 240, 200, 0.85), rgba(253, 240, 200, 0.85)),
    var(--textura-kraft);
  background-size: auto, 460px;
  background-color: #fdf0c8;
  border: 1px solid #e3cd8d;
  border-radius: var(--radio-sm);
}
.admin-faq__fila::before {
  counter-increment: faq;
  content: counter(faq);
  grid-row: 1;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: #f6efdd;
  border: 1.5px solid var(--rojo-sello);
  color: var(--rojo-sello);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
}
.admin-faq__fila [data-faq='pregunta'] { grid-column: 2; font-weight: var(--peso-medio); }
.admin-faq__fila textarea { grid-column: 2; resize: vertical; }
.admin-faq__fila .boton-icono { grid-column: 3; grid-row: 1; align-self: start; }
.admin-faq__acciones { justify-content: space-between; }

/* Respaldo de WhatsApp: panel de SOLO LECTURA con los asesores que ya tienen
   número. El reparto lo decide la app; acá solo se consulta quién entra. */
.admin-wsp { display: flex; flex-direction: column; gap: var(--esp-3); }
.admin-wsp__lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.admin-wsp__linea {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) auto minmax(8rem, auto) auto;
  gap: var(--esp-2) var(--esp-3);
  align-items: center;
  padding: var(--esp-2) var(--esp-3);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
}
.admin-wsp__quien { font-weight: var(--peso-semibold); }
.admin-wsp__numero { font-variant-numeric: tabular-nums; color: var(--color-texto-2); }
.admin-wsp__horario {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.admin-wsp__horario .icono { color: var(--color-icono); }
.admin-wsp__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--color-excepcion);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.admin-wsp__aviso .icono { flex: none; margin-top: 0.15rem; }
.admin-wsp__pie { margin-top: var(--esp-1); }
@media (max-width: 700px) {
  .admin-wsp__linea { grid-template-columns: 1fr auto; }
}

/* ----------------------------------------------------------------------------
   Cartón a página completa + jerarquía robusta de secciones
   --------------------------------------------------------------------------- */
.admin-fondo { min-height: 100vh; display: flow-root; }
.admin-fondo.fondo-kraft::before { opacity: 0.45; }

/* Títulos de sección: jerarquía por peso y espacio, sin adornos raros */

/* UNA receta de papel para todo el admin: nada de superficies lisas. Las
   tarjetas de color (papel--dorado/salvia/lila) traen la suya; esto cubre
   las que quedaban en manila plano. */
.admin-fondo .admin-ficha,
.admin-fondo .admin-post,
.admin-fondo .admin-wsp__linea,
.admin-fondo .admin-faq__fila,
.admin-fondo .admin-hoja__pasos,
.admin-fondo .admin-bloque {
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}

/* Sobre cartón, todo recuadro flota con sombra y nada queda plano */
.admin-fondo .tarjeta { box-shadow: var(--sombra-2); }
.admin-fondo .tabla-envoltura {
  background-image: linear-gradient(rgba(253, 249, 238, 0.92), rgba(253, 249, 238, 0.92)),
    var(--textura-kraft);
  background-size: auto, 460px;
  background-color: #fdf9ee;
  box-shadow: var(--sombra-2);
}
.admin-fondo .tabla th {
  background: var(--crema-media);
  /* Tierra profunda y no bronce: sobre crema-media el dorado quedaba en
     ~4.5:1, por debajo de AA para este tamaño. */
  color: var(--color-texto-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: var(--texto-xs);
}

/* ----------------------------------------------------------------------------
   Postulaciones de trabajo (landing → panel del superadmin)
   --------------------------------------------------------------------------- */
.admin-postulaciones { display: flex; flex-direction: column; gap: var(--esp-2); }
.admin-post {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--gris-claro);
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-post[data-estado='nueva'] { border-left-color: var(--amarillo-marca); }
.admin-post:hover { box-shadow: var(--sombra-1); border-color: var(--dorado-bronce); }
.admin-post__quien { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.admin-post__sello {
  flex: none;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radio-pastilla);
  background: var(--gris-velo);
  color: var(--color-texto-suave);
}
.admin-post[data-estado='nueva'] .admin-post__sello {
  background: var(--dorado-velo);
  color: var(--dorado-texto);
  border: 1px solid var(--dorado-bronce);
}
.admin-post__dato { display: grid; grid-template-columns: 10rem 1fr; gap: var(--esp-3); font-size: var(--texto-sm); }
.admin-post__dato dt { color: var(--color-texto-suave); font-weight: var(--peso-semibold); }
.admin-post__dato dd { overflow-wrap: anywhere; }
.admin-post__acciones { margin-top: var(--esp-3); gap: var(--esp-3); flex-wrap: wrap; }

/* Interruptor de la convocatoria (encima de la lista de postulaciones) */
.admin-post-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background-color: var(--dorado-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  cursor: pointer;
  max-width: 40rem;
}
.admin-post-toggle input { margin-top: 0.2rem; accent-color: var(--dorado-bronce); width: 1.1rem; height: 1.1rem; }
.admin-post-toggle__texto { display: flex; flex-direction: column; gap: 0.15rem; }

/* Conexión con la hoja: interruptor + test paso a paso */
.admin-hoja { display: flex; flex-direction: column; gap: var(--esp-3); }
.admin-config__cab { display: flex; align-items: flex-start; gap: var(--esp-3); }
.admin-config__cab > .icono { color: var(--dorado-texto); flex: none; margin-top: 0.15rem; }

.admin-hoja__pasos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
}
.admin-hoja__paso { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--texto-sm); }
.admin-hoja__paso > span { display: flex; flex-direction: column; gap: 0.1rem; }
.admin-hoja__paso .icono { flex: none; margin-top: 0.15rem; }
.admin-hoja__paso[data-estado='ok'] .icono { color: var(--est-entregado); }
.admin-hoja__paso[data-estado='falla'] .icono { color: var(--rojo-marca); }
.admin-hoja__paso[data-estado='omitido'] { color: var(--color-texto-suave); }
.admin-hoja__paso[data-estado='omitido'] .icono { color: var(--color-texto-suave); }

/* ----------------------------------------------------------------------------
   Índice pegajoso del panel + sección experimental plegada
   --------------------------------------------------------------------------- */
.admin-indice {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: var(--esp-4) 0 0;
  padding: 0.4rem;
  border-radius: var(--radio-pastilla);
  /* Cartón bajo el índice: al pegarse arriba, el contenido no se cuela detrás */
  background-color: #b99a6f;
  background-image: var(--textura-carton);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px -10px rgba(46, 30, 12, 0.7);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-indice::-webkit-scrollbar { display: none; }
/* Segmentos: pastillas planas del mismo alto; la actual sube en amarillo con sombra */
.admin-indice a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  height: 2.35rem;
  padding: 0 1rem 0 0.6rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid transparent;
  color: #fff8e6;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  transition: background-color var(--dur-rapida) linear, color var(--dur-rapida) linear, transform 0.12s ease;
}
.admin-indice a .icono {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.22);
  color: #fff;
  padding: 0.28rem;
}
.admin-indice a:hover { background-color: rgba(255,255,255,0.18); }
.admin-indice a.es-actual {
  background-color: var(--amarillo-marca);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border-color: var(--dorado-bronce);
  color: var(--negro);
  text-shadow: none;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.45);
}
.admin-indice a.es-actual .icono { background: var(--negro); color: var(--amarillo-marca); }
/* Estado del bidireccional: LED + texto, a la derecha; rojo late si está apagado */
.admin-indice__bidi { margin-left: auto; padding-left: 0.85rem !important; }
.admin-indice a.admin-indice__bidi .icono { display: none; }
.admin-indice a.admin-indice__bidi::before {
  content: '';
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--accion-ok);
  box-shadow: 0 0 0 3px rgba(46,139,87,0.3);
}
.admin-indice a.admin-indice__bidi[data-on='1'] { background-color: rgba(228,242,232,0.95); border-color: var(--accion-ok); color: var(--accion-ok-oscuro); text-shadow: none; }
.admin-indice a.admin-indice__bidi[data-on='0'] { background-color: rgba(247,228,228,0.97); border-color: var(--accion-no); color: var(--accion-no-oscuro); text-shadow: none; }
.admin-indice a.admin-indice__bidi[data-on='0']::before { background: var(--accion-no); box-shadow: 0 0 0 3px rgba(179,40,44,0.3); animation: bidi-latido 1.6s ease-in-out infinite; }
@keyframes bidi-latido { 0%, 100% { box-shadow: 0 0 0 3px rgba(179, 40, 44, 0.3); } 50% { box-shadow: 0 0 0 7px rgba(179, 40, 44, 0); } }
@media (max-width: 40rem) {
  .admin-indice a { padding-right: 0.75rem; }
  
}

/* Rótulo grande del estado del bidireccional + interruptor */
.admin-hoja__estado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  border: 2px solid var(--accion-ok);
  background-color: var(--accion-ok-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  color: var(--accion-ok-oscuro);
  transition: background-color var(--dur-media), border-color var(--dur-media), color var(--dur-media);
}
.admin-hoja__estado[data-on='0'] { border-color: var(--accion-no); background-color: var(--accion-no-velo); color: var(--accion-no-oscuro); }
.admin-hoja__estado-luz {
  flex: none;
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: var(--accion-ok);
  box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.25);
}
.admin-hoja__estado[data-on='0'] .admin-hoja__estado-luz { background: var(--accion-no); box-shadow: 0 0 0 4px rgba(179, 40, 44, 0.25); }
.admin-hoja__estado-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.admin-hoja__estado-texto strong { font-size: var(--texto-lg); letter-spacing: 0.02em; }
.admin-hoja__estado-texto span { font-size: var(--texto-sm); opacity: 0.9; }
.admin-switch { display: inline-flex; align-items: center; gap: var(--esp-2); cursor: pointer; flex: none; }
.admin-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.admin-switch__pista {
  position: relative;
  width: 3rem; height: 1.6rem;
  border-radius: 999px;
  background: var(--accion-no);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
  transition: background var(--dur-rapida);
}
.admin-switch__perilla {
  position: absolute;
  top: 0.15rem; left: 0.15rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: #fff8e6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: transform var(--dur-rapida);
}
.admin-switch input:checked + .admin-switch__pista { background: var(--accion-ok); }
.admin-switch input:checked + .admin-switch__pista .admin-switch__perilla { transform: translateX(1.4rem); }
.admin-switch input:focus-visible + .admin-switch__pista { outline: 2px solid var(--color-foco); outline-offset: 2px; }
.admin-switch__rotulo { font-size: var(--texto-sm); font-weight: var(--peso-semibold); min-width: 4.5rem; }
@media (max-width: 40rem) {
  .admin-hoja__estado { flex-wrap: wrap; }
}
/* Las secciones dejan sitio al índice pegado al saltar a ellas */
.admin-seccion { scroll-margin-top: 4.5rem; }

/* Sección experimental: plegada, discreta, al final */
.admin-experimental {
  border-top: 1px dashed var(--color-borde-fuerte);
  padding-top: var(--esp-4);
}
.admin-experimental > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  cursor: pointer;
}
.admin-experimental > summary::-webkit-details-marker { display: none; }
.admin-experimental > summary h2 { margin-bottom: 0; color: var(--color-texto-2); }
.admin-experimental > summary h2::before { background: var(--gris-claro); border-color: var(--gris-medio); }
.admin-experimental__sello {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radio-pastilla);
  border: 1px dashed var(--gris-medio);
  color: var(--color-texto-suave);
  margin-left: var(--esp-2);
}
.admin-experimental__chev { color: var(--color-texto-suave); transition: transform var(--dur-rapida) ease; flex: none; }
.admin-experimental[open] > summary .admin-experimental__chev { transform: rotate(180deg); }
.admin-experimental > .admin-seccion__ayuda { margin-top: var(--esp-2); }

/* ----------------------------------------------------------------------------
   Diagrama del flujo Hoja ⇄ App (tarjeta de conexión con la hoja)
   --------------------------------------------------------------------------- */
.admin-flujo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
}
.admin-flujo__nodo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: var(--esp-3);
  border-radius: var(--radio-sm);
  text-align: center;
  border: 1.5px solid;
}
.admin-flujo__nodo strong { font-size: var(--texto-sm); }
.admin-flujo__nodo span { font-size: var(--texto-xs); opacity: 0.85; }
.admin-flujo__nodo--hoja { background: var(--accion-ok-velo); border-color: var(--accion-ok); color: var(--accion-ok-oscuro); }
.admin-flujo__nodo--app { background: var(--dorado-velo); border-color: var(--dorado-bronce); color: var(--dorado-texto); }
.admin-flujo__flechas { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 9rem; }
.admin-flujo__flecha { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: var(--texto-2xs); font-weight: var(--peso-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-flujo__linea { position: relative; width: 100%; height: 3px; border-radius: 2px; }
.admin-flujo__linea::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
/* Ida (hoja → app): siempre viva, verde */
.admin-hoja__como {
  list-style: none;
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-radius: var(--radio-sm);
  background: rgba(255,255,255,0.35);
  font-size: var(--texto-sm);
}
.admin-hoja__como li { display: flex; align-items: flex-start; gap: var(--esp-2); }
.admin-hoja__como .icono { flex: none; color: var(--dorado-texto); margin-top: 0.15rem; }
.admin-flujo__flecha--ida { color: var(--accion-ok); }
.admin-flujo__flecha--ida .admin-flujo__linea { background: var(--accion-ok); }
.admin-flujo__flecha--ida .admin-flujo__linea::after { right: -1px; transform: translateY(-50%) rotate(45deg); }
/* Vuelta (app → hoja): apagada por defecto (gris punteado), viva con el interruptor */
.admin-flujo__flecha--vuelta { color: var(--gris-medio); }
.admin-flujo__flecha--vuelta .admin-flujo__linea { background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px); }
.admin-flujo__flecha--vuelta .admin-flujo__linea::after { left: -1px; transform: translateY(-50%) rotate(-135deg); }
.admin-flujo.es-bidireccional .admin-flujo__flecha--vuelta { color: var(--dorado-ambar); }
.admin-flujo.es-bidireccional .admin-flujo__flecha--vuelta .admin-flujo__linea { background: var(--dorado-ambar); }
.admin-flujo.es-bidireccional .admin-flujo__nodo--app { background: var(--amarillo-marca); color: var(--negro); }
@media (max-width: 560px) {
  .admin-flujo { grid-template-columns: 1fr; }
  .admin-flujo__flechas { flex-direction: row; justify-content: center; }
  .admin-flujo__flecha { min-width: 7rem; }
}


/* Pantallas gigantes: el panel usa el ancho (dos columnas de tarjetas de config) */
@media (min-width: 1920px) {
  .admin { max-width: 64rem; }
  .admin-vistas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 2560px) {
  .admin { max-width: 76rem; }
}

/* Índice: los saltos reparten la horizontal; el estado del bidireccional conserva su ancho */
.admin-indice a:not(.admin-indice__bidi) { flex: 1 1 0; justify-content: center; }

/* Legibilidad: párrafos de ayuda cortos, ancho de lectura, jerarquía clara */
.admin-config p, .admin-hoja__como li { max-width: 66ch; }
.admin-hoja__como { font-size: var(--texto-sm); color: var(--color-texto); }
.admin-hoja__como b { font-weight: var(--peso-semibold); }