/* ================================================================
   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; }
/* El total de una carpeta que no pide nada: Enviados, Archivados,
   Basurero. Mismo tamaño que el de no leídos pero sin color de aviso —
   si los cuatro números se vieran iguales, el de Recibidos dejaría de
   destacar y es el único que realmente avisa algo. */
.sa-cuenta-suave {
  background: rgba(255,255,255,0.09);
  color: var(--txt-sub);
  font-weight: 600;
}

/* 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; }

/* ── Marcar varios correos ──────────────────────────────────────────
   La casilla de cada tarjeta. Siempre visible y no solo al pasar el
   mouse: si hay que descubrirla moviendo el cursor encima, la mitad de
   las veces no se descubre. Discreta mientras no se use —opacidad
   baja— y entera en cuanto hay algo marcado. */
.sa-hilo-check {
  flex-shrink: 0;
  margin: 3px 0 0;
  width: 15px; height: 15px;
  accent-color: var(--va);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s var(--ease-apple);
}
.sa-hilo-card:hover .sa-hilo-check,
.sa-hilo-check:checked,
.sa-hilo-check:focus-visible { opacity: 1; }
/* El marcado se ve sin pelearle al correo abierto: con las dos clases
   juntas manda "activo", que ya pinta la tarjeta entera y su texto en
   blanco — un segundo fondo encima dejaría letras blancas sobre claro. */
.sa-hilo-card.marcado:not(.activo) { background: color-mix(in srgb, var(--va) 16%, transparent); }

/* La barra de "N seleccionados", bajo el título de la lista. */
.sa-contacto-seleccion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--vbor);
}
/* No hay .oculto global en el programa: cada componente declara el suyo. */
.sa-contacto-seleccion.oculto { display: none; }
.sa-sel-cuenta { font-size: 12px; font-weight: 700; color: var(--vtx); }
/* "Todos" y "Ninguno" son enlaces y no botones a propósito: al lado de
   Archivar y Borrar, dos pastillas más confunden cuál es la acción. */
.sa-sel-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--color-accent); cursor: pointer;
}
.sa-sel-link:hover { text-decoration: underline; }
/* Las acciones a la derecha, separadas de los contadores. */
.sa-sel-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.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; }

/* A cuál de las dos casillas escribieron (fixhubtec.com / fixhubpos.com).
   Discreta a propósito: es un dato para ordenarse, no el titular de la
   tarjeta — lo que importa sigue siendo quién escribió y qué dice. */
.sa-hilo-casilla {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--vbor2);
  color: var(--txt-sub);
}

/* El nombre de la cuenta arriba de sus buzones, como el de iCloud o el de
   Gmail en Mail: no es un botón, es el rótulo de lo que viene abajo. */
/* Ahora es un botón: pliega su grupo. Mantiene el mismo aspecto de
   etiqueta que tenía como texto —nadie pidió que se viera distinto— y
   solo gana el chevron y el cursor. */
.sa-buzon-cuenta {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px 4px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--txt-sub);
  cursor: pointer;
}
.sa-buzon-cuenta:hover { color: var(--vtx2); }
.sa-buzon-chevron {
  font-size: 13px;
  transition: transform 0.15s var(--ease-apple);
}
/* Plegado: el chevron apunta a la derecha y los buzones no existen en la
   página. display:none y no height:0 — un grupo plegado no debe dejar
   hueco ni seguir siendo tabulable. */
.vit-sb-section.sa-grupo-plegado .sa-buzon-chevron { transform: rotate(-90deg); }
.vit-sb-section.sa-grupo-plegado > .vit-sb-section-btn { display: none; }
.sa-hilo-asunto { font-size: 12px; color: var(--vtx2); margin-top: 2px; overflow-wrap: anywhere; }
/* Dos renglones y no más. Un correo de publicidad trae el cuerpo entero
   —con URLs de seguimiento de mil caracteres— y sin tope la tarjeta se
   estiraba una pantalla completa, tapando los correos de abajo. Esto es
   una vista previa: el texto completo está a un clic, adentro del hilo. */
