/* ================================================================
   ADMIN — Panel de gestión
   Reskin con la paleta y radios de la Vitrina (vitrina.css).
   Mismos selectores/IDs que el original: admin.js no se toca.
   ================================================================ */
 
#admin-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--vtx);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}
 
.admin-panel { display: none; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 20px 60px; }
.admin-panel.activo { display: flex; flex-direction: column; gap: 12px; }
/* Mismo ancho de lectura que las páginas-formulario (.fx-form-cols, ver
   utilidades.css): a pantalla completa los campos se estiraban a 1400px
   y un "Nombre" de tres letras ocupaba todo el monitor. El contenedor
   sigue siendo el que scrollea, así la barra queda pegada a la derecha y
   no flotando al medio. */
.admin-panel.activo > * {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Secciones de un panel del admin (Mi Empresa → Datos/Ubicación/...,
   Portada → Aviso superior/Banners/..., Agenda, Catálogo). Se ve UNA a la
   vez: las .sb-opcion del sidebar (index.html) eligen cuál, y
   _aplicarSeccionVisible (admin.js) esconde las demás.

   Antes se apilaban todas y se plegaban con un chevron. Con seis
   secciones por pestaña eso era una página larguísima donde el sidebar
   nombraba lo que igual había que buscar con scroll, así que la cabecera
   volvió a ser un título y dejó de ser un botón. */
/* Tarjeta, como el .admin-form de la ficha de producto: la sección
   estaba suelta sobre el fondo y no se leía como un bloque. */
.admin-seccion {
  animation: asomarse 0.2s var(--ease-apple);
  background: var(--vs);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  padding: 18px;
}
/* Sin tarjeta: la sección no lleva fondo, borde ni esquinas redondeadas.
   Encerrar en una caja lo único que hay en pantalla no separaba de nada —
   solo metía un margen de más y le quitaba ancho a los campos. Lo que
   marca dónde empieza es la línea de abajo del título.

   Tampoco lleva overflow:hidden: lo pedía el plegado por max-height, que
   ya no existe, y recortaba el desplegable del buscador de giros del SII
   (.autocomplete-lista, posicionado absoluto y más alto que el campo). */
.admin-seccion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--vbor2);
  text-align: left;
}
.admin-seccion-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--va);
  font-size: 15px;
  font-weight: 700;
}
.admin-seccion-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chips clickeables (el nombre ES el botón) para elegir a qué productos
   se vincula un estado del Catálogo — reemplazan los checkboxes+label,
   que se veían desordenados. Mismo look redondeado que los chips de
   solo-lectura de la lista (ver _htmlListaCatalogoSeguimiento en
   admin.js), pero interactivos: se destacan con el color de acento al
   seleccionarlos. */
.chip-toggle {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--vbor2);
  background: var(--vs2);
  color: var(--txt-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
}
.chip-toggle:hover { border-color: var(--va); color: var(--vtx2); }
.chip-toggle.selected {
  background: var(--vag2);
  border-color: var(--va);
  color: var(--va);
}
.chip-toggle.chip-todos.selected {
  background: var(--va);
  border-color: var(--va);
  color: #0c0c0c;
}
.chips-productos { transition: opacity 0.2s var(--ease-apple); }
.chips-productos.chips-deshabilitados { opacity: 0.35; pointer-events: none; }

/* Grupos de la lista de Estados de Seguimiento (ver
   _htmlListaCatalogoSeguimiento en admin.js): separa visualmente los
   estados que aplican a "Todos los productos" de los vinculados a un
   producto puntual, en vez de repetir el mismo chip en cada tarjeta. */
.admin-grupo-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt-sub);
  padding: 0 2px 8px;
}
.admin-grupo-tarjetas,
.admin-lista { display: flex; flex-direction: column; gap: 10px; }
 
 
.admin-card {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple);
  animation: surgir 0.3s var(--ease-apple) both;
  animation-delay: min(calc(var(--i, 0) * 30ms), 300ms);
}
/* Empresa registrada por autoservicio, esperando aprobación — ver
   renderizarEmpresas/aprobarEmpresaUI en admin.js. */
.admin-card-pendiente {
  border-color: #ffd54f;
  background: rgba(255, 213, 79, 0.06);
}
 
