/* ============================================================
   PLAN PRO — LA PUESTA EN MARCHA Y EL PANEL

   Los colores salen de los tokens --color-pro* de main.css, que están
   definidos en los TRES temas (claro, oscuro y cyber-neo). Aquí no se
   escribe ningún color a mano salvo el blanco sobre el degradado: un
   valor fijo se vería mal en dos de los tres temas.

   La estructura es deliberadamente la misma que la de Cielo
   (css/cielo.css): son dos pestañas del mismo panel, y si una ruta de
   pasos se viera distinta en cada una, parecerían dos productos.
   ============================================================ */

.pro-consola { --pro-radio: 18px; }


/* ── CABECERA ────────────────────────────────────────────── */

.pro-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-6);
  margin-bottom: var(--space-6);
  border-radius: var(--pro-radio);
  background: var(--grad-pro);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.pro-cabecera::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 180%;
  background: radial-gradient(60% 50% at 30% 0%, rgba(255,255,255,0.28), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.pro-cabecera__texto { flex: 1; min-width: 0; }
.pro-cabecera h1 {
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 6px 0;
  color: #fff;
}
.pro-cabecera__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.pro-cabecera__sub {
  font-size: var(--font-sm);
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 52ch;
}

/* El sobre de la cabecera. Decorativo: aria-hidden en el marcado. */
.pro-sobre {
  flex-shrink: 0;
  width: 78px; height: 78px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,0.16);
  font-size: 2.2rem;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .pro-sobre { animation: pro-latido 3.2s ease-in-out infinite; }
}
@keyframes pro-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}


/* ── BIENVENIDA ──────────────────────────────────────────── */

.pro-bienvenida {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.pro-bienvenida__sobre {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-5);
  display: grid; place-items: center;
  border-radius: 26px;
  background: var(--grad-pro);
  font-size: 2.8rem;
  line-height: 1;
}
.pro-bienvenida h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.pro-bienvenida > p {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 0 auto var(--space-6);
  max-width: 46ch;
}
.pro-bienvenida__lista {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  text-align: left;
  display: grid;
  gap: var(--space-3);
}
.pro-bienvenida__lista li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: 14px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
}
.pro-bienvenida__lista strong {
  display: block;
  color: var(--color-text);
  font-size: var(--font-sm);
  margin-bottom: 2px;
}
.pro-bienvenida__lista span:last-child {
  font-size: var(--font-sm);
  color: var(--color-text-2);
  line-height: 1.5;
}
.pro-bienvenida__num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-pro-bg);
  border: 1px solid var(--color-pro-border);
  color: var(--color-pro-text);
  font-weight: 800;
  font-size: var(--font-xs);
}
.pro-bienvenida__tiempo {
  font-size: var(--font-xs);
  color: var(--color-text-3);
  margin-top: var(--space-4);
}


/* ── LA RUTA DE PASOS ────────────────────────────────────── */

.pro-ruta { list-style: none; margin: 0 0 var(--space-8); padding: 0; }

.pro-paso {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.pro-paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px; top: 44px; bottom: 6px;
  width: 2px;
  background: var(--color-border-2);
}
.pro-paso.is-hecho:not(:last-child)::before { background: var(--color-pro); }

.pro-paso__marca {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--font-sm);
  background: var(--color-bg-2);
  border: 2px solid var(--color-border-2);
  color: var(--color-text-2);
  transition: all 0.25s ease;
}
.pro-paso.is-abierto .pro-paso__marca {
  background: var(--grad-pro);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 5px var(--color-pro-bg);
}
.pro-paso.is-hecho .pro-paso__marca {
  background: var(--color-pro);
  border-color: transparent;
  color: #fff;
}
/* El bloqueado se ve, pero se ve apagado: la clínica sabe qué viene
   después sin poder saltárselo. Media configuración es lo que produce
   bandejas vacías y IA respondiendo con datos inventados. */
.pro-paso.is-bloqueado { opacity: 0.5; }

.pro-paso__contenido { flex: 1; min-width: 0; padding-top: 6px; }
.pro-paso__contenido h3 {
  font-size: var(--font-md);
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--color-text);
}
.pro-paso__resumen {
  font-size: var(--font-sm);
  color: var(--color-text-2);
  margin: 0;
  line-height: 1.5;
}
.pro-paso__cuerpo {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: 14px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
}


