/* ============================================================
   CompareYa · Plantillas de Mail (solo admin)
   ============================================================ */

.plantilla-grupo {
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e6e6e6;
}

.plantilla-grupo:last-child {
  border-bottom: none;
}

.plantilla-grupo h3 {
  margin: 0 0 0.2rem 0;
  color: var(--color-primary);
  font-size: 1.05rem;
}

.plantilla-ayuda {
  margin: 0 0 0.8rem 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Cajita con la lista de variables disponibles */
.plantilla-vars {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.86rem;
}

.plantilla-vars ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.1rem;
  columns: 2;
}

.plantilla-vars li {
  margin-bottom: 0.25rem;
  break-inside: avoid;
}

.plantilla-vars code {
  background: #fff;
  border: 1px solid #d4e2e9;
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  color: var(--color-accent);
  font-size: 0.82rem;
}

/* Lista de archivos adjuntos */
#plListaAdjuntos {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.8rem 0;
}

#plListaAdjuntos li {
  padding: 0.45rem 0.7rem;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
}

/* El textarea del cuerpo del mail */
#plCuerpo {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

#plAsunto {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}

/* Aviso de que los estados nuevos todavía no están activos */
.aviso-info {
  padding: 0.85rem 1.1rem;
  background: var(--color-warning-soft);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: 0.87rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Zona para arrastrar y soltar los PDF adjuntos
   ------------------------------------------------------------ */

.plantilla-drop {
  margin-top: 0.5rem;
  padding: 1.6rem 1rem;
  border: 2px dashed #c3d4dd;
  border-radius: 6px;
  background: #fafcfd;
  text-align: center;
  color: #5a7a8a;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.plantilla-drop:hover {
  background: #f0f6f9;
  border-color: #1B5A7D;     /* petróleo */
}

/* Mientras el archivo está siendo arrastrado por encima */
.plantilla-drop.encima {
  background: #e8f2f7;
  border-color: #1B5A7D;
  border-style: solid;
  color: #1B5A7D;
}

/* Mientras se está subiendo: no se puede volver a hacer clic */
.plantilla-drop.subiendo {
  cursor: default;
  opacity: 0.6;
  border-style: solid;
}

.plantilla-drop small {
  color: #8aa5b3;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------
   Aviso de "guardado con éxito" (aparece arriba y se va solo)
   ------------------------------------------------------------ */

.alerta {
  padding: 0.85rem 1.1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  animation: alertaEntra 0.25s ease-out;
}

.alerta-ok {
  background: var(--color-success-soft);
  border-left: 4px solid var(--color-success);
  color: var(--color-success);
}

.alerta-error {
  background: var(--color-danger-soft);
  border-left: 4px solid var(--color-danger);
  color: var(--color-danger);
}

@keyframes alertaEntra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Barra de "usar texto sugerido"
   ------------------------------------------------------------ */

.plantilla-sugerido {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #f0f6f9;
  border: 1px dashed #9dc0d1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: #1B5A7D;
}

/* ------------------------------------------------------------
   Enviar un mail de prueba
   ------------------------------------------------------------ */

.plantilla-prueba {
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--color-accent-soft);
  border: 1px solid #EBD3CC;
  border-radius: var(--radius-md);
}

.plantilla-prueba strong {
  color: var(--color-accent);
  font-size: 0.95rem;
}

.plantilla-prueba .plantilla-ayuda {
  margin: 0.35rem 0 0.8rem 0;
}

.plantilla-prueba-fila {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.plantilla-prueba-fila input {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.92rem;
}

.plantilla-prueba-fila button {
  white-space: nowrap;
}


/* ============================================================
   COLOR POR PREPAGA
   ------------------------------------------------------------
   Cada prepaga tiene su color de marca. Se usa en una barra a la
   izquierda de la fila y en la etiqueta del nombre, para poder
   distinguirlas de un vistazo.

   Colores definidos con Damián. Los tres azules (Galeno, Omint,
   Sancor) están separados a propósito: marino / petróleo / celeste.
   ============================================================ */

.celda-prepaga {
  position: relative;
  padding-left: 16px !important;
}

/* Barra de color a la izquierda de la fila */
.celda-prepaga::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--pg-color, var(--color-border-fuerte));
}

.prepaga-tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pg-color, var(--color-text-muted));
  background: var(--pg-soft, var(--color-surface-alt));
  border: 1px solid var(--pg-borde, var(--color-border));
  white-space: nowrap;
}

.prepaga-todas {
  font-style: italic;
  font-weight: 600;
}