.sa-hilo-preview {
  font-size: 12px; color: var(--txt-sub); margin-top: 2px; overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Y el asunto, dos: es el titular de la tarjeta, no el correo entero. */
.sa-hilo-asunto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.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. En el teléfono queda solo el asunto,
     que es lo que dice de qué es el hilo. */
  .sa-hilo-header-meta { display: none; }
  .sa-hilo-campo:not(:last-child) { display: none; }
  .sa-hilo-campo-etiqueta { display: none; }
  .sa-hilo-campo-valor { font-size: 17px; }

/* Archivar / Borrar / Restaurar, en la cabecera del correo abierto. Al
   lado del asunto y no escondidas en un menú: son las dos cosas que uno
   hace con un correo después de leerlo. */
.sa-hilo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sa-hilo-accion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--vbor2);
  background: transparent;
  color: var(--txt-cuerpo);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), border-color 0.15s var(--ease-apple);
}
.sa-hilo-accion:hover { background: rgba(255,255,255,0.06); border-color: var(--color-accent); }
/* Eliminar de verdad va en rojo: es la única sin vuelta atrás. */
.sa-hilo-accion.peligro { border-color: rgba(255,138,128,0.45); color: var(--color-rojo-suave, #ff8a80); }
.sa-hilo-accion.peligro:hover { background: rgba(255,138,128,0.12); border-color: rgba(255,138,128,0.6); }

  /* 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. */
/* Pegada arriba mientras se scrollea el hilo: el panel se abre en el
   último mensaje, así que sin esto el asunto y los botones de archivar y
   borrar quedan fuera de la pantalla justo cuando la conversación es
   larga — que es cuando uno más quiere archivarla. */
.sa-hilo-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg-panel, #1b1b1b);
  padding-top: 8px;
  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); }

/* De / Para / Asunto, cada uno con su etiqueta. Los datos a la
   izquierda y los botones a la derecha: así "Archivar" y "Borrar" dejan
   de estar metidos entre el asunto y las direcciones, que era donde
   menos se esperan. */
.sa-hilo-header-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sa-hilo-header-datos { flex: 1 1 260px; min-width: 0; }
.sa-hilo-campo {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Ancho fijo para que los tres valores arranquen en la misma columna:
   con el ancho automático, "Asunto" empujaba su valor más a la derecha
   que los otros dos y las tres filas quedaban escalonadas. */
.sa-hilo-campo-etiqueta {
  flex: 0 0 56px;
  color: var(--txt-sub);
  font-weight: 650;
}
.sa-hilo-campo-valor { flex: 1 1 auto; min-width: 0; color: var(--vtx2); }
/* El asunto —la última fila— es lo que identifica el hilo, así que pesa
   más que las dos direcciones de arriba. */
.sa-hilo-campo:last-child .sa-hilo-campo-valor {
  color: var(--vtx);
  font-weight: 700;
}
.sa-hilo-header-fila .sa-hilo-acciones { margin-top: 0; flex: 0 0 auto; }

/* 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. */
/* ── EL AVISO DEL PLAN QUE ELIGIÓ Y NO ACTIVÓ ──────────────────────
   Arriba del panel de plan, con el morado de la marca al borde: no es
   una advertencia —no hay nada mal— sino algo pendiente que el taller
   pidió. Ver _pintarSuscripcion en admin.js. */
.me-plan-deseado {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--vbor2);
  border-left: 3px solid var(--va);
  background: rgba(156, 77, 204, 0.07);
}
.me-plan-deseado p { margin: 0 0 12px; line-height: 1.5; }

/* ── PASAR A UN PLAN DE PAGO ───────────────────────────────────────
   La lista que aparece bajo el plan FREE. Ver _pintarPlanesParaElegir
   en admin.js. */
.me-planes-titulo {
  margin: 22px 0 10px;
  font-size: var(--fs-base);
  font-weight: 650;
  color: var(--vtx2);
}
/* Tarjetas, no renglones: es la misma decisión que se muestra en la
   portada, así que se muestra igual. Tres columnas que se acomodan
   solas —auto-fit con un mínimo— en vez de un número fijo, porque el
   panel vive dentro de una columna que cambia de ancho según la barra
   lateral. El minmax(0, 1fr) no es adorno: sin él una pista 1fr nunca
   baja del ancho de su contenido y el precio largo desborda la caja. */