.admin-card:hover {
  border-color: var(--vbor2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
 
.admin-card-info { flex: 1; }
.admin-card-titulo { font-size: 14px; font-weight: 700; color: var(--vtx); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-card-sub { font-size: 12px; color: var(--txt-sub); }
 
.admin-card-btns { display: flex; gap: 6px; flex-shrink: 0; }
 
/* La misma pastilla para el plan de una empresa y el rol de un usuario.
   Lo que cambia entre una y otra es el color, y ese va aparte: el del rol
   por clase (más abajo) y el del plan inline, desde la columna "color". */
.badge-plan,
.badge-rol {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* El color de cada badge ya no es una clase fija por plan — viene del
   color guardado en "planes" (columna "color") y se aplica inline con
   _hexToRgba(), mismo patrón que los estados de Catálogo. Así un plan
   nuevo (con cualquier código) sale con su propio color sin tener que
   tocar este CSS cada vez. */

/* Menú ⋮ de una .admin-card (Editar / Duplicar / Eliminar), mismo
   concepto que el menú ⋮ de la grilla de productos (vitrina.js) pero
   propio de acá: dropdown por tarjeta en vez de un único elemento
   reposicionado, más simple porque estas listas de admin son cortas. */
.admin-card-menu { position: relative; flex-shrink: 0; }
.admin-card-menu-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--vbor);
  background: var(--vs2); color: var(--vtx2); display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: background 0.15s var(--ease-apple);
}
.admin-card-menu-btn:hover { background: var(--vbor); color: var(--vtx); }
.admin-card-menu-dropdown {
  /* Lo compartido está en .fx-menu-anclado (utilidades.css). */
  background: var(--vs2);
  min-width: 150px;
  z-index: 20;
}
.admin-card-menu-dropdown.oculto { display: none; }
.admin-card-menu-dropdown button {
  background: none; border: none; text-align: left; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--vtx); cursor: pointer; transition: background 0.15s var(--ease-apple);
}
.admin-card-menu-dropdown button:hover { background: var(--vbor); }
.admin-card-menu-dropdown button.admin-card-menu-danger { color: var(--color-rojo, #ef5350); }

.badge-rol.admin    { background: var(--vag2); color: var(--va); }
.badge-rol.empleado { background: rgba(74,222,128,0.14); color: var(--vgrn); }
.badge-rol.super    { background: rgba(255,213,79,0.14);  color: var(--color-amarillo); }
 
.badge-activo   { color: var(--vgrn); font-size: 12px; font-weight: 600; }
.badge-inactivo { color: var(--vred); font-size: 12px; font-weight: 600; }
 
.admin-form {
  background: var(--vs);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: asomarse 0.2s var(--ease-apple);
}
.admin-form.cerrando {
  animation: despedirse 0.16s var(--ease-apple) forwards;
}
 
.admin-form h3 { color: var(--va); font-size: 15px; font-weight: 700; margin-bottom: 2px; }
 
/* textarea entra en la lista desde que los campos de texto de estos
   formularios son <textarea class="autogrow-input"> — si no, quedaban sin
   fondo ni borde al lado de sus propios <select>. */
.admin-form input,
.admin-form select,
.admin-form textarea {
  background: var(--vs2);
  border: 1px solid var(--vbor);
  color: var(--vtx2);
  border-radius: var(--r);
  transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.admin-form input[type="time"],
.admin-form input.fx-hora-24 {
  color-scheme: dark;
  color: var(--vtx2);
  -webkit-text-fill-color: var(--vtx2);
}
.admin-form input[type="time"]:disabled,
.admin-form input.fx-hora-24:disabled {
  opacity: 0.5;
  -webkit-text-fill-color: var(--txt-tenue);
  color: var(--txt-tenue);
}
.admin-form select option { background: var(--vs2); color: var(--vtx2); }
 
.select-rol {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid var(--vbor2);
  background: var(--vs2);
  color: var(--vtx2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.select-rol:hover:not(:disabled) { border-color: var(--va); }
.select-rol:focus { outline: none; border-color: var(--va); box-shadow: var(--shadow-focus-soft); }
.select-rol:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  color: var(--va);
  border-color: var(--vbor2);
}
.select-rol option { background: var(--vs2); color: var(--vtx2); }
 
.ops-bar-bg {
  width: 100%;
  height: 7px;
  background: var(--vag);
  border-radius: 4px;
  overflow: hidden;
}
.ops-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--va);
  transition: width 0.3s var(--ease-apple);
}
.ops-bar.warning { background: var(--color-amarillo); }
.ops-bar.danger  { background: var(--vred); }
/* ── Consola de superadmin ─────────────────────────────────────────
   Casi todo se reusa de las clases de Administración de más arriba
   (.admin-card, .admin-form, .badge-plan, .ops-bar) — acá solo lo que
   no existía: el estado vacío, la empresa desactivada y la línea de
   uso del plan dentro de cada tarjeta. */
/* .admin-vacio se movió a utilidades.css: la usan también la agenda y
   el carrito público, no solo el panel de administración. */

/* Empresa a la que se le cortó el servicio: se sigue viendo, pero
   apagada — no se esconde, porque justamente hay que poder encontrarla
   para volver a activarla. */
.admin-card-inactiva {
  opacity: 0.55;
  border-style: dashed;
}

.sa-uso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  max-width: 340px;
}
.sa-uso .ops-bar-bg { flex: 1; }
.sa-uso-texto {
  font-size: 11px;
  color: var(--txt-sub);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Solicitudes de alta: botones para abrir los documentos de
   verificación (bucket privado, se abren por URL firmada). */
.sa-sol-docs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.sa-sol-sin-doc {
  font-size: 11px;
  color: var(--vred);
  align-self: center;
}
.sa-nota {
  font-size: 12px;
  color: var(--txt-sub);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* ── Alta pública de empresa (/registro-empresa) ──────────────────
   El armazón de la página (columna centrada, título y bajada) se mudó a
   utilidades.css como .fx-form-*: lo comparte con el editor de producto,
   y con el nombre viejo parecía propiedad de esta pantalla. Acá queda
   solo lo que sí es suyo: la pantalla de "listo". */
/* "oculto" no tiene una regla global en el proyecto: cada componente
   define la suya. Sin estas dos, el bloque de "Solicitud enviada" se
   veía siempre —debajo del formulario, antes de enviar nada— y el
   formulario seguía visible después de enviar. */
.reg-emp-listo.oculto,
#reg-emp-form.oculto { display: none; }
/* La animación de resultado (el visto que se dibuja) vive en
   utilidades.css como .fx-resultado-*: la comparten el alta pública y el
   final del carrito público. */

/* Los filtros de estado usan .sb-opcion / .sb-opcion-cuenta
   (utilidades.css), compartidas con el resto de los sidebars. Acá solo
   queda lo propio de la consola. */

/* Contador de Solicitudes pendientes: mismo contador del sidebar pero en
   color de acento, porque acá sí es algo que requiere acción. */
.sa-cuenta-alerta { background: var(--va); color: #fff; }

/* Bandeja de contacto@fixhubtec.com (pestaña "Contacto" de la consola).
   3 columnas estilo Mail.app: el sidebar (#vit-sidebar-contacto,
   index.html) elige el buzón (Recibidos/Enviados), la lista de ese
   buzón vive en #sa-contacto-lista (columna propia acá adentro) y el
   correo abierto + responder ocupa el resto. cambiarConsolaTab
   (superadmin.js) muestra ese sidebar y esconde el de Empresas/Planes/
   Solicitudes mientras esta pestaña está activa. */
/* #superadmin-root no tenía altura/flex propios (a diferencia de
   #admin-root, arriba) — daba igual mientras todas las pestañas eran
   listas simples que scrolleaban como cualquier página, pero acá hace
   falta una altura real de la que colgar el scroll INTERNO de cada
   columna, dejando la respuesta siempre visible abajo; si no, la que
   terminaba scrolleando era la página entera. */
#superadmin-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.sa-tab-contacto-ancho.activo {
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.sa-tab-contacto-ancho.activo > * { max-width: 100%; }

.sa-contacto-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Botón "Nuevo correo" — mismo .btn-sm.btn-verde-bg del resto de FixHub,
   solo se ajusta a lo ancho del sidebar. */
.sa-contacto-nuevo-btn { width: 100%; justify-content: center; margin-bottom: 12px; }

/* ── Columna de lista (correos del buzón activo) ── */
.sa-contacto-lista-col {
  width: 320px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--vs2); border-right: 1px solid var(--vbor);
  /* Sin esto la lista de abajo no scrollea: un hijo flex mide por
     defecto al menos lo que ocupa su contenido (min-height:auto), así
     que esta columna crecía con la cantidad de correos, se pasaba del
     alto disponible y el ancestro con overflow:hidden le cortaba la
     cola — nunca aparecía la barra. Es la misma razón por la que
     .sa-contacto-layout ya traía min-height:0. */
  min-height: 0;
}
.sa-contacto-lista-header {
  flex-shrink: 0; padding: 16px 16px 10px; border-bottom: 1px solid var(--vbor);
}
.sa-contacto-lista-titulo { font-size: 20px; font-weight: 800; color: var(--vtx); }
.sa-contacto-lista-conteo { font-size: 12px; color: var(--txt-sub); margin-top: 2px; }
/* Va por ID y no por clase porque el elemento es
   <div id="sa-contacto-lista" class="admin-lista scroll-morado">: escrito
   como ".sa-contacto-lista" esta regla no le pegaba a nada, así que la
   lista se quedaba solo con .admin-lista (un flex column sin flex:1 ni
   overflow) y por eso NUNCA scrolleaba — crecía con la cantidad de
   correos hasta que el ancestro con overflow:hidden le cortaba la cola.
   min-height:0 hace falta igual: sin él, un hijo flex mide por defecto
   al menos lo que ocupa su contenido y el overflow no llega a activarse. */
#sa-contacto-lista { flex: 1; min-height: 0; overflow-y: auto; gap: 0; padding: 6px; }

/* Filas de correo en la lista, estilo Mail.app: punto de no leído en su
   propia columna a la izquierda, remitente+fecha arriba, asunto, preview
   de 1 línea abajo. La fila activa es una "pastilla" completa (radio en
   las 4 esquinas, con margen alrededor) en vez de solo cambiar el fondo
   de punta a punta. */
.sa-hilo-card {
  display: flex; gap: 8px;
  padding: 10px 10px;
  margin-bottom: 2px;
  border-radius: var(--rl);
  cursor: pointer;
  transition: background 0.1s var(--ease-apple);
}
.sa-hilo-card:hover { background: var(--vbor); }
.sa-hilo-card.activo { background: var(--va); }
.sa-hilo-card.activo .sa-hilo-email,
.sa-hilo-card.activo .sa-hilo-fecha,
.sa-hilo-card.activo .sa-hilo-asunto,
.sa-hilo-card.activo .sa-hilo-preview { color: #fff; }
.sa-hilo-punto {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: transparent;
}
.sa-hilo-card.no-leido .sa-hilo-punto { background: var(--va); }
.sa-hilo-card.activo.no-leido .sa-hilo-punto { background: #fff; }
.sa-hilo-contenido { flex: 1; min-width: 0; }
.sa-hilo-fila-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sa-hilo-email { font-size: 13px; font-weight: 700; color: var(--vtx); overflow-wrap: anywhere; }
.sa-hilo-fecha { font-size: 11px; color: var(--txt-sub); flex-shrink: 0; }
.sa-hilo-asunto { font-size: 12px; color: var(--vtx2); margin-top: 2px; overflow-wrap: anywhere; }
.sa-hilo-preview {
  font-size: 12px; color: var(--txt-sub); margin-top: 2px; overflow-wrap: anywhere;
}

.sa-contacto-detalle {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sa-contacto-mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px 0;
}
.sa-contacto-vacio { color: var(--txt-sub); font-size: 13px; padding: 20px; text-align: center; }

/* Barra "Bandeja" + paginador — solo existe en pantalla angosta, ver
   @media más abajo. En desktop las dos columnas conviven y se ve el
   hilo completo de un tirón, así que acá arriba queda escondida. */
.sa-contacto-topbar { display: none; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sa-contacto-volver {
  display: flex; align-items: center; gap: 2px;
  background: none; border: none; color: var(--va);
  font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 0;
}
/* Flechas arriba/abajo para moverse entre los mensajes del hilo de a
   uno (ver _moverMensajeContacto, superadmin.js) — mismo par de botones
   apilados que usa Mail.app en el teléfono. Vacío (sin hijos) cuando el
   hilo tiene un solo mensaje, no hace falta paginar. */
.sa-contacto-paginador { display: flex; border-radius: 999px; overflow: hidden; background: var(--vs2); }
.sa-paginador-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--vtx2); cursor: pointer; font-size: 16px;
}
.sa-paginador-btn:disabled { color: var(--txt-sub); opacity: 0.4; cursor: default; }
.sa-paginador-btn:not(:disabled):hover { background: var(--vbor); }
.sa-paginador-btn:first-child { border-right: 1px solid var(--vbor); }

/* La lista de hilos (320px fijos) más el correo abierto no entran juntos
   en una pantalla de teléfono — antes se apretaban tanto que el
   contenido del correo quedaba invisible. En vez de encogerlos, se
   muestra UNA columna a la vez (como Mail.app en el teléfono): la lista
   ocupa toda la pantalla, y al abrir un correo pasa a ocupar toda la
   pantalla ella, con un botón para volver. abrirHiloContacto /
   mostrarComposeContacto agregan la clase sa-mostrando-detalle
   (superadmin.js); _volverListaContacto la saca. */
@media (max-width: 700px) {
  .sa-contacto-layout { position: relative; overflow: hidden; }
  .sa-contacto-lista-col { width: 100%; }
  .sa-contacto-detalle {
    position: absolute; inset: 0;
    background: var(--v1);
    display: none;
  }
  .sa-contacto-layout.sa-mostrando-detalle .sa-contacto-lista-col { display: none; }
  .sa-contacto-layout.sa-mostrando-detalle .sa-contacto-detalle { display: flex; }
  .sa-contacto-topbar { display: flex; padding: 12px 16px 0; }
  .sa-contacto-mensajes { padding: 8px 16px 0; }

  /* El remitente ya se ve en la cabecera de cada mensaje (con avatar y
     fecha) — repetirlo acá arriba era decir dos veces lo mismo y le
     robaba espacio a la pantalla. */
  .sa-hilo-header-meta { display: none; }

  /* La fecha baja a su propia línea, alineada bajo el remitente: con
     ella al lado, a una dirección larga le quedaban ~80px de ancho y se
     partía letra por letra. */
  .sa-mensaje-cabecera { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
  .sa-mensaje-avatar { width: 30px; height: 30px; font-size: 11px; }
  .sa-mensaje-fecha { flex-basis: 100%; padding-left: 38px; }

  /* Cuerpo a lo ancho completo, sin marco: en el teléfono el correo se
     escala a lo que le quede de ancho, así que cada píxel de borde y
     padding lo hacía verse más chico. Sin marco además queda igual que
     Mail del iPhone, que muestra el correo de lado a lado. */
  .sa-mensaje-cuerpo { border: none; padding: 0; }

  /* Título del correo abierto, grande y sin timidez — como el
     encabezado de Mail.app en el teléfono (el asunto ES el título de
     la pantalla, no un subtítulo chico). */
  .sa-hilo-header { padding: 4px 0 18px; margin-bottom: 12px; }
  .sa-hilo-header-asunto { font-size: 26px; line-height: 1.15; }
}

/* Cabecera del hilo abierto: asunto grande + de/para, como el encabezado
   de un correo abierto en Mail.app. */
.sa-hilo-header { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--vbor); }
.sa-hilo-header-asunto { font-size: 22px; font-weight: 800; color: var(--vtx); margin: 0 0 4px; overflow-wrap: anywhere; }
.sa-hilo-header-meta { font-size: 12px; color: var(--txt-sub); }

/* Cada mensaje del hilo: una fila de cabecera (avatar + remitente/Para +
   fecha) y debajo el cuerpo a lo ancho completo, como un correo abierto
   en Mail.app. El avatar va en la cabecera y no como columna a la
   izquierda de todo justamente para no robarle ancho al cuerpo. El
   propio (saliente) lleva el borde en el color de acento para
   distinguirlo de un vistazo. */
.sa-mensaje-tarjeta { margin-bottom: 16px; }
.sa-mensaje-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  background: var(--vbor2);
}
.sa-mensaje-tarjeta.saliente .sa-mensaje-avatar { background: var(--va); }
.sa-mensaje-cuerpo {
  min-width: 0;
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 12px 14px;
}
.sa-mensaje-tarjeta.saliente .sa-mensaje-cuerpo { border-color: var(--va); }
.sa-mensaje-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* min-width:0 + overflow-wrap: una dirección larga
   (support@bupaseguros.zendesk.com) es una sola "palabra" sin espacios;
   sin esto el bloque se niega a achicarse y empuja toda la fila para el
   costado, dejando la columna con scroll horizontal. */
.sa-mensaje-quien { flex: 1; min-width: 0; }
.sa-mensaje-remitente { font-size: 13px; font-weight: 700; color: var(--vtx); overflow-wrap: anywhere; }
.sa-mensaje-para { font-size: 11px; color: var(--txt-sub); margin-top: 1px; overflow-wrap: anywhere; }
.sa-mensaje-fecha { font-size: 11px; color: var(--txt-sub); flex-shrink: 0; white-space: nowrap; }
/* overflow-wrap: un texto sin espacios (una URL larga, o HTML crudo
   pegado como texto — ver el mensaje de antes del arreglo del parser)
   podía empujar toda la pantalla para el costado en el teléfono; sin
   esto pre-wrap no corta una palabra que no tiene dónde. */
.sa-mensaje-texto { font-size: 13px; color: var(--vtx); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* Correos que solo vienen en HTML (marketing, avisos automáticos) — ver
   _ajustarAltoIframeContacto (superadmin.js). Fondo blanco a propósito:
   la inmensa mayoría de las plantillas de correo están diseñadas para
   verse sobre blanco, y se ven rotas sobre el fondo oscuro del panel. */
/* El wrapper es el que ocupa lugar en el layout y recorta: el iframe de
   adentro va a su ancho natural y se encoge con transform (que no ocupa
   lugar), así que el alto real lo pone _ajustarIframeContacto. */
.sa-mensaje-html-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--rl) - 4px);
  background: #fff;
}
.sa-mensaje-html-frame {
  width: 100%;
  min-height: 80px;
  border: none;
  display: block;
  background: #fff;
  transform-origin: top left;
}
.sa-mensaje-vermas {
  background: none; border: none; padding: 0; margin-top: 8px;
  font-size: 12px; color: var(--va); cursor: pointer;
}
.sa-mensaje-cita {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--vbor);
  font-size: 12px; color: var(--txt-sub); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
}
.sa-mensaje-cita.oculto { display: none; }

/* Botón "Nuevo correo", arriba del todo en el sidebar de Contacto. */
.sa-contacto-nuevo-btn { width: 100%; justify-content: center; margin-bottom: 10px; }

/* "Para"/"Asunto" de un correo nuevo (mostrarComposeContacto) — mismo
   ancho de lectura que el resto del panel, así queda arriba del cuadro
   de texto sin ensancharse. */
.sa-contacto-compose-campos {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 20px 0;
}
.sa-contacto-compose-campos.oculto { display: none; }
.sa-contacto-compose-campos input {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  color: var(--vtx);
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-input);
}