/* ── FORMULARIOS DENTRO DE UN PASO ───────────────────────── */

.pro-campo { margin-bottom: var(--space-4); }
.pro-campo label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.pro-campo__ayuda {
  font-size: var(--font-xs);
  color: var(--color-text-3);
  line-height: 1.5;
  margin: 4px 0 0;
}
.pro-campo input[type="text"],
.pro-campo input[type="email"],
/* La clave de IA va en un campo de contraseña: no tiene por qué quedar a la
   vista de quien pase por detrás del mostrador de la clínica. */
.pro-campo input[type="password"],
.pro-campo select,
.pro-campo textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-family: inherit;
}
.pro-campo textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.pro-campo input:focus, .pro-campo select:focus, .pro-campo textarea:focus {
  outline: none;
  border-color: var(--color-pro);
  box-shadow: 0 0 0 3px var(--color-pro-bg);
}

.pro-explica {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 0 0 var(--space-4);
}
.pro-nota {
  font-size: var(--font-xs);
  line-height: 1.55;
  color: var(--color-text-3);
  margin: var(--space-3) 0 0;
}

/* EL ANEXO LEGAL, EN EL MODAL QUE APARECE AL CONECTAR EL BUZÓN.
   Se ve como lo que es —un texto que hay que leer— y no como letra chica:
   una aceptación que se lee es la que sirve si algún día hay que discutirla.
   Con scroll propio, porque en un portátil el texto no cabe entero y el botón
   de aceptar tiene que seguir a la vista. */
.pro-anexo {
  max-height: 46vh;
  overflow-y: auto;
  margin: var(--space-4) 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 10px;
  background: var(--color-bg-2);
  font-size: var(--font-sm);
  line-height: 1.65;
  color: var(--color-text-2);
}
.pro-anexo p { margin: 0 0 12px; }
.pro-anexo p:last-child { margin-bottom: 0; }
.pro-anexo strong { color: var(--color-text); }
.pro-anexo__enlace { padding-top: 4px; border-top: 1px dashed var(--color-border-2); }
.pro-anexo__enlace a { color: var(--color-primary); font-weight: 600; }

.pro-anexo__botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pro-boton--fantasma {
  background: transparent;
  color: var(--color-text-2);
  border: 1px solid var(--color-border-2);
}

/* EL PASO 1 FÁCIL: la dirección propia de la clínica.
   Números grandes y una cosa por línea. Quien lo lee puede tener 70 años y
   estar mirando la pantalla con Gmail abierto en otra ventana. */
.pro-buzon {
  margin: var(--space-4) 0;
  padding: 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 12px;
  background: var(--color-bg-2);
}
.pro-buzon__paso {
  margin: 0 0 8px;
  font-size: var(--font-sm);
  color: var(--color-text);
}
.pro-buzon__paso:not(:first-child) { margin-top: 18px; }
.pro-buzon__ruta {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-bg);
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--color-text-2);
}
.pro-buzon__caja {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 2px dashed var(--color-primary);
  border-radius: 10px;
  background: var(--color-bg);
}
.pro-buzon__caja code {
  flex: 1 1 220px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  word-break: break-all;
}
.pro-boton--chico { padding: 8px 16px; font-size: var(--font-sm); width: auto; }

/* El código que manda Google. Cuando aparece es lo único que importa en la
   pantalla, así que se ve como un número grande y no como un párrafo más. */
.pro-buzon__codigo {
  margin-top: 18px;
  padding: 14px;
  border-radius: 10px;
  background: var(--chip-ok-bg);
  text-align: center;
}
.pro-buzon__codigo p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-text-2);
}
.pro-buzon__numero {
  margin: 10px 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--chip-ok-text);
}

.pro-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 10px;
  background: var(--grad-pro);
  color: #fff;
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.pro-boton:hover:not(:disabled) { filter: brightness(1.08); }
.pro-boton:active:not(:disabled) { transform: translateY(1px); }
.pro-boton:disabled { opacity: 0.6; cursor: not-allowed; }

.pro-boton--fantasma {
  background: transparent;
  border: 1px solid var(--color-border-2);
  color: var(--color-text-2);
}
.pro-boton--fantasma:hover:not(:disabled) { border-color: var(--color-pro); color: var(--color-pro-text); }