.me-planes-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.me-plan-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--vbor2);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
/* El recomendado con el morado de la marca, como en la portada. */
.me-plan-tarjeta-destacada {
  border-color: var(--va);
  background: rgba(156, 77, 204, 0.06);
}
.me-plan-tarjeta .me-plan-cinta {
  position: absolute;
  top: -9px;
  left: 16px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--va);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
}
/* De acá para abajo son las MISMAS medidas que las tarjetas del alta
   (#vitp-registro-empresa .reg-plan-* en portada-pos.css). Son la misma
   decisión tomada en dos pantallas, y verlas distintas hace dudar de si
   son los mismos planes.

   Con la clase sola no basta: el panel ya trae un h5 grande y morado
   —el de los títulos de sección— y a igual especificidad ganaba ese por
   venir después. El nombre del plan es una etiqueta, no un título. */
.me-plan-tarjeta .me-plan-nombre {
  margin: 0;
  font-size: var(--letra-texto);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--vtx);
  text-transform: none;
}
/* TODO lo de la tarjeta va colgado de .me-plan-tarjeta, y no por gusto:
   el encabezado del panel —el "FREE / Sin costo" de más abajo en este
   mismo archivo— usa .me-plan-nombre y .me-plan-precio con los mismos
   nombres y está declarado DESPUÉS. A igual especificidad gana el de
   abajo, así que estas reglas no se aplicaban: el precio de la tarjeta
   salía con los 13px del encabezado. Colgarlas del contenedor las hace
   ganar por especificidad y deja de importar el orden. */
.me-plan-tarjeta .me-plan-precio {
  margin: 5px 0 0;
  font-size: var(--letra-destacada);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--txt-titulo);
  font-variant-numeric: tabular-nums;
}
/* Al lado del número y no debajo: en dos renglones el "al mes" se lee
   como una línea más de la tarjeta en vez de como la unidad del precio
   que tiene al lado. */
.me-plan-tarjeta .me-plan-precio small {
  display: inline;
  margin: 0 0 0 5px;
  font-size: var(--letra-texto);
  font-weight: 500;
  color: var(--vtx3);
  letter-spacing: 0;
}
/* Dos renglones reservados siempre: en angosto "$59.900 al año $71.880"
   se parte en dos y, sin el mínimo, cada tarjeta quedaba de un alto
   distinto y las líneas de abajo no calzaban entre columnas. */
.me-plan-tarjeta .me-plan-anual {
  margin: 4px 0 0;
  min-height: 2.4em;
  font-size: var(--letra-texto);
  color: var(--vtx3);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* El año en el celeste de la página, igual que en el alta y en la
   portada. El morado acá es del plan recomendado; si el precio anual
   también fuera morado, la tarjeta destacada dejaría de distinguirse. */
.me-plan-tarjeta .me-plan-anual strong { color: var(--pos-frio); font-weight: 700; }
.me-plan-tarjeta .me-plan-anual s { opacity: .6; margin-left: 4px; display: inline-block; }
/* Escondido pero ocupando: es justamente lo que se busca, así que
   visibility y no display. */
.me-plan-tarjeta .me-plan-anual-hueco { visibility: hidden; }
.me-plan-tarjeta .me-plan-linea {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: var(--letra-texto);
  color: var(--vtx3);
}
.me-plan-tarjeta .me-plan-linea i { color: var(--va); font-size: var(--icono-texto); }
/* El botón al fondo de la tarjeta, no pegado al texto: con el auto de
   arriba las tres filas de botones quedan a la misma altura aunque una
   tarjeta tenga una línea más. */
/* El botón de la tarjeta es la acción de esa tarjeta, así que ocupa el
   ancho entero y viene más alto que un .btn-sm de fila: esos están
   pensados para ir apretados al lado de otros, no para ser lo único que
   hay que apretar. */
.me-plan-tarjeta .me-plan-btn {
  width: 100%;
  margin-top: auto;
  padding: 9px 12px;
  font-weight: 600;
  white-space: normal;
}
/* Los que no son el recomendado: borde y nada de fondo. OJO, .btn-sm
   sola no trae fondo —solo forma y tamaño—, así que sin esto queda el
   rectángulo blanco por defecto del navegador sobre una pantalla
   oscura. */
.me-plan-tarjeta .me-plan-btn-borde {
  background: transparent;
  border: 1px solid var(--vbor2);
  color: var(--vtx);
}
.me-plan-tarjeta .me-plan-btn-borde:hover {
  border-color: var(--va);
  background: rgba(255,255,255,0.04);
}
/* El aire entre la última línea y el botón. Va acá y no como margen del
   botón: ese margen es el auto que lo manda al fondo, y ponerle otro
   encima lo pisaba —a igual especificidad gana el de abajo— dejando las
   tarjetas de distinto alto otra vez. */
.me-plan-tarjeta .me-plan-linea:last-of-type { margin-bottom: 16px; }
.me-planes-nota {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--vtx3);
  line-height: 1.45;
}
.me-plan-deseado-botones { display: flex; flex-wrap: wrap; gap: 8px; }