/* El borde de arriba lo lleva la caja y no la fila: entre la lista de
   adjuntos y el cuadro de texto no va ninguna línea, son lo mismo. */
.sa-contacto-responder-caja { border-top: 1px solid var(--vbor); }
.sa-contacto-responder {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 14px 24px;
}

/* ── Adjuntar archivos a un correo ── */
.sa-contacto-clip {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  color: var(--txt-sub);
  font-size: 17px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sa-contacto-clip:hover { color: var(--va); border-color: var(--vbor2); }
.sa-contacto-clip.tiene-archivos { color: var(--va); border-color: var(--vbor2); }

.sa-contacto-adjuntos {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 24px 0;
}
.sa-contacto-adjuntos.oculto { display: none; }
.sa-contacto-adjunto-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 260px;
  padding: 5px 8px 5px 10px;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  font-size: 12px; color: var(--vtx);
}
.sa-contacto-adjunto-nombre { overflow-wrap: anywhere;
}
.sa-contacto-adjunto-peso { color: var(--txt-sub); flex: 0 0 auto; }
.sa-contacto-adjunto-quitar {
  flex: 0 0 auto;
  background: none; border: none; padding: 0;
  color: var(--txt-sub); cursor: pointer; font-size: 14px; line-height: 1;
}
.sa-contacto-adjunto-quitar:hover { color: var(--vred); }