/* ── EL BLOQUE DEL GUION (paso 1) ────────────────────────── */

.pro-guion {
  margin-top: var(--space-4);
  border-radius: 12px;
  border: 1px solid var(--color-pro-border);
  background: var(--color-pro-bg);
  overflow: hidden;
}
.pro-guion__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-pro-border);
}
.pro-guion__barra strong {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-pro-text);
}
.pro-guion pre {
  margin: 0;
  padding: var(--space-4);
  max-height: 260px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-2);
  white-space: pre;
}

/* El aviso de "esto no se vuelve a ver" tiene que doler un poco: si la
   clínica lo pasa por alto, pierde el token y hay que regenerarlo, lo que
   además rompe el reenvío que acabara de montar. */
.pro-aviso {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  margin: var(--space-4) 0;
}
.pro-aviso__icono { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; }
.pro-aviso strong { display: block; font-size: var(--font-sm); color: var(--color-text); margin-bottom: 3px; }
.pro-aviso p { margin: 0; font-size: var(--font-sm); line-height: 1.55; color: var(--color-text-2); }
.pro-aviso--ojo { background: var(--color-pro-bg); border-color: var(--color-pro-border); }
.pro-aviso--error { background: var(--color-red-bg); border-color: var(--color-red-text); }
.pro-aviso--error strong, .pro-aviso--error p { color: var(--color-red-text); }

.pro-avanzado { margin-top: var(--space-4); }
.pro-avanzado summary {
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-2);
  padding: 8px 0;
}
.pro-avanzado summary:hover { color: var(--color-pro-text); }
.pro-avanzado__cuerpo { padding-top: var(--space-3); }

.pro-dato {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
  margin-bottom: var(--space-3);
}
.pro-dato code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color-text-2);
  overflow-wrap: anywhere;
}


/* ── FINAL: YA ESTÁ DENTRO ───────────────────────────────── */

.pro-listo {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  max-width: 560px;
  margin: 0 auto;
}
.pro-listo__marca {
  width: 88px; height: 88px;
  margin: 0 auto var(--space-5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-pro);
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
}
.pro-listo h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.pro-listo p {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 0 auto var(--space-6);
  max-width: 44ch;
}


/* ── SIN PLAN PRO ────────────────────────────────────────── */

.pro-sinplan {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  max-width: 520px;
  margin: 0 auto;
}
.pro-sinplan h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  font-weight: 800;
  margin: var(--space-4) 0 var(--space-3);
  color: var(--color-text);
}
.pro-sinplan__nota {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  text-align: left;
}


/* ── ESQUELETO DE CARGA ──────────────────────────────────── */

.pro-esqueleto { display: grid; gap: var(--space-4); }
.pro-esqueleto__barra {
  height: 16px;
  border-radius: 8px;
  background: var(--color-bg-2);
}
.pro-esqueleto__barra--alta { height: 96px; }
@media (prefers-reduced-motion: no-preference) {
  .pro-esqueleto__barra { animation: pro-pulso 1.4s ease-in-out infinite; }
}
@keyframes pro-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }


/* ── MÓVIL ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .pro-cabecera { flex-direction: column; text-align: center; padding: var(--space-6) var(--space-4); }
  .pro-cabecera__sub { max-width: none; }
  .pro-paso__cuerpo { padding: var(--space-4); }
  .pro-guion pre { font-size: 11px; }
}


/* ============================================================
   LA APP — BANDEJA, PAGOS, AGENDA Y AJUSTES

   Todo lo de abajo se ve solo cuando la puesta en marcha está
   terminada. Antes de eso la pantalla es la ruta de tres pasos.
   ============================================================ */

/* La cabecera se encoge al entrar: dentro de la app el titular ya no
   tiene que convencer de nada, y ese espacio lo necesita la bandeja. */
.pro-cabecera--compacta { padding: var(--space-5) var(--space-6); }
.pro-cabecera--compacta h1 { font-size: clamp(1.1rem, 2.6vw, 1.45rem); }
.pro-cabecera--compacta .pro-sobre { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 16px; }


/* ── PESTAÑAS DE SECCIÓN ─────────────────────────────────── */