/* --- Cada prepaga con su color --- */
.pg-galeno     { --pg-color:#004483; --pg-soft:#E7EEF4; --pg-borde:#B9CCDC; }
.pg-omint      { --pg-color:#0E4C5C; --pg-soft:#E5EFF1; --pg-borde:#B4CED4; }
.pg-sancor     { --pg-color:#2E7CB0; --pg-soft:#E8F3FA; --pg-borde:#BEDCEF; }
.pg-swiss      { --pg-color:#D32F2F; --pg-soft:#FCEDED; --pg-borde:#F2C6C6; }
.pg-formed     { --pg-color:#8C1D3F; --pg-soft:#F7E9EE; --pg-borde:#E3C1CD; }
.pg-avalian    { --pg-color:#2E7D4F; --pg-soft:#E9F4ED; --pg-borde:#C0DECC; }
.pg-premedic   { --pg-color:#4F8B2B; --pg-soft:#EFF6E8; --pg-borde:#CFE4BE; }
.pg-doctorred  { --pg-color:#6A3FA0; --pg-soft:#F1EBF8; --pg-borde:#D5C5E8; }
.pg-prevencion { --pg-color:#C2185B; --pg-soft:#FBE9F0; --pg-borde:#F0C3D5; }
.pg-medife     { --pg-color:#C25C06; --pg-soft:#FDF0E3; --pg-borde:#F5D5B4; }
.pg-mgn        { --pg-color:#5F6C7B; --pg-soft:#EEF0F3; --pg-borde:#CBD2DA; }
.pg-generica   { --pg-color:#8A96A5; --pg-soft:#F1F3F6; --pg-borde:#D7DDE5; }

/* La fila se tiñe apenas con el color de su prepaga */
.tabla tbody tr[class*="pg-"]:hover {
  background: var(--pg-soft, var(--color-surface-alt));
}

/* --- Adjuntos --- */
.adjuntos-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid #C5DCEA;
  font-size: 0.8rem;
  font-weight: 700;
}

.adjuntos-tag .icon-svg {
  width: 13px;
  height: 13px;
}

.sin-adjuntos {
  color: var(--color-text-muted);
  font-weight: 600;
}


/* Encabezado de cada bloque de estado: barra terracota + peso */
.plantilla-grupo h3 {
  position: relative;
  padding-left: 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.plantilla-grupo h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  background: var(--color-accent);
}

.plantilla-grupo .plantilla-ayuda {
  margin-left: 14px;
}

/* El bloque sin plantilla: que no parezca un error, sino un pendiente */
.plantilla-grupo .empty-state {
  margin-left: 14px;
}


/* ============================================================
   COTIZADOR (embebido)
   ------------------------------------------------------------
   El cotizador es un sistema aparte, mantenido por otra persona.
   Acá solo lo mostramos: no hay código suyo en este proyecto, y
   sus actualizaciones se ven solas.
   ============================================================ */

/* El cotizador ocupa TODO el ancho y alto disponibles.
   El contenedor padre (.main-panel-full) tiene padding 22px 26px y un
   gap de 18px: hay que cancelar LAS DOS COSAS, o el iframe queda
   angosto y con una franja arriba. */
/* Se activa con la clase `modo-cotizador`, que app.js le pone al body
   cuando se abre este módulo. (Antes usaba :has(), pero no anda en
   navegadores viejos.) */
body.modo-cotizador .main-panel-full,
body.modo-cotizador .main-panel {
  padding: 0;
  gap: 0;
  max-width: none;
}

.cotizador-panel {
  position: relative;
  width: 100%;
  /* 100vh menos el header azul de arriba */
  height: calc(100vh - 92px);
  min-height: 560px;
  display: flex;
  background: var(--color-surface);
}

.cotizador-marco {
  flex: 1;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

@media (max-width: 900px) {
  .cotizador-panel {
    height: calc(100vh - 76px);
  }
}

.cotizador-marco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Aviso para cuando el servidor del cotizador bloquea el embebido */
.cotizador-bloqueado {
  padding: 48px 32px;
  text-align: center;
  border: 2px dashed var(--color-border-fuerte);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.cotizador-bloqueado-icono {
  width: 40px !important;
  height: 40px !important;
  color: var(--color-warning);
  margin: 0 auto 14px;
}

.cotizador-bloqueado h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--color-text);
}

.cotizador-bloqueado p {
  margin: 0 auto 20px;
  max-width: 460px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 0.92rem;
}


/* ============================================================
   NOTICIAS — filtros y buscador
   ============================================================ */

.news-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 16px 0 20px;
  padding: 14px 16px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* El buscador ocupa el ancho que sobra */
.news-buscador {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}

.news-buscador-icono {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px !important;
  height: 17px !important;
  color: var(--color-text-muted);
  pointer-events: none;
}

.news-filtro-input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;   /* espacio para la lupa */
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.news-filtro-input::placeholder {
  color: var(--color-text-muted);
  font-weight: 500;
}

.news-filtro-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 71, 43, 0.14),
              0 6px 16px rgba(181, 71, 43, 0.18);
}

.news-filtro-input:not(:placeholder-shown) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.news-filtro-input:not(:placeholder-shown) + .news-buscador-icono,
.news-buscador:focus-within .news-buscador-icono {
  color: var(--color-accent);
}

.news-filtro-select {
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.news-filtro-select:hover {
  border-color: var(--color-border-fuerte);
  box-shadow: var(--shadow);
}

.news-filtro-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Filtro con algo puesto: se nota */
.news-filtro-select.filtro-activo {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* --- Tarjetas de noticia --- */
.news-card {
  border-left: 5px solid var(--pg-color, var(--color-border));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Sin leer: se destaca */
.news-card.news-sin-leer {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  border-top-color: var(--color-accent);
}


/* ============================================================
   MI PERFIL — dos columnas
   ------------------------------------------------------------
   Antes la foto iba arriba y el formulario tenía max-width: 640px,
   así que media pantalla quedaba en blanco. Ahora los datos van a
   la izquierda y la foto a la derecha.
   ============================================================ */

.perfil-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

.perfil-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.perfil-guardar {
  margin-top: 22px;
}

.perfil-guardar .btn-primario {
  width: 100%;
}

/* --- Columna de la foto --- */
.perfil-foto-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.perfil-avatar-grande {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 800;
  flex-shrink: 0;
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow);
}

.perfil-avatar-grande img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfil-nombre {
  margin: 14px 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
  word-break: break-word;
}

/* --- Zona para arrastrar la foto --- */
.perfil-drop {
  width: 100%;
  margin-top: 18px;
  padding: 16px 12px;
  border: 2px dashed var(--color-border-fuerte);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.perfil-drop .icon-svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--color-text-muted);
}

.perfil-drop:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.perfil-drop:hover .icon-svg {
  color: var(--color-accent);
}

/* Mientras se arrastra por encima */
.perfil-drop.encima {
  border-color: var(--color-accent);
  border-style: solid;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  transform: scale(1.02);
}

.perfil-drop.subiendo {
  cursor: default;
  opacity: 0.6;
  border-style: solid;
}

.perfil-drop small {
  font-weight: 500;
  opacity: 0.8;
}

.perfil-foto-ayuda {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Campos que no se pueden editar */
.campo-bloqueado {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .perfil-layout {
    grid-template-columns: 1fr;
  }
  .perfil-foto-col {
    order: -1;   /* en celular, la foto va arriba */
  }
}

@media (max-width: 560px) {
  .perfil-form {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   NOVEDADES DEL HOME (panel admin) — subida con arrastre
   ============================================================ */

.home-subida {
  margin-bottom: 20px;
}

.home-subida-espacio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.home-subida-espacio label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* Zona para arrastrar el archivo */
.home-drop {
  padding: 28px 20px;
  border: 2px dashed var(--color-border-fuerte);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

.home-drop .icon-svg {
  width: 32px !important;
  height: 32px !important;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.home-drop:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.home-drop:hover .icon-svg {
  color: var(--color-accent);
}

/* Mientras se arrastra el archivo por encima */
.home-drop.encima {
  border-color: var(--color-accent);
  border-style: solid;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  transform: scale(1.01);
  box-shadow: var(--shadow);
}

.home-drop.encima .icon-svg {
  color: var(--color-accent);
}

.home-drop.subiendo {
  cursor: default;
  opacity: 0.6;
  border-style: solid;
}

.home-drop small {
  font-weight: 500;
  opacity: 0.85;
}

.home-drop-formatos {
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
  opacity: 0.7 !important;
}


/* Lista de archivos ya cargados en el Home */
.home-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.home-item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.home-item-thumb {
  width: 64px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.home-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-item-thumb .icon-svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--color-text-muted);
}

.home-item-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.home-item-nombre {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================================================
   EL ACORDEÓN DE ESTADOS
   ==========================================================================
   Cada estado del circuito es un grupo desplegable con sus plantillas.

   🔴 ESTAS CLASES NO TENÍAN CSS. El acordeón se armó en el JS pero nunca se
   le escribió el estilo, así que el navegador pintaba los <button> con su
   apariencia nativa: fondo gris, borde 3D, tipografía del sistema. En medio
   de una pantalla con el diseño de la marca, se veían como de otra época.

   El RIBETE IZQUIERDO es lo importante acá: dice de un vistazo qué estados
   tienen mail configurado y cuáles no. Esa es la pregunta que trae a alguien
   a esta pantalla —"¿en qué etapa el cliente no recibe nada?"— y antes había
   que leer estado por estado.
   ========================================================================== */

/* 🔴 El elemento lleva TAMBIEN la clase .plantilla-grupo, que viene del
   diseño anterior: 2rem de separacion y una linea divisoria al pie. Con la
   tarjeta del acordeon eso deja un hueco enorme entre grupos y una linea
   suelta debajo de cada uno. Por eso las medidas van con !important: hay
   que ganarle a esa regla, que se escribio antes en el mismo archivo. */
.plantilla-acordeon {
  border: 1.5px solid var(--color-borde-tarjeta) !important;
  border-left: 3px solid var(--color-border-fuerte) !important;
  border-radius: var(--radius-sm);
  margin-bottom: 0.55rem !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  background: var(--color-surface);
}

/* Con plantillas: petróleo. Sin plantillas: gris apagado. */
/* El ultimo grupo tambien lleva su borde: son tarjetas, no una lista con
   separadores. La regla vieja se lo quitaba. */
.plantilla-acordeon:last-child {
  border-bottom: 1.5px solid var(--color-borde-tarjeta) !important;
}
.plantilla-acordeon-con { border-left-color: var(--color-primary) !important; }
.plantilla-acordeon-vacio { border-left-color: var(--color-border-fuerte) !important; }

/* --- La cabecera, que es el botón --- */

.plantilla-acordeon-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;

  width: 100%;
  padding: 0.8rem 0.95rem;

  background: var(--color-surface);
  border: none;
  border-radius: 0;

  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.plantilla-acordeon-con .plantilla-acordeon-cab { background: var(--form-campo-fondo); }
.plantilla-acordeon-cab:hover { background: var(--color-surface-alt); }

/* El grupo abierto se marca fuerte: es donde está trabajando el usuario. */
.plantilla-acordeon.abierto { border-color: var(--color-primary) !important; }
.plantilla-acordeon.abierto .plantilla-acordeon-cab {
  background: var(--color-primary-soft);
}
.plantilla-acordeon.abierto .plantilla-acordeon-label { color: var(--color-primary); }
.plantilla-acordeon.abierto .plantilla-acordeon-flecha { color: var(--color-primary); }

/* --- El título y el conteo --- */

.plantilla-acordeon-titulo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}

.plantilla-acordeon-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

/* El conteo va en CHIP, separado del título. Antes se leía todo junto
   —"Venta enviada a la prepaga 11 plantillas"— como una sola frase. */
.plantilla-acordeon-cuenta {
  flex-shrink: 0;
  padding: 0.12rem 0.6rem;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;

  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.plantilla-acordeon-con .plantilla-acordeon-cuenta {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.plantilla-acordeon.abierto .plantilla-acordeon-cuenta {
  background: var(--color-surface);
  color: var(--color-primary);
}

.plantilla-acordeon-flecha {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* --- El cuerpo --- */

.plantilla-acordeon-cuerpo {
  padding: 0.9rem 0.95rem;
  border-top: 1px solid var(--color-borde-tarjeta);
  background: var(--color-surface);
}

@media (max-width: 640px) {
  .plantilla-acordeon-cab { padding: 0.75rem 0.8rem; }
  .plantilla-acordeon-label { font-size: 0.9rem; }
  .plantilla-acordeon-titulo { gap: 0.4rem; }
  .plantilla-acordeon-cuerpo { padding: 0.7rem 0.6rem; }
}


/* ==========================================================================
   LA TABLA DE PLANTILLAS EN CELULAR
   ==========================================================================
   Cinco columnas no entran en 340px. La tabla se cortaba en "ADJUNTOS", el
   asunto se partia en seis lineas, y las acciones —lo unico que uno viene a
   hacer aca— quedaban fuera de la pantalla, escondidas detras de un scroll
   horizontal que nadie descubre.

   En celular quedan solo PREPAGA y los BOTONES. El asunto, los adjuntos y
   el estado se ven al editar: no hace falta tenerlos en el listado.
   ========================================================================== */

@media (max-width: 640px) {

  .plantilla-acordeon-cuerpo .pl-col-detalle { display: none; }

  .plantilla-acordeon-cuerpo .tabla {
    width: 100%;
    table-layout: fixed;
  }

  .plantilla-acordeon-cuerpo .tabla th,
  .plantilla-acordeon-cuerpo .tabla td {
    padding: 0.55rem 0.4rem;
  }

  .plantilla-acordeon-cuerpo .celda-prepaga { width: 42%; }

  /* Los botones: solo el icono. Con tres acciones y el nombre de la prepaga
     al lado, el texto no entra —y el icono ya dice de que se trata. */
  .plantilla-acordeon-cuerpo .pl-btn-txt { display: none; }

  .plantilla-acordeon-cuerpo .tabla-acciones {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
  }

  .plantilla-acordeon-cuerpo .btn-accion {
    padding: 0.45rem 0.55rem;
    min-width: 0;
  }
  .plantilla-acordeon-cuerpo .btn-accion .icon-svg {
    width: 16px;
    height: 16px;
    margin: 0;
  }

  /* El texto de ayuda del grupo: mas chico, no compite con la lista. */
  .plantilla-acordeon-cuerpo .plantilla-ayuda {
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;
  }
}

/* --- El interruptor de envío automático ----------------------------------
   🔴 VA ARRIBA DE TODO Y BIEN VISIBLE.

   No es un ajuste más: decide si el cliente recibe un mail o no. Si estuviera
   escondido en una configuración, alguien cargaría plantillas creyendo que
   salen y no saldría nada —o al revés, empezarían a salir mails a clientes
   reales sin que nadie lo haya decidido—.

   Por eso ocupa una barra entera, con el estado escrito en palabras y no solo
   con un color: "Envío automático activado" no se malinterpreta. */

.pl-envio {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;

  padding: 0.85rem 1rem;
  margin-bottom: 1.1rem;

  border: 1.5px solid;
  border-radius: var(--radius-md);
}
.pl-envio .icon-svg { width: 22px; height: 22px; flex-shrink: 0; }

.pl-envio-txt { flex: 1; min-width: 200px; }
.pl-envio-txt strong { display: block; font-size: 0.92rem; }
.pl-envio-txt span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}

/* Activado: petróleo. Es el estado normal, no una alarma. */
.pl-envio-on {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.pl-envio-on .icon-svg { color: var(--color-primary); }
.pl-envio-on .pl-envio-txt strong { color: var(--color-primary); }
.pl-envio-on .pl-envio-txt span { color: var(--color-text-muted); }

/* Desactivado: ámbar, no rojo. Tener los envíos apagados es una decisión
   legítima —se está armando los textos—, no un error. */
.pl-envio-off {
  background: var(--aviso-cuidado-fondo);
  border-color: var(--aviso-cuidado-icono);
}
.pl-envio-off .icon-svg { color: var(--aviso-cuidado-icono); }
.pl-envio-off .pl-envio-txt strong { color: var(--aviso-cuidado-titulo); }
.pl-envio-off .pl-envio-txt span { color: var(--aviso-cuidado-titulo); }

.pl-envio-btn {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;

  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.pl-envio-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (max-width: 640px) {
  .pl-envio { flex-direction: column; align-items: stretch; text-align: left; }
  .pl-envio-btn { width: 100%; }
}

/* --- La zona del interruptor, separada de los filtros --------------------
   🔴 LA LÍNEA DIVISORIA NO ES DECORATIVA.

   El interruptor corta los mails de TODO el broker, pero justo abajo hay
   filtros por estado y por prepaga. Sin una separación clara, los tres
   controles se leen como un solo grupo: con "Avalian" filtrado, apretar
   "Desactivar todos" parece que apaga los de Avalian, y en realidad apaga
   los once.

   La línea marca dónde termina lo que afecta al broker entero y dónde
   empieza lo que solo cambia la vista. */

.pl-envio-zona {
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--color-borde-tarjeta);
}
.pl-envio-zona .pl-envio { margin-bottom: 0; }

/* El "todas" resaltado dentro de la leyenda: es la palabra que evita el
   malentendido, tiene que saltar sin leer la oración entera.
   Va con más peso que `.pl-envio-txt strong` (que es `display: block` para
   el título), si no el resaltado rompería el renglón en dos. */
.pl-envio .pl-envio-txt span strong {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
}