/* Los archivos que ya viajaron en un correo del hilo. */
.sa-mensaje-adjuntos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--vbor);
}
.sa-mensaje-adjunto {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px;
  padding: 5px 10px;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  font-size: 12px; color: var(--vtx);
  cursor: pointer;
}
.sa-mensaje-adjunto:hover { border-color: var(--vbor2); color: var(--va); }
/* El adjunto de un correo automático se nombra pero no se abre: el
   archivo no quedó guardado (ver _htmlAdjuntosMensaje en superadmin.js). */
.sa-mensaje-adjunto-solo-nombre { cursor: default; color: var(--vtx2); }
.sa-mensaje-adjunto-solo-nombre:hover { border-color: var(--vbor); color: var(--vtx2); }
.sa-mensaje-adjunto span { overflow-wrap: anywhere;
}

/* Una imagen adjunta se muestra, no se nombra: el nombre de archivo de
   una foto ("IMG_4821.HEIC", un uuid) no dice nada de lo que hay dentro. */
.sa-mensaje-adjunto-foto {
  width: 92px; height: 92px;
  padding: 0; overflow: hidden;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  cursor: pointer;
}
.sa-mensaje-adjunto-foto:hover { border-color: var(--va); }
.sa-mensaje-adjunto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-contacto-responder textarea {
  flex: 1;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  color: var(--vtx);
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
}