.pro-secciones {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  /* Sin esto, en móvil las cuatro pestañas se comprimen hasta ser
     ilegibles en vez de dejar deslizar. */
  scrollbar-width: none;
}
.pro-secciones::-webkit-scrollbar { display: none; }

.pro-seccion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-border-2);
  background: var(--color-bg-2);
  color: var(--color-text-2);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pro-seccion-btn:hover { border-color: var(--color-pro); color: var(--color-pro-text); }
.pro-seccion-btn.is-activa {
  background: var(--grad-pro);
  border-color: transparent;
  color: #fff;
}

.pro-pastilla {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-pro-bg);
  color: var(--color-pro-text);
  font-size: 11px;
  font-weight: 800;
}
.pro-seccion-btn.is-activa .pro-pastilla { background: rgba(255,255,255,0.25); color: #fff; }


/* ── BANDEJA: DOS COLUMNAS ───────────────────────────────── */

.pro-bandeja {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-4);
  align-items: start;
}
.pro-bandeja__lista {
  border: 1px solid var(--color-border-2);
  border-radius: 14px;
  background: var(--color-bg-2);
  overflow: hidden;
}
.pro-bandeja__detalle {
  border: 1px solid var(--color-border-2);
  border-radius: 14px;
  background: var(--color-bg-2);
  min-height: 340px;
}

.pro-filtros {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-2);
}
.pro-filtros input, .pro-filtros select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-xs);
  font-family: inherit;
  min-width: 0;
}
.pro-filtros input:focus, .pro-filtros select:focus {
  outline: none;
  border-color: var(--color-pro);
}


/* ── UNA FILA DE CORREO ──────────────────────────────────── */

.pro-correo {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--color-border-2);
  border-left: 3px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.pro-correo:hover { background: var(--color-bg); }
.pro-correo.is-abierto {
  background: var(--color-pro-bg);
  border-left-color: var(--color-pro);
}
/* El no leído se marca con el peso de la letra, no con un punto de
   color: se ve igual de rápido y no se pierde para quien no distingue
   bien los colores. */
.pro-correo.is-nuevo .pro-correo__de,
.pro-correo.is-nuevo .pro-correo__asunto { font-weight: 800; color: var(--color-text); }

.pro-correo__linea { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.pro-correo__de {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pro-correo__cuando { font-size: var(--font-xs); color: var(--color-text-3); flex-shrink: 0; }
.pro-correo__asunto {
  font-size: var(--font-sm);
  color: var(--color-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pro-correo__marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }


/* ── MARCAS Y URGENCIA ───────────────────────────────────── */

.pro-marca, .pro-urgencia {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
  color: var(--color-text-3);
}
.pro-marca--ok       { color: var(--color-green-text); border-color: var(--color-green-text); }
.pro-marca--borrador { color: var(--color-amber-text, #b45309); border-color: var(--color-amber-text, #b45309); }

/* Solo las dos primeras llevan color. Si las cuatro fueran de colores,
   ninguna destacaría, y el punto entero de clasificar es que "urgente"
   salte a la vista sobre lo demás. */
.pro-urgencia--critica {
  background: var(--color-red-bg);
  border-color: var(--color-red-text);
  color: var(--color-red-text);
}
.pro-urgencia--alta {
  border-color: var(--color-amber-text, #b45309);
  color: var(--color-amber-text, #b45309);
}


/* ── DETALLE DEL CORREO ──────────────────────────────────── */

.pro-detalle { padding: var(--space-5); }
.pro-detalle__cab { display: flex; gap: var(--space-3); align-items: flex-start; }
.pro-detalle__cab h3 {
  margin: 0 0 3px;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.pro-detalle__de {
  margin: 0;
  font-size: var(--font-xs);
  color: var(--color-text-3);
  overflow-wrap: anywhere;
}

/* En escritorio no hace falta: la lista está al lado. En móvil es la
   única forma de volver. */
.pro-volver {
  display: none;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text-2);
  font-size: 1.1rem;
  cursor: pointer;
}

.pro-detalle__marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: var(--space-4) 0;
}
.pro-mover {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text-2);
  font-size: var(--font-xs);
  font-family: inherit;
}

/* pre-wrap y no innerHTML con <br>: el cuerpo lo escribió un
   desconocido, así que se pinta como TEXTO y los saltos de línea los
   respeta el CSS. Convertirlos a etiquetas sería abrir la puerta. */
.pro-detalle__cuerpo {
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 340px;
  overflow-y: auto;
}


/* ── RESPUESTA ───────────────────────────────────────────── */

.pro-respuesta {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-2);
}
.pro-respuesta__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pro-respuesta__barra > strong { font-size: var(--font-sm); color: var(--color-text); }
.pro-respuesta__acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pro-respuesta__acciones select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text-2);
  font-size: var(--font-xs);
  font-family: inherit;
}
.pro-respuesta textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
}
.pro-respuesta textarea:focus {
  outline: none;
  border-color: var(--color-pro);
  box-shadow: 0 0 0 3px var(--color-pro-bg);
}

/* La casilla de aprobar es lo único que separa un borrador de un correo
   enviado a un paciente. Va destacada, no escondida bajo el botón. */
.pro-aprobar {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--color-pro-bg);
  border: 1px solid var(--color-pro-border);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  cursor: pointer;
}
.pro-aprobar input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--color-pro); }
.pro-aprobar strong { color: var(--color-text); overflow-wrap: anywhere; }


