/* Superadmin (plataforma): solo composición. La marca es la de la plataforma
   (la de los tokens); cada negocio se ve con su inicial, en su color. */
.superadmin { padding: var(--space-6) var(--space-8) var(--space-12); max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; }
.superadmin-skel { width: 240px; }
.superadmin-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
/* La tabla se desplaza dentro de su tarjeta y no estira la página (RV-43). El texto
   oculto (.h-sr) de su encabezado queda dentro (RV-01), mientras base.css no lo tenga. */
.superadmin .h-tablewrap { position: relative; }
.superadmin-biz { display: flex; align-items: center; gap: 10px; min-width: 0; }
.superadmin-biz .h-marca__logo { width: 32px; height: 32px; font-size: 16px; }
/* Cada negocio con su inicial: en neutro si no eligió color; con color (RV-44), las
   variables las pone superadmin.js con derivarMarca() de Horno, para claro y oscuro. */
.superadmin-biz .superadmin-inicial { background: var(--surface-soft); color: var(--ink); border-color: var(--border-control); font-family: var(--font-ui); }
.superadmin-biz .superadmin-inicial--color { background: var(--claro-marca); color: var(--claro-on); border-color: var(--claro-borde); }
[data-theme="oscuro"] .superadmin-biz .superadmin-inicial--color { background: var(--oscuro-marca); color: var(--oscuro-on); border-color: var(--oscuro-borde); }
.superadmin-biz__txt { display: grid; min-width: 0; }
.superadmin-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.superadmin .h-kpis { margin: 0; }
.superadmin .h-table td { vertical-align: middle; }
.superadmin .h-table .h-est { white-space: nowrap; }

/* Entrar a la plataforma. */
.superadmin-entrar { display: grid; place-items: center; min-height: 60vh; }
.superadmin-entrar .h-panel { width: min(100%, 400px); }
.superadmin-clave { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }

/* La ficha de un negocio (modal ancho). */
.h-modal.superadmin-ficha { max-width: 640px; }
.superadmin-ficha section { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.superadmin-ficha .h-lista > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
/* Funciones (Tanda M, B5.3): el estado y su fecha juntos a la derecha, como
   .aj-funcion-estado de Ajustes; a 480 px o menos, en una línea debajo del texto. */
.superadmin-funciones .h-lista__txt { flex: 1 1 0; min-width: 0; }
.superadmin-funcion-estado { display: grid; justify-items: end; gap: 2px; text-align: right; }
.superadmin-cifras { font-size: 14px; }
.superadmin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); align-items: end; }
.superadmin-confirma { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* La clave temporal (P-04): se ve una sola vez, grande y fácil de dictar. */
.superadmin-clave-temporal { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }

@media (max-width: 760px) {
  .superadmin { padding: var(--space-5) var(--space-4) var(--space-12); }
}
@media (max-width: 480px) {
  .superadmin-funciones .h-lista__txt { flex-basis: 100%; }
  .superadmin-funcion-estado { display: flex; align-items: center; gap: var(--space-2); text-align: left; }
}

/* Qué ve cada rol (055, 13-10): pantallas por rol y por persona, con la primera columna fija. */
.h-modal.superadmin-ficha:has(.superadmin-pantallas) { max-width: 820px; }
.superadmin-pantallas { overflow-x: auto; }
.superadmin-pantallas .h-table th, .superadmin-pantallas .h-table td { text-align: center; padding: 6px 4px; }
.superadmin-pantallas .h-table thead th { font-size: 11px; line-height: 14px; min-width: 76px; }
.superadmin-pantallas .h-table thead th small { display: block; font-weight: 400; font-size: 11px; text-transform: none; color: var(--muted); }
.superadmin-pantallas .h-table thead th:first-child, .superadmin-pantallas .h-table tbody th { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); }
.superadmin-pantallas .h-table tbody th { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.superadmin-pantallas input[type="checkbox"] { width: 20px; height: 20px; }
/* Abre Cocina pero no mueve su tablero (15-10, Ajustes → Caja del negocio). */
.superadmin-solo-mira { display: block; color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
/* Qué tiene este negocio (14-10): los paquetes arriba y cada módulo con lo que trae. */
.superadmin-paquetes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.superadmin-paquetes .h-btn[aria-pressed="true"] { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.superadmin-modulos { display: grid; gap: var(--space-2); }
.superadmin-modulo { align-items: flex-start; }
.superadmin-modulo span { display: grid; gap: 2px; min-width: 0; }
.superadmin-modulo small { color: var(--muted); font-size: 13px; line-height: 18px; font-weight: 400; }

/* ─── En el teléfono (modo celular, docs/diseno/celular.md) ───
   Hasta 760 px y con .h-celular (superadmin.js lo pone; el marco «plataforma» no lo trae).
   La lista en tarjetas, la ficha a pantalla completa con sus secciones plegadas, módulos y
   «Qué ve cada rol» en interruptores con texto, y lo delicado al final («Con cuidado»). */
@media (max-width: 760px) {
  .h-celular .superadmin { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-4); }
  /* La cabecera en una fila: la marca y Salir. «Estás viendo todos los negocios» ya lo dice
     «Superadmin» debajo del nombre. */
  .h-celular .h-top:has(~ .superadmin) .h-top__in { flex-wrap: nowrap; }
  .h-celular .h-top:has(~ .superadmin) .h-marca { min-width: 0; }
  .h-celular .h-top:has(~ .superadmin) .h-top__der { flex: none; flex-wrap: nowrap; }
  .h-celular .h-top:has(~ .superadmin) .h-top__der > .h-est { display: none; }
  .h-celular .superadmin .h-pagehead { margin: 0; }
  .h-celular .superadmin .h-pagehead > div:first-child { flex: 1 1 100%; }
  .h-celular .superadmin .h-pagehead__acc, .h-celular .superadmin .h-pagehead__acc .h-btn { width: 100%; }
  .h-celular .superadmin .h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .h-celular .superadmin .h-kpi { padding: var(--space-3); }
  /* Los dos resúmenes que filtran, juntos en la primera fila. */
  .h-celular .superadmin button.h-kpi { order: -1; }

  /* Cada negocio, una tarjeta: el nombre; el plan y el estado; el WhatsApp y la
     facturación; las cifras en una fila; y «Ver ficha» a todo el ancho. */
  .h-celular .superadmin .h-table--tarjetas tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4); }
  .h-celular .superadmin .h-table--tarjetas td { justify-content: flex-start; align-items: center; gap: var(--space-2); }
  .h-celular .superadmin .h-table--tarjetas td[data-c="negocio"], .h-celular .superadmin .h-table--tarjetas td[data-c="estado"], .h-celular .superadmin .h-table--tarjetas td[data-c="ir"] { flex: 1 0 100%; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="estado"] { flex-wrap: wrap; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="estado"]::before { content: none; }
  .h-celular .superadmin .superadmin-plan { font-weight: 600; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="wa"], .h-celular .superadmin .h-table--tarjetas td[data-c="fac"] { flex: 1 0 100%; justify-content: space-between; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="wa"] br, .h-celular .superadmin .h-table--tarjetas td[data-c="wa"] .h-mono { display: none; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="cifra"] { flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 2px; font-size: 16px; line-height: 22px; text-align: left; white-space: normal; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="cifra"]::before { font-size: var(--texto-minimo); line-height: 18px; white-space: normal; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="ir"] .h-btn { flex: 1 1 0; min-width: 0; }
  .h-celular .superadmin .h-table--tarjetas td[data-c="ir"] .h-btn--primario { order: 2; flex-grow: 2; }
  .h-celular .superadmin-biz .h-marca__logo { width: 40px; height: 40px; font-size: 18px; }

  /* La ficha a pantalla completa. */
  .h-celular .h-modal.superadmin-ficha { max-width: none; padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
  /* La cabecera de la hoja (‹ Volver y el nombre) no crece cuando la ficha es corta. */
  .h-celular .h-modal--hoja.superadmin-ficha > .h-modal__cab { flex: none; }
  .h-celular .superadmin-ficha .superadmin-cifras { font-size: 16px; }
  .h-celular .superadmin-ficha .superadmin-secciones { border-top: 1px solid var(--border); }
  .h-celular .superadmin-ficha section.superadmin-plegada { display: block; padding: 0; border-top: 0; border-bottom: 1px solid var(--border); }
  .h-celular .superadmin-ficha .h-seccion__t { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
  .h-celular .superadmin-ficha .h-seccion__b { gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; }
  .h-celular .superadmin-titulo { flex: 1; min-width: 0; display: grid; }
  .h-celular .superadmin-titulo small { font-size: 14px; line-height: 20px; color: var(--muted); font-weight: 400; }
  .h-celular .superadmin-resumen { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--muted); font-weight: 400; }
  .h-celular .superadmin-ficha .superadmin-plegada > .h-seccion__c { display: grid; gap: var(--space-3); padding: 0 0 var(--space-4); }
  .h-celular .superadmin-ficha .superadmin-cuidado { margin-top: var(--space-4); }
  .h-celular .superadmin-ficha .superadmin-confirma > .h-btn { flex: 1 1 100%; }
  /* El pie fijo de la ficha: solo con cambios (o la pregunta antes de salir). */
  .h-celular .h-modal.superadmin-ficha:not(.superadmin-con-cambios) > .h-modal__acciones { display: none; }
  .h-celular .h-modal.superadmin-ficha.superadmin-con-cambios { padding-bottom: 0; }
  .h-celular .superadmin-ficha > .h-modal__acciones { flex-wrap: wrap; }
  .h-celular .superadmin-ficha:not(.superadmin-preguntando) > .h-modal__acciones > .h-btn--secundario,
  .h-celular .superadmin-ficha:not(.superadmin-preguntando) .superadmin-pregunta { display: none; }
  .h-celular .superadmin-pregunta { flex: 1 0 100%; margin: 0; font-weight: 600; }
  .h-celular .superadmin-ficha .h-lista > li > .h-btn { flex: 1 1 100%; }
  .h-celular .superadmin-ficha .superadmin-form { grid-template-columns: minmax(0, 1fr); }

  /* Interruptores de 48 px con texto: los módulos y lo que ve cada uno (toda la fila se toca). */
  .h-celular .superadmin-interruptores { display: grid; }
  .h-celular .superadmin-interruptor { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-weight: 400; }
  .h-celular .superadmin-interruptor:last-child { border-bottom: 0; }
  .h-celular .superadmin-interruptor > span { display: grid; min-width: 0; }
  .h-celular .superadmin-interruptor small { font-size: 14px; line-height: 20px; color: var(--muted); }
  .h-celular .superadmin-paquetes .h-chip { white-space: normal; text-align: left; }
  /* Cada persona o rol de «Qué ve cada rol», plegado dentro de la sección. */
  .h-celular .superadmin-roles { display: grid; border-top: 1px solid var(--border); }
  .h-celular .superadmin-roles .superadmin-interruptores { padding-left: var(--space-3); border-left: 2px solid var(--border); }
}


/* ─── Estado de la plataforma (P-67) y el soporte de la ficha (P-33a) ───
   Las pestañas del panel, y cada parte del estado en su panel: el título con su estado en
   una palabra, el resumen y lo que lo explica. Los errores y la línea del simulacro se
   cortan donde haga falta (traen rutas y nombres largos). */
.superadmin-vistas { margin-bottom: calc(-1 * var(--space-2)); }
.superadmin-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; }
.superadmin-parte { display: grid; gap: var(--space-3); min-width: 0; }
.superadmin-parte[data-parte="fallidos"], .superadmin-parte[data-parte="entradas"] { grid-column: 1 / -1; }
.superadmin-parte__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.superadmin-parte__res { margin: 0; }
.superadmin-parte .h-lista > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.superadmin-parte .h-lista > li:last-child { border-bottom: 0; }
.superadmin-error, .superadmin-linea { overflow-wrap: anywhere; }
.superadmin-ficha .superadmin-fallidos .h-lista__txt { flex: 1 1 0; }
.superadmin-pie { margin: 0; }
@media (max-width: 760px) {
  .h-celular .superadmin-vistas { margin-bottom: 0; }
  .h-celular .superadmin-vistas .h-tab { flex: 1 1 0; justify-content: center; white-space: normal; text-align: center; }
  .h-celular .superadmin-parte .h-table--tarjetas tr { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3); }
  .h-celular .superadmin-parte .h-table--tarjetas td { flex: 1 0 100%; }
}
/* Comprobar WhatsApp en la ficha (P-24). */
.superadmin-comprobado > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.superadmin-comprobado small { overflow-wrap: anywhere; }
/* P-37: el enlace al código de recuperación, debajo del código de la app. */
.superadmin-recuperacion { justify-self: start; min-height: 48px; text-align: left; }
/* La lista de arranque (P-35): el estado y, en lo que se marca a mano, su selector. */
.superadmin-arranque .h-lista__txt { flex: 1 1 0; min-width: 0; }
.superadmin-arranque-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.superadmin-arranque-marca { width: auto; min-width: 12rem; }
.superadmin-dominios .superadmin-dominio-res { flex: 1 0 100%; overflow-wrap: anywhere; }
.superadmin-dominios .superadmin-dominio-res:empty { display: none; }
@media (max-width: 480px) {
  .superadmin-arranque .h-lista__txt { flex-basis: 100%; }
  .superadmin-arranque-estado { justify-content: flex-start; }
  .superadmin-arranque-marca { flex: 1 1 100%; }
}