/* ── Cupo de usuarios del plan ──
   El botón "Nuevo usuario" con el contador al lado: se lee de un vistazo
   cuánta gente más entra antes de tener que cambiar de plan. */
.admin-cupo-usuarios {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  align-self: flex-start;
}
.admin-cupo-texto {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
/* Cuando ya no cabe nadie deja de ser un dato al pasar y pasa a ser el
   motivo por el que el botón de al lado está apagado. */
.admin-cupo-lleno {
  color: var(--color-accent);
  font-weight: 700;
}

/* ── "Tu plan" (Mi Empresa) ──
   El plan que el taller le paga a FixHub. La cabecera pone el nombre y
   el precio a la izquierda y el estado del cobro a la derecha, que es lo
   que uno viene a mirar: si está al día o si hay algo que arreglar. */
.me-plan-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.me-plan-nombre {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.3px;
}
.me-plan-precio {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.me-plan-estado {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.me-plan-ok        { color: #81c784; border-color: rgba(129,199,132,.4); background: rgba(129,199,132,.1); }
.me-plan-pendiente { color: #ffd54f; border-color: rgba(255,213,79,.4);  background: rgba(255,213,79,.1); }
.me-plan-alerta    { color: #ff8a80; border-color: rgba(255,138,128,.4); background: rgba(255,138,128,.1); }

.me-plan-nota {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
.me-plan-nota-alerta { color: #ff8a80; }

.me-plan-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Aviso de suscripción de prueba. Deliberadamente feo y llamativo: una
   suscripción de juguete que se vea como una real es justo la confusión
   que el modo prueba vino a evitar. */
.me-plan-prueba {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 213, 79, .45);
  background: rgba(255, 213, 79, .12);
  color: #ffd54f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.me-plan-btn-prueba {
  border-color: rgba(255, 213, 79, .45) !important;
  color: #ffd54f !important;
}

/* Publicar los planes en Flow, arriba de la lista de planes de la
   consola. La nota va al lado y no debajo: lo que hay que entender es
   que publicar no cobra nada, y eso se lee antes de apretar. */
.sa-flow-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sa-flow-nota {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
}
.sa-flow-prueba {
  border-color: rgba(255, 213, 79, .45) !important;
  color: #ffd54f !important;
}

/* La tarjeta cuyo menú ⋮ está abierto. El dropdown se muda a la raíz con
   position:fixed para no quedar recortado por el scroll de la lista, y al
   soltarse del DOM de su tarjeta deja de verse de quién es: flota entre
   dos y parece de cualquiera. Esto lo ata de vuelta. */
.admin-card-con-menu {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 18px rgba(206, 147, 216, .22);
}

/* Flechas para ordenar los planes. Van pegadas al ⋮, en la misma
   columna de acciones de la tarjeta. */
.sa-plan-orden {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 2px;
}
.sa-plan-flecha {
  width: 24px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--color-border, #303030);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all .15s ease;
}
.sa-plan-flecha:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* Apagada y no escondida: si aparecen y desaparecen, los botones
   bailan de lugar cada vez que se reordena. */
.sa-plan-flecha:disabled {
  opacity: .25;
  cursor: default;
}

/* ── Tarjeta + su formulario de edición, como una sola pieza ──
   El form se inserta justo después de la tarjeta, pero con el hueco de
   .admin-lista en medio se leía como un bloque suelto entre dos tarjetas.
   Se le come el hueco y se les borra el borde que los separaba: quedan
   unidos por la costura, y el acento dice cuál es la tarjeta editada.
   Mismo criterio que .admin-card-con-menu. */
.admin-card-editandose {
  border-color: var(--color-accent) !important;
  border-bottom-color: transparent !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -10px; /* el gap de .admin-lista */
}
.admin-form-pegado {
  border-color: var(--color-accent);
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* El código del plan: se arma solo desde el nombre y vive como un dato a
   la vista, no como un campo más que llenar. El input aparece solo si
   alguien pide cambiarlo. */
.sa-plan-codigo-linea {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sa-plan-codigo-linea code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--vtx2);
}
.sa-plan-codigo-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--va);
  cursor: pointer;
  text-decoration: underline;
}
#sa-plan-codigo-caja { margin-top: 6px; }

/* ── Respaldos (consola) ── */
.sa-respaldo-card { align-items: flex-start; }
.sa-respaldo-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--vs2);
  padding: 1px 5px;
  border-radius: 5px;
}
.sa-respaldo-esperando { color: var(--txt-sub); font-size: 13px; }

/* El detalle tabla por tabla. Un respaldo al que le falta media base se
   ve igual de bien que uno completo hasta el día que hay que usarlo:
   esto es para poder mirarlo y creerle. */
.sa-respaldo-detalle {
  margin-top: 12px;
  border: 1px solid var(--vbor);
  border-radius: var(--rm, 10px);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.sa-respaldo-titulo {
  padding: 8px 12px;
  background: var(--vs2);
  font-weight: 600;
  font-size: 13px;
  position: sticky;
  top: 0;
}
.sa-respaldo-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--vtx2);
  border-top: 1px solid var(--vbor);
}
.sa-respaldo-fila span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--vtx);
}
/* Vacía puede ser normal (una tabla que todavía nadie usó); con error,
   no: ahí faltan datos de verdad. */
