/* Estilos GLOBALES de Cumple Fácilmente. Se sirven estáticos desde /public y se
   enlazan con <link> en todos los layouts (landing Vue, app Hotwire, auth, documento),
   igual que Bootstrap/FA (ver /public/vendor). Van en <link> render-blocking —NO por
   Vite— para que carguen ANTES del primer render y no haya "salto" al pintar.
   CSS plano (sin sass). Bootstrap/FA aportan la base; acá solo la marca Cumple. */

/* Marca */
.text-cumple { color: #1d72ff; }
.btn-cumple { background: #1d72ff; border-color: #1d72ff; color: #fff; font-weight: 600; }
.btn-cumple:hover { background: #145fe0; border-color: #145fe0; color: #fff; }
.btn-outline-cumple { background: transparent; border: 1px solid #1d72ff; color: #1d72ff; font-weight: 600; }
.btn-outline-cumple:hover { background: #1d72ff; color: #fff; }
/* Selector tipo pestaña (btn-check + btn-outline-cumple): el elegido queda RELLENO primary para
   distinguirlo del otro (antes ambos se veían igual, en outline azul). Ej.: Factura/Boleta. */
.btn-check:checked + .btn-outline-cumple,
.btn-check:active + .btn-outline-cumple { background: #1d72ff; border-color: #1d72ff; color: #fff; }
.bg-cumple { background-color: #1d72ff !important; }
.text-bg-cumple { background-color: #1d72ff !important; color: #fff !important; }
.border-cumple { border-color: #1d72ff !important; }
.bg-cumple-subtle { background-color: #eef4ff !important; }
/* Card de acción: borde celeste del color de la acción por defecto y, al pasar el mouse, toma el
   color pleno (fondo tinte + borde + sombra), como una opción "accionable" del agente. El color se
   parametriza con variables para tener variantes (ej. .verde). Azul por defecto (avanzar el
   diagnóstico); verde para exportar/compartir. */
.card-accionable { --acc: #1d72ff; --acc-soft: #9ec5ff; --acc-bg: #eef4ff; --acc-shadow: rgba(29,114,255,.15);
  border: 2px solid var(--acc-soft); box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.card-accionable:hover { background-color: var(--acc-bg); border-color: var(--acc);
  box-shadow: 0 .25rem .75rem var(--acc-shadow); }
.card-accionable.verde { --acc: #198754; --acc-soft: #a3cfbb; --acc-bg: #eafaf3; --acc-shadow: rgba(25,135,84,.15); }

/* CTA "Tu próximo paso" / "Ahora viene lo bueno": borde azul que aparece en hover. */
.cta-hover { border: 1px solid transparent; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  transition: border-color .15s ease, box-shadow .15s ease; }
.cta-hover:hover { border-color: #1d72ff; box-shadow: 0 .25rem .75rem rgba(29,114,255,.15); }
.cta-hover.rojo:hover { border-color: #dc3545; box-shadow: 0 .25rem .75rem rgba(220,53,69,.15); }

/* Ciclo de cumplimiento (Resumen): "cumplir es un ciclo, no un documento". Estados: hecho/en curso/pronto.
   POR DEFECTO es VERTICAL (apilado); pasa a HORIZONTAL solo cuando el contenedor tiene ancho suficiente
   (container query), evitando el corte feo de un flex-wrap a media fila. */
.ciclo-wrap { container-type: inline-size; }
/* La columna NO ocupa todo el ancho: acotada y CENTRADA (en vertical y en horizontal). El ancho real
   del contenedor lo mide .ciclo-wrap (full width) para decidir el modo. */
.ciclo-col { position: relative; max-width: 22rem; margin: 0 auto; padding-left: 1.4rem; }

/* ── Vertical (por defecto, cuando NO hay espacio) ── */
.ciclo { display: flex; flex-direction: column; gap: .4rem; }
.ciclo-paso { display: flex; flex-direction: row; align-items: center; text-align: left; gap: .8rem;
  padding: .7rem .9rem; border-radius: .8rem; background: #f6f8fc; }
.ciclo-texto { flex: 1 1 auto; min-width: 0; }
.ciclo-bolita { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.05rem; background: #e5e9f0; color: #8a94a6; }
.ciclo-verbo { font-weight: 600; line-height: 1.1; }
.ciclo-que { font-size: .78rem; color: #6b7280; line-height: 1.15; }
.ciclo-estado { flex: 0 0 auto; margin-left: auto; font-size: .66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; padding: .1rem .45rem; border-radius: 1rem; background: #e5e9f0; color: #6b7280; white-space: nowrap; }
.ciclo-flecha { align-self: center; color: #c4ccd8; transform: rotate(90deg); } /* → apunta hacia abajo */
.ciclo-hecho .ciclo-bolita, .ciclo-hecho .ciclo-estado { background: #d1e7dd; color: #0f5132; }
.ciclo-curso { background: #eef4ff; outline: 2px solid #1d72ff; }
.ciclo-curso .ciclo-bolita, .ciclo-curso .ciclo-estado { background: #1d72ff; color: #fff; }
.ciclo-pronto { opacity: .6; }
/* Retorno vertical: corchete "[" REDONDEADO a la izquierda (baja de Mantener, sube y entra a Saber).
   Mismo color que las flechas entre pasos (#c4ccd8). Punta → hacia Saber (derecha), en la esquina sup. */
.ciclo-retorno { position: absolute; left: .1rem; top: 1.5rem; bottom: 1.5rem; width: 1rem;
  border: 2px solid #c4ccd8; border-right: 0; border-radius: .9rem 0 0 .9rem; }

/* ── Horizontal (cuando SÍ hay espacio) ── */
@container (min-width: 620px) {
  .ciclo-col { max-width: none; padding-left: 0; } /* horizontal: ocupa todo el ancho */
  .ciclo { flex-direction: row; align-items: stretch; gap: .5rem; }
  .ciclo-paso { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; text-align: center;
    gap: .4rem; padding: .8rem .5rem; }
  .ciclo-texto { flex: 0 1 auto; }
  .ciclo-estado { margin-left: 0; }
  .ciclo-flecha { transform: none; } /* vuelve a apuntar a la derecha */
  /* Retorno horizontal: "U" bajo los pasos, con verticales bajo el centro de Saber/Mantener (8.6%). */
  .ciclo-retorno { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 1.5rem;
    margin: .55rem 8.6% 0; border: 2px solid #c4ccd8; border-top: 0; border-radius: 0 0 1rem 1rem; }
}

/* Controles dentro del modal de una ley (Resumen): el card ya tiene borde, así que el control no
   debe repetir su línea superior. */
.ley-controles .border-top { border-top: 0 !important; }

/* Editor de usuarios: fila marcada para eliminar (se aplica al "Guardar todo"). */
.fila-eliminar > td { background: #fdecec; }
.fila-eliminar { opacity: .6; }

/* Card de ley en el Resumen: accionable (abre el modal de controles). Hover marcado: se eleva, borde
   azul y sombra; el "botón" Ver controles se rellena para reforzar que es clickeable. */
.ley-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.ley-card:hover { transform: translateY(-3px); border-color: #1d72ff !important;
  box-shadow: 0 .6rem 1.4rem rgba(29,114,255,.22); }
.ley-card:hover .ley-card-btn { background: #1d72ff; border-color: #1d72ff; color: #fff; }
.card-accionable.rojo  { --acc: #dc3545; --acc-soft: #f1aeb5; --acc-bg: #fdeff1; --acc-shadow: rgba(220,53,69,.15); }
.card-accionable.cian  { --acc: #0aa2c0; --acc-soft: #9eeaf9; --acc-bg: #e7f9fd; --acc-shadow: rgba(13,202,240,.18); }

/* Chat de la entrevista: burbuja con "cola" hacia el avatar; el fondo del avatar CALZA con la
   burbuja de quien habla. Agente = gris; usuario = azul. */
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
/* Avatar del agente: el logo se recortaba con el mask redondo → sin círculo (rounded-square) y con
   `contain` para que el ícono se vea completo. */
.chat-avatar.agente { padding: 4px; background: #eef2f7; border: 1px solid #dbe2ec; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #1d72ff; }
.chat-avatar.usuario { background: #e0ecff; border: 1px solid #c6dbff;
  display: flex; align-items: center; justify-content: center; color: #1d72ff; }
.chat-burbuja { position: relative; max-width: 80%;
  border: 1px solid; border-radius: .6rem; padding: .5rem .75rem; }
.chat-burbuja.agente  { background: #eef2f7; border-color: #dbe2ec; }
/* El usuario escribe texto crudo: respeta sus saltos de línea. El agente va en markdown. */
.chat-burbuja.usuario { background: #e0ecff; border-color: #c6dbff; white-space: pre-wrap; }
/* Hora del mensaje (dentro de la burbuja, discreta). */
.chat-hora { display: block; font-size: .68rem; opacity: .55; margin-top: .2rem; }
.chat-burbuja.usuario .chat-hora { text-align: right; }

/* Secciones colapsables del chat ("Datos de la empresa" y "En preparación"): en móvil la lista
   colapsada tiene scroll (no ocupa todo el alto). */
@media (max-width: 991.98px) { .perfil-datos-lista, .docs-prep-lista { max-height: 45vh; overflow-y: auto; } }
/* Encabezado clickeable (toggle) con chevron animado; en desktop no colapsa (cursor normal). */
.perfil-datos-cab, .docs-prep-cab { cursor: pointer; }
.perfil-datos-cab .fa-chevron-down, .docs-prep-cab .fa-chevron-down { transition: transform .2s ease; }
.perfil-datos-cab[aria-expanded="true"] .fa-chevron-down, .docs-prep-cab[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
@media (min-width: 992px) { .perfil-datos-cab, .docs-prep-cab { cursor: default; } }
/* Expandido: ya no hace falta el hint "· toca para ver". */
.perfil-datos-cab[aria-expanded="true"] ~ p .perfil-toca, .docs-prep-cab[aria-expanded="true"] ~ p .perfil-toca { display: none; }

/* Opciones de priorización: solo las ACCIONABLES (fase propuesta) resaltan al pasar el mouse. */
.opcion-plan.accionable { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.opcion-plan.accionable:hover { background-color: #eef4ff; border-color: #1d72ff !important; box-shadow: 0 2px 8px rgba(29,114,255,.12); }
/* Opciones históricas (ya superadas o no elegidas): en gris, sin realce. */
.opcion-plan.opcion-leida { background: #f8f9fa; }

/* "Tu camino en Cumple" (colapsable). Angosto (móvil): las etapas ocupan su propia línea (100%),
   así el título + chevron quedan arriba. Ancho: las etapas van naturales (NO se estiran) junto al
   título y el chevron queda al final a la derecha. */
.camino-etapas { flex: 1 1 100%; }
@media (min-width: 768px) {
  .camino-etapas { flex: 0 1 auto; order: 2; }
  .camino-chevron { order: 3; }
}
/* Expandible ANIMADO: el card gana `.abierto` → el detalle crece (grid 0fr↔1fr), el chevron rota y
   el compacto se oculta. `.animar` (que se agrega tras el render inicial) habilita las transiciones
   para no animar al cargar la página. */
.camino-completo-anim { display: grid; grid-template-rows: 0fr; }
.camino-completo-inner { overflow: hidden; min-height: 0; }
[data-controller="camino-colapsable"].animar .camino-completo-anim { transition: grid-template-rows .3s ease; }
[data-controller="camino-colapsable"].animar .camino-chevron { transition: transform .3s ease; }
[data-controller="camino-colapsable"].abierto .camino-completo-anim { grid-template-rows: 1fr; }
[data-controller="camino-colapsable"].abierto .camino-chevron { transform: rotate(180deg); }
[data-controller="camino-colapsable"].abierto .camino-etapas { display: none; }

/* "Tu camino" va arriba de todo (antes del título): lo separamos bien del título (gap grande abajo).
   El acercamiento al navbar (gap chico arriba) lo hace el contenedor del flash, NO el camino, para que
   un banner de flash conserve su espacio y no se cruce con el camino. */
[data-controller="camino-colapsable"]:first-child { margin-bottom: 2.5rem; }
main.container:has([data-controller="camino-colapsable"]) > #flash { margin-top: -2rem; }
/* Hover en los encabezados colapsables (mismo efecto que las cards del diagnóstico). */
/* Encabezado clickeable del camino: cubre TODO el ancho del card-body (p-3 = 1rem) llevándolo
   a los bordes con margen negativo, para que el hover pinte el fondo completo del encabezado. */
.camino-cab { padding: .75rem 1rem; margin: -1rem; margin-bottom: 0; border-radius: .5rem .5rem 0 0; cursor: pointer; transition: background .15s ease; }
.camino-cab:hover { background: #f7f9fc; }
/* Contraído: el encabezado llega hasta el borde inferior del card (esquinas redondeadas y sin
   la franja sobrante del padding del card-body); expandido: bordes rectos abajo y sigue el detalle. */
[data-controller="camino-colapsable"]:not(.abierto) .camino-cab { margin-bottom: -1rem; border-radius: .5rem; }
[data-controller="camino-colapsable"].animar .camino-cab { transition: background .15s ease, margin-bottom .3s ease, border-radius .3s ease; }
/* "Datos del perfil": clickeable/hover solo cuando está colapsable (móvil). */
.perfil-datos-cab { padding: .75rem 1rem; margin: -1rem -1rem 0; border-radius: .5rem .5rem 0 0; cursor: pointer; transition: background .15s ease; }
@media (max-width: 991.98px) { .perfil-datos-cab:hover { background: #f7f9fc; } }
@media (min-width: 992px) { .perfil-datos-cab { cursor: default; padding: 0; margin: 0; } }

/* ── Chat flotante "Chat - Super Agente IA" (en /escudo): UN elemento que se transforma ────── */
.chat-flotante-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1040; animation: chat-flotante-fade .2s ease-out; }
/* Minimizado (default): tarjeta chica en la esquina. */
.chat-flotante {
  position: fixed; z-index: 1050; right: 1rem; bottom: 1rem; width: min(22rem, 88vw); height: 5.4rem;
  display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe2ec; border-radius: .75rem;
  box-shadow: 0 8px 28px rgba(15,23,42,.22); overflow: hidden; cursor: pointer;
  transition: width .28s cubic-bezier(.2,.7,.3,1), height .28s cubic-bezier(.2,.7,.3,1),
              right .28s cubic-bezier(.2,.7,.3,1), bottom .28s cubic-bezier(.2,.7,.3,1),
              border-radius .28s ease, box-shadow .28s ease;
}
.chat-flotante:hover:not(.abierta) { border-color: #1d72ff; }
/* Abierto: crece desde la esquina hasta casi toda la pantalla. */
.chat-flotante.abierta {
  right: 2.5vw; bottom: 2.5vh; width: 95vw; height: 95vh; cursor: default;
  box-shadow: 0 12px 48px rgba(15,23,42,.30);
}
.chat-flotante-cab {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-bottom: 1px solid #e5e7eb; background: #f8fafc; font-weight: 600;
}
.chat-flotante:not(.abierta) .chat-flotante-cab button { display: none; }
/* Burbuja del preview (solo minimizado). */
.chat-flotante-preview { flex: 0 0 auto; padding: .55rem .75rem; }
.chat-flotante.abierta .chat-flotante-preview { display: none; }
.chat-flotante-pill-burbuja { background: #eef2f7; border: 1px solid #dbe2ec; border-radius: .6rem;
  padding: .35rem .6rem; font-size: .8rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cuerpo (solo abierto): el chat usa TODO el alto (cadena flex-column → .chat con scroll interno). */
.chat-flotante-cuerpo { display: none; }
.chat-flotante.abierta .chat-flotante-cuerpo { flex: 1 1 auto; min-height: 0; padding: 1rem; display: flex; flex-direction: column; }
.chat-flotante-cuerpo turbo-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-flotante-cuerpo .row { flex: 1 1 auto; min-height: 0; }
.chat-flotante-cuerpo .col-lg-8 { display: flex; flex-direction: column; min-height: 0; }
.chat-flotante-cuerpo .col-lg-8 > .card { flex: 1 1 auto; min-height: 0; }
.chat-flotante-cuerpo .col-lg-8 > .card > .card-body { display: flex; flex-direction: column; min-height: 0; }
.chat-flotante.abierta .chat { flex: 1 1 0 !important; max-height: none !important; min-height: 0; }
.chat-flotante-cuerpo .col-lg-4 { max-height: 100%; overflow-y: auto; }
/* Modal a pantalla (casi) completa POR ENCIMA del chat: borrador de un documento. */
.doc-modal-overlay {
  /* En iOS `vh` cuenta el viewport grande (tras la barra de Safari), dejando el footer oculto;
     usamos `dvh` (viewport visible dinámico) con fallback a `vh`. Anclado arriba + alto dvh en vez
     de inset:0 para que el fondo también respete el área visible. */
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh;
  z-index: 1080; background: rgba(15,23,42,.55);
  display: flex; padding: 2vh 2vw; padding: 2dvh 2vw; animation: chat-flotante-fade .15s ease-out;
}
.doc-modal-panel {
  margin: auto; width: 96vw; max-width: none; height: 96vh; height: 96dvh; max-height: 100%;
  background: #fff; border-radius: .75rem;
  box-shadow: 0 16px 56px rgba(15,23,42,.35); display: flex; flex-direction: column; overflow: hidden;
}
/* El modal ocupa toda la pantalla, pero el DOCUMENTO se centra con ancho legible. */
.doc-modal-cuerpo > turbo-frame { display: block; max-width: 860px; margin: 0 auto; }
.doc-modal-barra {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .9rem; border-bottom: 1px solid #e5e7eb; background: #f8fafc;
}
.doc-modal-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; }
/* Header del modal de documento: descargas (izq) + Cerrar (der). Reemplaza al footer. */
.doc-modal-header {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .65rem .9rem; border-bottom: 1px solid #e5e7eb; background: #f8fafc;
}
/* Título de documento como link: el "Ver" (con ojo) aparece al pasar el mouse / al enfocar.
   Usa opacity (no display) para que el espacio quede reservado y el layout no salte. */
.doc-link .doc-ver { opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
.doc-link:hover .doc-ver, .doc-link:focus-visible .doc-ver { opacity: 1; }
/* Móvil (columnas apiladas): "Datos del perfil" ARRIBA (compacto/colapsado) y el chat crece abajo. */
@media (max-width: 991.98px) {
  .chat-flotante-cuerpo .row { flex-direction: column; flex-wrap: nowrap; }
  .chat-flotante-cuerpo .col-lg-4 { order: -1; flex: 0 0 auto; max-height: none; overflow: visible; }
  .chat-flotante-cuerpo .col-lg-8 { order: 0; flex: 1 1 auto; }
}
@keyframes chat-flotante-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 576px) {
  .chat-flotante.abierta { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border-radius: 0; }
}
/* Cola: doble triángulo (borde + relleno) apuntando al avatar, cerca del borde inferior. */
.chat-burbuja::before, .chat-burbuja::after { content: ''; position: absolute; bottom: 9px;
  width: 0; height: 0; border: 8px solid transparent; }
.chat-burbuja.agente::before  { left: -8px; border-right-color: #dbe2ec; border-left: 0; }
.chat-burbuja.agente::after   { left: -6px; border-right-color: #eef2f7; border-left: 0; }
.chat-burbuja.usuario::before { right: -8px; border-left-color: #c6dbff; border-right: 0; }
.chat-burbuja.usuario::after  { right: -6px; border-left-color: #e0ecff; border-right: 0; }

/* Markdown renderizado (memoria del agente, entregables): compacto y legible. */
.md-render > :first-child { margin-top: 0; }
.md-render > :last-child { margin-bottom: 0; }
.md-render h1, .md-render h2, .md-render h3, .md-render h4 { font-weight: 700; margin: .8rem 0 .3rem; line-height: 1.25; }
.md-render h1 { font-size: 1.1rem; } .md-render h2 { font-size: 1rem; }
.md-render h3, .md-render h4 { font-size: .92rem; }
.md-render p, .md-render ul, .md-render ol, .md-render blockquote, .md-render table { margin: 0 0 .5rem; }
.md-render ul, .md-render ol { padding-left: 1.25rem; }
.md-render li { margin-bottom: .15rem; }
.md-render code { background: #eef2f7; padding: .05rem .3rem; border-radius: .25rem; font-size: .85em; }
.md-render pre { background: #eef2f7; padding: .5rem .75rem; border-radius: .4rem; overflow: auto; }
/* display:block + overflow-x deja que una tabla ancha SCROLLEE en vez de cortarse. */
.md-render table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: .9em; }
.md-render th, .md-render td { border: 1px solid #dbe2ec; padding: .35rem .55rem; text-align: left; vertical-align: top; }
.md-render thead th { background: #f1f5f9; font-weight: 600; border-bottom: 2px solid #cbd5e1; }
.md-render mark, mark.completar { background: #fff3cd; color: #7a5900; padding: 0 .2em; border-radius: .2em; }
.md-render pre code { background: none; padding: 0; }
.md-render blockquote { border-left: 3px solid #d6e4ff; padding-left: .75rem; color: #55606e; }
.md-render table { border-collapse: collapse; width: 100%; font-size: .9em; }
.md-render th, .md-render td { border: 1px solid #e1e6ee; padding: .25rem .5rem; text-align: left; }
.md-render th { background: #f7f9fc; }

/* App autenticada (server-rendered con Hotwire) */
.app-body { background: #f7f9fc; min-height: 100vh; }
.empresa-activa { background: #eef4ff; border: 1px solid #d6e4ff; color: #1d4ed8; font-size: .9rem; }

/* Stepper de onboarding (panel) */
.lista-pasos .paso-num {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .9rem;
}
.lista-pasos .paso-hecho .paso-num { background: #12855a; color: #fff; }
.lista-pasos .paso-actual .paso-num { background: #1d72ff; color: #fff; }
.lista-pasos .paso-pendiente .paso-num { background: #e6e9ee; color: #8a929c; }
.lista-pasos .paso-pendiente strong { color: #8a929c; }

/* Matriz de riesgos (determinación) — heatmap 5×5 */
.matriz-wrap { display: flex; align-items: stretch; gap: .4rem; }
.matriz-eje-titulo-y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; color: #8a929c; font-size: .8rem; }
.matriz { display: grid; grid-template-columns: 1.6rem repeat(5, minmax(3rem, 1fr)); gap: 4px; flex: 1; }
.matriz-eje-y, .matriz-eje-x, .matriz-esquina { display: flex; align-items: center; justify-content: center; color: #8a929c; font-size: .8rem; }
.matriz-celda { min-height: 3.2rem; border-radius: .35rem; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center; padding: 3px; }
.matriz-punto { background: rgba(255,255,255,.92); color: #21252a; border-radius: 1rem; padding: 1px 7px; font-size: .72rem; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.matriz-eje-titulo-x { text-align: center; color: #8a929c; font-size: .8rem; margin-top: .2rem; padding-left: 1.6rem; }
.leyenda-color { width: 1rem; height: 1rem; border-radius: .25rem; display: inline-block; }

/* Bandas del semáforo (celdas, badges y leyenda comparten color) */
.banda-bajo    { background: #12855a; color: #fff; }
.banda-medio   { background: #c98a00; color: #fff; }
.banda-alto    { background: #d9730d; color: #fff; }
.banda-critico { background: #d92d20; color: #fff; }
.banda-neutro  { background: #e6e9ee; color: #5a6270; }
.registro, .panel { max-width: 34rem; }
.icon-ok { font-size: 2.5rem; color: #12855a; }

/* Planilla "Respuestas del equipo": la pregunta ocupa toda la fila (negrita) y las
   respuestas de cada persona van debajo, agrupadas (sin línea entre pregunta y respuestas). */
.tabla-equipo .col-persona { min-width: 11rem; }
.tabla-equipo .fila-pregunta td { border-bottom: 0; padding-top: 1rem; }
.tabla-equipo .fila-respuestas td { border-top: 0; padding-top: .15rem; }
.tabla-equipo .fila-respuestas td div + div { margin-top: .1rem; }

/* Obligación expandible en "Respuestas consolidadas": el nombre despliega descripción + referencia. */
.oblig-detalle > summary { cursor: pointer; list-style: none; }
.oblig-detalle > summary::-webkit-details-marker { display: none; }
.oblig-detalle > summary:hover { color: #1d5fd0; }
.oblig-cuerpo { margin: .2rem 0 .5rem 1.4rem; padding: .55rem .75rem; background: #f7f9fc; border-radius: .5rem; font-size: .85rem; color: #5a6270; }
.oblig-cuerpo a { font-weight: 600; }

/* Indicador de "trabajando" para envíos Turbo (el cuestionario re-renderiza un frame por
   cada clic): spinner en el control pinchado + resto atenuado (sin barra superior, distrae).
   Ver el listener turbo:submit-start/-end en aplicacion.js. */
.turbo-cargando, .turbo-cargando * { cursor: progress !important; }

@keyframes cumple-spin { to { transform: rotate(360deg); } }
.opcion.enviando, .btn.enviando, .step.enviando { pointer-events: none; }
/* En una opción, el spinner reemplaza el check. */
.opcion.enviando .check i { display: none; }
.opcion.enviando .check::after,
.btn.enviando::after {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cumple-spin .6s linear infinite;
}
.btn.enviando::after { margin-left: .5em; }
/* Mientras se envía una opción, el resto se atenúa y no acepta clics. */
.opciones:has(.opcion.enviando) .opcion:not(.enviando) { opacity: .45; pointer-events: none; }

/* Escalera de madurez de un control: niveles alcanzados (sólido) → faltantes (outline). */
.escalera-madurez { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.escalera-madurez .badge.bg-transparent { opacity: .7; }
.escalera-flecha { color: #b0b7c0; font-weight: 700; }

/* Tarjetas colapsables del diagnóstico: un <details> con aspecto de card. Cerrado muestra
   solo el título (el summary); al abrir aparece el cuerpo. La flecha gira al abrir. */
.card-colapsable > .card-colapsable-cab {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .25rem;
  padding: 1rem 1.25rem; border-radius: inherit;
}
.card-colapsable > .card-colapsable-cab::-webkit-details-marker { display: none; }
.card-colapsable.expandido > .card-colapsable-cab { padding-bottom: .35rem; }
.card-colapsable > .card-colapsable-cab:hover { background: #f7f9fc; }
.card-colapsable-flecha { transition: transform .15s ease; }
.card-colapsable.expandido > .card-colapsable-cab .card-colapsable-flecha { transform: rotate(180deg); }

/* Apertura/cierre ANIMADO del contenido (igual que "Tu camino"): el cuerpo desliza su alto con el
   truco grid 0fr↔1fr. Lo maneja el controller card-colapsable (mantiene el <details> abierto durante
   el cierre para poder animarlo; la clase .expandido gatilla la transición). */
.card-colapsable .cc-anim { display: grid; grid-template-rows: 0fr; }
.card-colapsable .cc-inner { overflow: hidden; min-height: 0; }
.card-colapsable.animar .cc-anim { transition: grid-template-rows .3s ease; }
.card-colapsable.expandido .cc-anim { grid-template-rows: 1fr; }
/* Fallback: antes de que el controller corra (o sin JS), un <details open> muestra su contenido. */
.card-colapsable:not(.animar)[open] .cc-anim { grid-template-rows: 1fr; }

/* Exportar a PDF: al imprimir, todo va expandido (el JS abre los <details>) y sin cromo. */
@media print {
  html, body, .app-body { background: #fff !important; }
  .navbar, .no-print, .btn, .card-colapsable-flecha,
  form[data-turbo="false"] { display: none !important; }
  main.container { padding: 0 !important; max-width: 100% !important; }
  .card, details.card-colapsable {
    box-shadow: none !important; border: 1px solid #ccd3db !important;
    break-inside: avoid; page-break-inside: avoid; margin-bottom: .6rem !important;
  }
  .card-colapsable > .card-colapsable-cab { cursor: default; padding-bottom: .35rem; }
  a[target="_blank"] { color: inherit !important; text-decoration: none !important; }
}

/* Input de "chips" para correos (modal Comparte con tu equipo). El contenedor imita un
   .form-control; los correos confirmados quedan como etiquetas editables con una X. */
.correos-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  min-height: calc(3.5rem + 2px); cursor: text;
}
.correos-chips:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(29,114,255,.25); }
.correos-chips .chips { display: contents; }
.correos-chips input {
  border: 0; outline: 0; padding: 0; flex: 1 1 8rem; min-width: 8rem;
  background: transparent; font: inherit; color: inherit;
}
.correo-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #eaf1ff; color: #145fe0; border: 1px solid #cfe0ff;
  border-radius: 2rem; padding: .1rem .25rem .1rem .6rem; font-size: .875rem; line-height: 1.4;
}
.correo-chip__txt { cursor: text; }
.correo-chip__txt:hover { text-decoration: underline; }
.correo-chip__x {
  border: 0; background: transparent; color: #145fe0; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .15rem; border-radius: 50%;
}
.correo-chip__x:hover { background: #cfe0ff; }

/* Placeholders de formularios: gris tenue y en cursiva (consistente en toda la app). */
.form-control::placeholder, .correos-chips input::placeholder { color: #98a2b3; font-style: italic; opacity: 1; }

/* Paywall del diagnóstico (secciones bloqueadas cuando el tenant no tiene plan): se muestra una
   MUESTRA del contenido y el resto se desvanece, con un botón de pago montado sobre el degradado
   (estilo artículos de sitios de noticias). Ver diagnostico/_seccion.html.erb. */
.paywall { position: relative; max-height: 220px; overflow: hidden; }
.paywall::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 170px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 88%);
}
/* El contenido de la muestra no es interactivo (no se puede copiar ni clickear lo bloqueado). */
.paywall-contenido { pointer-events: none; user-select: none; }
.paywall-cta { position: relative; margin-top: -2rem; }

/* Botón "Mejora tu plan" (paywall): gradiente naranja de "upgrade" con texto blanco, para distinguir
   el CTA del azul de marca. Ver diagnostico/_seccion. */
.btn-mejora {
  background-image: linear-gradient(135deg, #ff8c42 0%, #f2540b 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(242, 84, 11, .35);
}
.btn-mejora:hover, .btn-mejora:focus {
  background-image: linear-gradient(135deg, #ff9a58 0%, #ff6218 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(242, 84, 11, .45);
}
.btn-mejora:active { color: #fff; filter: brightness(.97); }
.btn-mejora:focus-visible { outline: 2px solid #c2440a; outline-offset: 2px; }

/* Badge "Plan gratuito" del navbar (shared/_barra_app): BORDE naranja (no fondo), texto naranja. */
.plan-actual.gratuito {
  background: transparent;
  border: 1px solid #f2540b;
  color: #f2540b;
  font-weight: 600;
}
.plan-actual.gratuito:hover, .plan-actual.gratuito:focus { background: #fff3ec; color: #d8480a; }
.plan-actual.gratuito:focus-visible { outline: 2px solid #c2440a; outline-offset: 2px; }

/* Botones "Contratar" del modal de planes: un color por plan. Diagnóstico = naranja (durazno),
   PRO = verde, Premium = morado. Ver shared/_modal_planes. */
.btn-plan-1 { background-color: #ffcfa3; border: none; color: #7a3600; font-weight: 600; }
.btn-plan-1:hover, .btn-plan-1:focus { background-color: #ffbe85; color: #7a3600; }
.btn-plan-2 { background-color: #1e9e5a; border: none; color: #fff; font-weight: 600; }
.btn-plan-2:hover, .btn-plan-2:focus { background-color: #17864b; color: #fff; }
.btn-plan-3 { background-color: #7c3aed; border: none; color: #fff; font-weight: 600; }
.btn-plan-3:hover, .btn-plan-3:focus { background-color: #6b27dd; color: #fff; }
.btn-plan-1:focus-visible { outline: 2px solid #c2440a; outline-offset: 2px; }
.btn-plan-2:focus-visible { outline: 2px solid #12673a; outline-offset: 2px; }
.btn-plan-3:focus-visible { outline: 2px solid #5a1fc0; outline-offset: 2px; }

/* Banner del cupón automático en el modal de planes (oferta que el usuario pincha para aplicar).
   Naranja punteado = disponible; verde = aplicado. Ver shared/_modal_planes + cupon-planes. */
.cupon-oferta { background: #fff7ed; border: 1px dashed #f2540b; color: #7a3600; }
.cupon-oferta .fa-ticket { color: #f2540b; }
.cupon-oferta.cupon-aplicado { background: #eafaf3; border: 1px solid #198754; color: #12673a; }
.cupon-oferta.cupon-aplicado .fa-ticket { color: #198754; }

/* Modal "Mejorar mi plan": mismo fondo que la sección "Planes y Precios" del landing (.section-alt)
   y más ANCHO, para que se sienta igual que el landing (las tarjetas blancas resaltan sobre el gris). */
#modalPlanes .modal-content { background: #f7f9fc; }
#modalPlanes .modal-header { border-bottom-color: #e3e8ef; }
#modalPlanes .modal-body { padding: 1.5rem; }
#modalPlanes .modal-dialog.modal-planes { max-width: min(1360px, 95vw); }

/* La marca del agente (ícono robot + "Súper Agente AI") nunca se parte entre dos líneas. */
.marca-agente { white-space: nowrap; }

/* Plan elegido: se resalta en el FONDO (tras el backdrop del modal "Datos para tu documento") para
   que el usuario vea cuál seleccionó. Ver contratar-facturacion#abrir. */
.card-plan.plan-seleccionado {
  outline: 3px solid var(--cumple); outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(29, 114, 255, 0.18);
}

/* Tarjeta "Comienza gratis" (misma del landing): puerta de entrada sin costo, ARRIBA de los planes. */
.card-gratis {
  border: 2px solid #12855a; border-radius: 1rem;
  background: linear-gradient(135deg, #f4fbf7 0%, #e8f6ef 100%);
}
.btn-gratis { background: #12855a; color: #fff; font-weight: 700; border: 0; }
.btn-gratis:hover { background: #0e6e4a; color: #fff; }
.gratis-detalle li { display: flex; align-items: flex-start; gap: 0.6rem; color: #2f4038; font-size: 0.98rem; }
.gratis-detalle .fa-check { color: #12855a; margin-top: 0.28rem; flex: 0 0 auto; }

/* Tarjeta "Solicita asesoría de un experto humano" (misma del landing): banda celeste ABAJO,
   BLOQUEADA (se contrata dentro de la plataforma, no acá). */
.card-asesoria-banner {
  border: 2px solid #0284c7; border-radius: 1rem;
  background: linear-gradient(135deg, #f2f9ff 0%, #e0f2fe 100%);
}
.card-asesoria-banner .plan-monto { font-size: 1.6rem; font-weight: 800; color: var(--cumple-dark); }
.card-asesoria-banner .plan-antes { text-decoration: line-through; color: #94a3b8; margin-right: .4rem; }
.asesoria-detalle li { display: flex; align-items: flex-start; gap: 0.6rem; color: #24435a; font-size: 0.98rem; }
.asesoria-detalle .fa-check { color: #0284c7; margin-top: 0.28rem; flex: 0 0 auto; }

/* Premium: una ley desmarcada (no se contrata) se atenúa y su precio se tacha. Ver _modal_planes. */
.premium-grupo { cursor: pointer; }
.premium-grupo.grupo-desmarcado { opacity: .5; }
.premium-grupo.grupo-desmarcado .premium-grupo-precio { text-decoration: line-through; }

/* ── Planes: mismo estilo que el landing (cards + precio grande) ────────────── */
:root { --cumple: #1d72ff; --cumple-dark: #21252a; }
.card-plan { border: 1px solid #eef0f3; border-radius: 1rem; background: #fff; transition: transform .15s, box-shadow .15s; }
.card-plan:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(33,37,42,.08); }
.card-plan.destacado { border: 2px solid var(--cumple); box-shadow: 0 12px 30px rgba(29,114,255,.12); }
.card-plan.plan-pronto { opacity: .92; }
.badge-plan { background: var(--cumple); color: #fff; font-weight: 600; border-radius: 2rem; padding: .3rem .7rem; }
.plan-detalle li { color: #5b6672; }
/* Precio grande (el controller cupon-planes escribe dentro; el tachado y el sufijo quedan chicos) */
.plan-precio-app { font-size: 2rem; font-weight: 800; color: var(--cumple-dark); line-height: 1.15; }
.plan-precio-app s { font-size: .55em; font-weight: 600; color: #9aa6b4; }
.plan-precio-app .text-secondary, .plan-precio-app small { font-size: .5em; }

/* ── Footer: mismo estilo que el landing (oscuro) ───────────────────────────── */
.footer { background: var(--cumple-dark); color: #fff; padding: 2.5rem 0; }
.footer-marca { display: inline-flex; align-items: center; gap: 0; }
.footer-mark { height: 28px; display: block; filter: brightness(0) invert(1); }
.footer-marca-texto { display: inline-flex; align-items: baseline; gap: .25rem; line-height: 1; }
.footer-marca-nombre { font-weight: 700; font-size: 1.25rem; color: #fff; }
.footer-marca-sufijo { font-size: .7rem; color: rgba(255,255,255,.6); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); }
.footer-link { color: rgba(255,255,255,.7); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-sep { color: rgba(255,255,255,.35); margin: 0 .6rem; }