.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); }

/* Desde y hasta cuándo está pagado un taller, en su tarjeta de la
   consola. Apagada por defecto: es un dato de referencia, no un aviso.
   Se enciende sola cuando queda poco o cuando ya venció, que es lo único
   que hay que ver de lejos al recorrer la lista. */
.sa-vigencia {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--txt-tenue, var(--txt-sub));
}
.sa-vigencia.sa-vig-pronto  { color: var(--color-amarillo); }
.sa-vigencia.sa-vig-vencida { color: var(--color-rojo-suave); font-weight: 600; }


/* ── El aviso de que el plan se vence ──────────────────────────────
   Una franja arriba de todo, como la de promociones, pero esta la
   decide el servidor: aparece sola cuando quedan pocos días y se pone
   roja cuando ya venció. Fuera de esos casos no existe en la página, ni
   siquiera vacía — una franja de altura cero igual corre el contenido.

   position:sticky y no fixed: fixed la sacaría del flujo y taparía el
   navbar, que es justo lo que uno va a apretar para ir a pagar. */
.vit-aviso-plan {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  /* Las mismas medidas que la franja de promociones (.vit-aviso-home en
     vitrina.css): 4px arriba y abajo, 13px de letra e interlineado 1.3,
     que dan unos 25px de alto. Es un aviso, no debe robarle altura al
     contenido. */
  padding: 4px 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  /* Marrón oscuro y no negro: sobre el ámbar da 5,6:1, el mismo contraste
     que el blanco sobre el rojo de la franja vencida. El negro daba 12:1
     —se leía perfecto, pero más duro que su hermana— y dos avisos del
     mismo sistema no tienen por qué pesar distinto. */
  color: #5f4934;
  background: #ffca6b;
  /* Por encima del navbar, que también es sticky: si no, al pegarse los
     dos el navbar le pasaba por arriba. Mismo criterio y mismo nivel que
     la franja morada. */
  z-index: 300;
}
/* Ya venció: rojo y texto claro. El amarillo dice "te queda poco"; el
   rojo, "esto ya pasó", y son dos mensajes distintos. */
/* Sin esto la franja NO se esconde: en este código no hay una regla
   global .oculto —cada componente declara la suya, ver
   .vit-aviso-home.oculto en vitrina.css—, así que el display:flex de
   arriba mandaba siempre y quedaba un filete ámbar de 8px en todas las
   pantallas, con el aviso vacío adentro. */
.vit-aviso-plan.oculto { display: none; }
/* El cupo de ventas del plan FREE: naranja, para que no se confunda con
   el ámbar de "se vence" ni con el rojo de "venció". No es una alerta —
   es un contador que está siempre a la vista mientras el plan tenga
   tope. El marrón del texto da 5,9:1 sobre este naranja, en línea con
   las otras dos franjas. */