.sa-respaldo-vacia { opacity: 0.55; }
.sa-respaldo-mal { color: var(--vred); }
.sa-respaldo-mal span:last-child { color: var(--vred); }

/* Nota explicativa dentro de un formulario de admin. */
.admin-form-nota {
  font-size: 13px;
  color: var(--txt-sub);
  line-height: 1.5;
  margin: -4px 0 4px;
}
.admin-form-nota-alerta { color: var(--color-amarillo); }

/* ── Pagar por transferencia (Mi empresa › Tu plan) ──
   Va debajo de los botones del plan y separado por una línea: es otra
   forma de pagar, no otro botón más de la misma fila. */
.me-plan-transferencia {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vbor);
}
.me-plan-transferencia .oculto { display: none; }

/* Los datos de la cuenta: etiqueta a la izquierda, dato a la derecha y en
   negrita, que es lo que uno copia. */
.me-cuenta {
  margin-top: 12px;
  background: var(--vs2);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.me-cuenta-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
}
.me-cuenta-fila span { color: var(--txt-sub); }
.me-cuenta-fila strong {
  color: var(--vtx);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
  /* El número de cuenta se copia a mano: que se pueda seleccionar sin
     arrastrar media pantalla. */
  user-select: all;
}

/* El RUT y la cuenta de gente, al lado del nombre de la empresa en
   Consola › Usuarios: contexto, no título. */