/* ── PANELES (pagos, agenda, ajustes) ────────────────────── */

.pro-panel {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  border-radius: 14px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
}
.pro-panel h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--color-text);
}
.pro-panel__cab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.pro-panel__cab h3 { margin: 0; }


/* ── TABLAS ──────────────────────────────────────────────── */

/* El contenedor scrollea, no la página: una tabla ancha no puede hacer
   que el sitio entero se mueva de lado en el móvil. */
.pro-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.pro-tabla th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-2);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-3);
}
.pro-tabla td {
  padding: 10px;
  border-bottom: 1px solid var(--color-border-2);
  color: var(--color-text-2);
}
.pro-tabla__num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }
.pro-tabla code, .pro-dato code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}


/* ── CUENTAS BANCARIAS ───────────────────────────────────── */

.pro-cuenta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
}
.pro-cuenta__datos { display: grid; gap: 3px; min-width: 0; }
.pro-cuenta__datos strong { font-size: var(--font-sm); color: var(--color-text); }
.pro-cuenta__datos span { font-size: var(--font-xs); color: var(--color-text-2); }
.pro-cuenta__ref code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--color-pro-bg);
  color: var(--color-pro-text);
  font-weight: 700;
}


/* ── AGENDA ──────────────────────────────────────────────── */

.pro-dia { margin-bottom: var(--space-4); }
.pro-dia strong {
  display: block;
  font-size: var(--font-sm);
  color: var(--color-text);
  margin-bottom: 8px;
  text-transform: capitalize;
}
.pro-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-hora {
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--color-pro-bg);
  border: 1px solid var(--color-pro-border);
  color: var(--color-pro-text);
  font-size: var(--font-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ── VACÍOS Y PAGINACIÓN ─────────────────────────────────── */

.pro-vacio {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-3);
  font-size: var(--font-sm);
  line-height: 1.6;
}
.pro-vacio p { margin: 0 auto; max-width: 36ch; }
.pro-vacio--alto { display: grid; place-content: center; gap: var(--space-3); min-height: 320px; }

.pro-paginas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-xs);
  color: var(--color-text-3);
}

.pro-aviso--ok { background: var(--color-green-bg, rgba(34,197,94,0.08)); border-color: var(--color-green-text); }
.pro-aviso--ok strong { color: var(--color-green-text); }
.pro-aviso--ok p { white-space: pre-wrap; }


/* ── MÓVIL: UNA COLUMNA ──────────────────────────────────── */

@media (max-width: 860px) {
  .pro-bandeja { grid-template-columns: 1fr; }

  /* Abrir un correo tapa la lista, como en cualquier cliente de correo.
     Enseñar las dos apiladas obliga a bajar media pantalla para leer lo
     que se acaba de abrir. */
  .pro-bandeja:has(.pro-detalle) .pro-bandeja__lista { display: none; }
  .pro-volver { display: block; }
  .pro-detalle__cuerpo { max-height: none; }
  .pro-filtros { grid-template-columns: 1fr; }
  .pro-cuenta { flex-direction: column; align-items: stretch; }
}