.vit-aviso-plan.cupo {
  background: #ff9f43;
  color: #4d310b;
}
.vit-aviso-plan.vencido {
  background: #c62828;
  color: #fff;
}
.vit-aviso-plan strong { font-weight: 750; }
.vit-aviso-plan button {
  flex: 0 0 auto;
  padding: 1px 11px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.vit-aviso-plan button:hover { background: rgba(0,0,0,0.12); }
.vit-aviso-plan.vencido button:hover { background: rgba(255,255,255,0.18); }
@media (max-width: 520px) {
  .vit-aviso-plan { font-size: 12px; padding: 4px 12px; gap: 8px; }
}

/* ── El comprobante en vivo, al lado de los campos de Mi Empresa ─────
   Ver _htmlVistaComprobante en admin.js: las secciones que editan algo
   que se imprime (Datos, Ubicación, Contacto, Comprobante) muestran el
   encabezado del papel armándose mientras se tipea.

   La sección se ensancha porque ahora son dos columnas: con el máximo
   de 720px que llevan todas (.admin-panel.activo > *), el papel —que
   tiene un ancho fijo, el del rollo— le comía casi la mitad del ancho a
   los campos. */
.admin-panel.activo > .admin-seccion-ancha { max-width: 1040px; }

.me-con-vista { display: flex; align-items: flex-start; gap: 24px; }
.me-campos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* El papel no se estira: 37 caracteres de ancho es lo que mide el rollo,
   y estirarlo mostraría un centrado que no es el que se imprime.
   Pegado arriba mientras se scrollea la lista de campos (el que
   scrollea es .admin-panel). */
.me-vista {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.me-vista-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--txt-sub);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* Blanco y negro, como el papel: es lo único de esta pantalla que no
   lleva la paleta oscura, justamente porque imita una hoja impresa. */
.me-vista-papel {
  position: relative;
  overflow: hidden;
  width: 37ch;
  padding: 10px 8px;
  background: #fff;
  color: #000;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.35;
}
.me-vista-marca { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.me-vista-texto {
  position: relative;
  z-index: 1;
  margin: 0;
  font: inherit;
  white-space: pre;
}
.me-vista-pie { color: rgba(255,255,255,0.4); font-size: 11px; max-width: 37ch; }

/* ── El mensaje de WhatsApp, abajo del papel ─────────────────────────
   Las dos vistas van en la misma columna (.me-vistas), que es la que se
   queda pegada arriba mientras se scrollean los campos. Antes el sticky
   lo tenía cada .me-vista; con dos hermanas pegadas al mismo top se
   superponían. */
.me-vistas {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
}
.me-vistas .me-vista { position: static; }

/* El verde de los mensajes propios de WhatsApp en tema oscuro, sobre el
   fondo de su chat. Se imita a propósito, igual que el papel imita una
   hoja: lo que se está decidiendo acá es cómo se ve EN WhatsApp, no en
   FixHub. */
.me-wsp-chat {
  width: 37ch;
  max-width: 100%;
  padding: 12px 10px;
  background: #0b141a;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.me-wsp-globo {
  position: relative;
  margin-left: auto;
  max-width: 92%;
  width: fit-content;
  padding: 7px 9px 5px;
  background: #005c4b;
  border-radius: 8px 0 8px 8px;
  color: #e9edef;
  font-size: 12.5px;
  line-height: 1.4;
}
/* La puntita del globo, del mismo verde. */
.me-wsp-globo::after {
  content: '';
  position: absolute;
  top: 0;
  right: -7px;
  border: 0 solid transparent;
  border-top-width: 9px;
  border-top-color: #005c4b;
  border-right-width: 8px;
}
.me-wsp-texto {
  display: block;
  /* Los saltos de línea del campo son casi todo el formato de un
     mensaje de WhatsApp: si se colapsan, la vista previa miente. Y un
     enlace largo tiene que poder cortarse, o estira el globo. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.me-wsp-hora {
  display: block;
  margin-top: 2px;
  text-align: right;
  color: rgba(233,237,239,0.6);
  font-size: 10px;
}

/* Angosto: el papel pasa abajo de los campos, en vez de dejar a los dos
   sin ancho. 1100px y no 1040 (el máximo de la sección) porque el panel
   tiene su propio padding lateral y el sidebar se lleva lo suyo. */
@media (max-width: 1100px) {
  .me-con-vista { flex-direction: column; }
  .me-campos { width: 100%; }
  .me-vistas { position: static; align-self: flex-start; }
}