.sa-usuarios-rut {
  font-size: 12px;
  font-weight: 500;
  color: var(--vtx3);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Permisos de productos de un trabajador ────────────────────────
   El panel que abre "Permisos" en el menú ⋮ de un usuario: los toggles
   arriba y, debajo, lo que la persona hizo con ellos. Ver
   abrirPermisosUsuario en admin.js. */
.admin-permiso-fila {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  background: var(--vs2);
  cursor: pointer;
}
.admin-permiso-fila input { margin-top: 3px; flex-shrink: 0; }
.admin-permiso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-permiso-nombre { font-size: 14px; color: var(--txt-cuerpo); }
.admin-permiso-nota   { font-size: 12px; color: var(--txt-sub); }

.admin-actividad {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--vbor);
}
.admin-actividad-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-titulo);
  margin-bottom: 8px;
}
.admin-actividad-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.admin-actividad-vacio { font-size: 13px; color: var(--txt-sub); }
.admin-actividad-item {
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--vs2);
  font-size: 13px;
}
.admin-actividad-linea { color: var(--txt-cuerpo); }
.admin-actividad-fecha { font-size: 11px; color: var(--txt-sub); margin-top: 2px; }
.admin-actividad-cambio {
  font-size: 12px;
  color: var(--txt-sub);
  margin-top: 4px;
}
.admin-actividad-antes   { text-decoration: line-through; }
.admin-actividad-despues { color: var(--txt-cuerpo); }