/* Esta hoja sólo se carga en "/", así que estas reglas de html/body/main son
   seguras: evitan que <main> (overflow-y-auto del layout compartido) abra un
   segundo scroll por encima de #chat-box cuando el alto real del móvil (barra
   de direcciones, notch) no calza con el calc(100svh-86px) fijo del chat-shell.
   Sin esto el móvil mostraba scroll doble: el de la página y el del chat. */
html, body { height: 100%; overflow: hidden; }
main { overflow: hidden; min-height: 0; }

/* Paleta de marca de CatólicosGPT (crema/oro/vinotinto), la misma que usa el
   resto del sitio, en lugar del azul/turquesa genérico que traía esta hoja. */
body.agent-home{background:var(--cream-2)!important}
.agent-home .chat-panel{border:1px solid var(--border)!important;border-radius:22px!important;box-shadow:0 12px 34px rgba(37,27,21,.06)!important;background:#fff!important}
.agent-home .chat-topbar{background:#fff!important;border-color:var(--border)!important}
/* La pantalla de bienvenida se oculta con la clase .hidden, pero el propio
   contenedor trae .flex: ambas utilidades de Tailwind pesan igual y ganaba la
   que estuviera después en la hoja, así que el saludo seguía ocupando pantalla
   encima de la primera respuesta. */
.agent-home #welcome-screen.hidden{display:none!important}
.agent-home #welcome-screen h1{font-weight:600!important;letter-spacing:-.02em!important;color:var(--espresso)!important;max-width:640px!important;line-height:1.14!important}
.agent-home #welcome-screen>div:first-child{margin-top:6px!important}
.agent-home #welcome-screen>p{color:var(--ink-2)!important;max-width:540px!important}
.agent-home .chat-bubble{box-shadow:none!important;line-height:1.7!important}
.agent-home .agent-answer{width:100%;max-width:850px;overflow-wrap:anywhere}
.agent-home .chat-input-wrap{box-shadow:none!important;background:#fff!important}

/* ── Compositor multirenglón ──────────────────────────────────────────────
   El campo es un <textarea> que crece con el texto (hasta 160px) en lugar de
   un input de una sola línea: escribir una pregunta larga desde el teléfono
   ya no obliga a leerla por una rendija. */
/* stable-start aplica `.chat-input-wrap button{display:inline-flex!important}`
   a todos los botones del compositor, lo que pisa el display:none del atributo
   [hidden]: sin esta regla el botón de detener ocupaba 48px permanentemente y
   estrechaba el campo de texto. Necesita más especificidad que aquella. */
.agent-home .chat-input-wrap .agent-stop[hidden]{display:none!important}
.agent-home .chat-input-wrap .agent-stop{background:#76564a!important;font-size:13px!important}
.agent-home #chat-input{border-radius:18px!important;background:var(--cream)!important;border-color:var(--border)!important;min-height:44px;max-height:160px;overflow-y:auto;line-height:1.5!important}
/* ── Respuesta ────────────────────────────────────────────────────────────*/
.agent-table{overflow-x:auto;margin:18px 0}
.agent-table table{border-collapse:collapse;width:100%;font-size:14px}
.agent-table th,.agent-table td{padding:12px;border:1px solid var(--border);text-align:left;min-width:115px}
.agent-table th{background:var(--gold-light);color:var(--maroon)}
.agent-answer-text{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2)}
.agent-error{color:var(--maroon);font-size:14px}

/* Fuentes: antes vivían escondidas tras un <details> cerrado. Son lo que
   distingue a este agente, así que ahora se ven como tarjetas con su
   referencia y el enlace real al documento que devuelve Magisterium. */
.agent-sources{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border)}
.agent-sources-title{margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.agent-source-list{display:flex;flex-direction:column;gap:10px}
.agent-source{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:var(--cream)}
.agent-source-head{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--espresso)}
.agent-source-id{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:var(--gold-light);color:var(--maroon);font-size:10px;font-weight:700}
.agent-source-meta{margin:6px 0 0;color:var(--ink-2);font-size:12px}
/* La cita se recorta a tres renglones: es una pista para decidir si abrir el
   documento, no el documento entero dentro de la respuesta. */
.agent-source-quote{margin:8px 0 0;padding-left:10px;border-left:2px solid var(--gold);color:var(--ink-2);font-size:13px;font-style:italic;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Aviso de idioma para los documentos que no están en español. */
.agent-source-lang{display:inline-block;margin-top:8px;margin-right:12px;padding:2px 9px;border-radius:999px;background:var(--cream-2);border:1px solid var(--border);color:var(--ink-2);font-size:11px;font-weight:700}
.agent-source-link{display:inline-block;margin-top:9px;color:var(--maroon);font-size:12px;font-weight:700;text-decoration:underline}
.agent-source.is-extra{display:none}
.agent-sources.is-open .agent-source.is-extra{display:block}
.agent-sources-more{margin-top:10px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--maroon);font-size:12px;font-weight:700;cursor:pointer}
.agent-sources-more:hover{border-color:var(--gold);background:var(--gold-light)}

.agent-downloads{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.agent-downloads button{padding:10px 15px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--maroon);font-size:13px;cursor:pointer;min-height:44px}
.agent-downloads button:hover{border-color:var(--gold);background:var(--gold-light)}
/* Invitación a Premium, justo donde se intentó usar la función de pago. */
.agent-premium{margin-top:12px;padding:14px 16px;border:1px solid var(--gold);border-radius:14px;background:var(--gold-light);display:flex;flex-direction:column;gap:7px}
.agent-premium-title{color:var(--maroon);font-size:14px;font-weight:800}
.agent-premium-text{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5}
.agent-premium-cta{align-self:flex-start;margin-top:3px;padding:10px 18px;border-radius:999px;background:var(--maroon);color:#fff;font-size:13px;font-weight:800;text-decoration:none}
.agent-premium-cta:hover{background:var(--gold-deep)}
/* El botón bloqueado se ve, pero se distingue del que sí descarga. */
.agent-downloads button.is-premium{border-color:var(--gold);color:var(--gold-deep)}
.agent-downloads button.is-premium::after{content:' ✦';font-weight:800}

.agent-home button:focus-visible,.agent-home a:focus-visible,.agent-home textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Panel "Pasos de investigación": una fila por evento step del servidor, con
   un ícono giratorio mientras está activa y un adelanto en vivo del texto que
   Magisterium va redactando (step-delta), al estilo del propio Magisterium. */
.agent-steps{border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-bottom:14px;background:var(--cream)}
.agent-steps-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:2px 0;font:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);cursor:pointer}
.agent-steps-toggle span:last-child{transition:transform .15s ease}
.agent-steps.is-collapsed .agent-steps-toggle span:last-child{transform:rotate(-90deg)}
.agent-steps.is-collapsed .agent-steps-list{display:none}
.agent-steps-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.agent-step{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2)}
.agent-step.active{color:var(--espresso)}
.agent-step-icon{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;line-height:1;color:var(--gold-deep)}
.agent-step.active .agent-step-icon{animation:agent-step-spin 1s linear infinite}
.agent-step.done .agent-step-icon{color:#3a7a4e}
.agent-step-preview{margin:3px 0 0;color:var(--ink-2);font-size:12px;font-style:italic;line-height:1.5;overflow-wrap:anywhere}
@keyframes agent-step-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.agent-step.active .agent-step-icon{animation:none}}

/* Siguientes pasos bajo la respuesta: formatos y preguntas relacionadas. */
.agent-quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.agent-quick-action{padding:8px 14px;border:1px solid var(--gold);border-radius:999px;background:var(--gold-light);color:var(--maroon);font-size:12px;font-weight:700;cursor:pointer}
.agent-quick-action:hover{background:var(--gold);color:#fff}
/* display:flex de .agent-quick-actions pisaría el atributo hidden */
.agent-more-panel[hidden]{display:none}
.agent-more-panel{margin-top:10px}
.agent-more-toggle{background:#fff}
.agent-related{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.agent-related-label{flex-basis:100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.agent-related-q{text-align:left;padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--espresso);font-size:13px;cursor:pointer}
.agent-related-q:hover{border-color:var(--gold);background:var(--cream)}

/* Estantería final: el material del propio sitio sobre el tema consultado.
   Cierra el recorrido —respuesta, fuentes, y a dónde seguir— en vez de dejar
   al lector en un callejón sin salida. */
.agent-library{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--border)}
.agent-library-title{margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.agent-library-title+.agent-articles,.agent-library-title+.agent-infografias{margin-bottom:18px}
.agent-related-presentations{display:grid;gap:9px;margin-bottom:18px}
.agent-related-presentation{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e1cfad;border-radius:12px;background:#fcf9f2;color:var(--espresso);text-decoration:none}
.agent-related-presentation:hover{border-color:var(--gold);background:#fff}
.agent-related-presentation-icon{color:var(--maroon);font-size:21px}
.agent-related-presentation-title{flex:1;font-size:13px;font-weight:700}
.agent-related-presentation-cta{font-size:11px;color:var(--maroon);font-weight:700}
@media(max-width:500px){.agent-related-presentation{flex-wrap:wrap}.agent-related-presentation-cta{width:100%;padding-left:31px}}
.agent-infografias{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.agent-infografia{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit}
.agent-infografia:hover{border-color:var(--gold)}
.agent-infografia img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--cream)}
.agent-infografia-body{display:flex;flex-direction:column;gap:5px;padding:10px 12px 12px}
.agent-infografia-title{font-size:13px;font-weight:700;color:var(--espresso);line-height:1.3}
.agent-infografia-cta{font-size:11px;font-weight:700;color:var(--maroon)}
/* server.js aplica .chat-bubble.bot ul{list-style-type:disc;margin-left:20px},
   que pesa más que .agent-articles a secas: la lista salía con viñetas y
   sangrada. Esta es una lista de enlaces, no una enumeración del texto. */
.agent-home .chat-bubble.bot ul.agent-articles,
.agent-articles{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column}
.agent-home .chat-bubble.bot ul.agent-articles li,
.agent-articles li{list-style:none!important;margin:0!important;border-top:1px solid var(--border)}
.agent-home .chat-bubble.bot ul.agent-articles li::marker{content:''}
.agent-articles li:first-child{border-top:0}
.agent-article-link{display:block;padding:11px 0;color:var(--espresso);font-size:14px;line-height:1.4;text-decoration:none}
.agent-article-link:hover{color:var(--maroon);text-decoration:underline}
.agent-article-link::after{content:' →';color:var(--gold-deep);font-weight:700}

/* Aviso de consultas restantes. Aparece solo cuando quedan pocas, así que
   puede permitirse ser visible sin competir con el compositor. */
.agent-quota{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:8px 16px;border-top:1px solid var(--border);background:var(--gold-light);color:var(--maroon);font-size:12px;font-weight:600;text-align:center}
.agent-quota[hidden]{display:none}
.agent-quota-link{color:var(--maroon);font-weight:800;text-decoration:underline;white-space:nowrap}
.agent-presentation-credits{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;width:fit-content;max-width:100%;margin:0 auto 8px;padding:7px 13px;border:1px solid #e5cfa9;border-radius:12px;background:#fff8ec;color:var(--maroon);font-size:12px;line-height:1.35;text-align:center}
.agent-presentation-credits strong{font-weight:800;white-space:nowrap}
.agent-presentation-credits a{color:var(--maroon);font-weight:800;text-decoration:underline}
.agent-presentation-credits[hidden]{display:none}
@media(max-width:767px){.agent-presentation-credits{font-size:11px;padding:6px 9px;gap:3px 8px}}

@media(max-width:767px){
  /* La altura vuelve a ser explícita. Intenté repartirla por flex a través de
     main/h-full y esa cadena no daba una altura definida: el chat se encogía
     al alto de su contenido y dejaba media pantalla vacía. Se conserva dvh en
     vez de svh para que no quede hueco cuando la barra del navegador se oculta,
     que era el "marco" que recortaba la respuesta. */
  .agent-home .chat-shell{height:calc(100dvh - 70px)!important;min-height:0!important;width:100%!important;max-width:100%!important;padding:0!important;padding-inline:0!important;margin:0!important}
  .agent-home .chat-panel{border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}

  /* ── Una sola superficie ─────────────────────────────────────────────────
     En el teléfono la respuesta venía dentro de una tarjeta blanca con borde,
     que a su vez vivía dentro del panel, que a su vez dejaba ver el fondo
     crema por los lados; y dentro de ella los pasos y las fuentes eran otras
     cajas con su propio borde. Cuatro marcos anidados para leer un párrafo.
     A partir de aquí el contenido del asistente se escribe directamente sobre
     la página: el ancho completo es suyo y no hay más recuadros que los que
     de verdad separan cosas distintas. */
  .agent-home #chat-box{padding:0!important}
  .agent-home .chat-bubble{max-width:100%!important;margin-bottom:0!important}
  .agent-home .chat-bubble.bot{width:100%!important;border:0!important;border-radius:0!important;background:transparent!important;padding:14px 16px 20px!important;box-shadow:none!important}
  /* La pregunta sí conserva su burbuja: es lo que permite distinguir de un
     vistazo lo que escribió el usuario de lo que respondió el asistente. */
  .agent-home .chat-bubble.user{max-width:86%!important;margin:12px 16px 2px!important;align-self:flex-end!important;padding:10px 14px!important}

  /* Los pasos de investigación pierden su caja: son una línea de estado, no
     un documento aparte. */
  .agent-home .agent-steps{border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;margin:0 0 12px!important}
  .agent-home .agent-steps-list{margin-top:6px}

  /* Las fuentes pasan de tarjetas apiladas a una lista con filas separadas por
     una línea fina: la misma información, tres marcos menos. */
  .agent-home .agent-source{border:0!important;border-radius:0!important;background:transparent!important;padding:12px 0!important;border-top:1px solid var(--border)!important}
  .agent-home .agent-source-list{gap:0!important}
  .agent-home .agent-sources-more{width:100%;text-align:center}

  /* ── Tablas apiladas ─────────────────────────────────────────────────────
     Un cuadro sinóptico de cuatro columnas no cabe en 390px: se salía de la
     pantalla y había que arrastrarlo de lado para leer la segunda columna, con
     la primera ya fuera de vista. Cada fila pasa a leerse en vertical, con el
     nombre de la columna delante de su valor (data-label, que pone agent-ui.js).
     Nada se sale del ancho y no hay scroll horizontal. */
  .agent-home .chat-bubble.bot .agent-table{overflow-x:visible!important;margin:14px 0}
  .agent-home .chat-bubble.bot .agent-table table,
  .agent-home .chat-bubble.bot .agent-table tbody,
  .agent-home .chat-bubble.bot .agent-table tr,
  .agent-home .chat-bubble.bot .agent-table td{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .agent-home .chat-bubble.bot .agent-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
  .agent-home .chat-bubble.bot .agent-table tr{border:1px solid var(--border)!important;border-radius:12px;padding:4px 0;margin-bottom:10px;background:var(--cream)}
  .agent-home .chat-bubble.bot .agent-table td{border:0!important;padding:7px 13px!important;font-size:14px!important;line-height:1.45!important}
  .agent-home .chat-bubble.bot .agent-table td[data-label]::before{content:attr(data-label);display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--maroon);margin-bottom:2px}
  .agent-home .chat-bubble.bot .agent-table td:empty{display:none!important}

  /* Sin ancho explícito, el contenedor de bienvenida se estrechaba dentro del
     flex y el título se partía letra por letra. */
  .agent-home #welcome-screen{width:100%!important;max-width:100%!important;padding:8px 18px!important;align-items:stretch!important}
  .agent-home #welcome-screen>div{width:100%!important;max-width:100%!important}
  .agent-home #welcome-screen h1{font-size:26px!important;width:100%!important;max-width:100%!important;text-align:center!important;overflow-wrap:normal!important;word-break:normal!important}
  .agent-home .chat-input-wrap{padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important}
  .agent-home .agent-quick-actions,.agent-home .agent-related{gap:7px}
  .agent-home .agent-quick-action,.agent-home .agent-related-q{font-size:12px}
  .agent-home .agent-infografias{gap:10px}
  .agent-home .agent-infografia-title{font-size:12px}
}

/* ── Comandos rápidos (/guia, /homilia…) y botón "+" ──────────────────────
   Cerrado no ocupa nada: el "+" es un icono dentro de la barra, la etiqueta
   del comando elegido aparece solo mientras se escribe el tema, y el menú se
   abre encima del campo sin empujar la conversación. Las reglas llevan más
   especificidad que las de stable-start, que dan a todo botón de la barra
   48px y fondo granate. */
.agent-home #chat-form{position:relative}
.agent-home .chat-input-wrap .agent-plus,.agent-home #chat-form .agent-plus{flex:0 0 40px!important;width:40px!important;height:40px!important;min-height:40px!important;border-radius:999px!important;background:transparent!important;color:var(--maroon)!important;border:1px solid var(--border)!important;font-size:22px!important;font-weight:400!important;line-height:1!important;box-shadow:none!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.agent-home .chat-input-wrap .agent-plus[hidden],.agent-home #chat-form .agent-plus[hidden]{display:none!important}
.agent-home .agent-plus:hover,.agent-home .agent-plus[aria-expanded="true"]{background:var(--gold-light)!important}
.agent-cmd-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);max-height:min(52vh,420px);overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 32px rgba(45,36,30,.16);padding:8px;z-index:60;font-size:14px;text-align:left}
.agent-cmd-menu[hidden]{display:none}
.agent-cmd-help{margin:4px 8px 8px;font-size:12px;color:var(--ink-2)}
.agent-cmd-group{display:block;margin:10px 8px 4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.agent-cmd-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:8px 10px;border-radius:10px;cursor:pointer}
.agent-cmd-item:hover,.agent-cmd-item.is-active{background:var(--cream)}
.agent-cmd-key{font-weight:700;color:var(--maroon);font-size:13px}
.agent-cmd-title{color:var(--ink,#2D241E);font-size:14px}
.agent-cmd-ej{grid-column:2;color:var(--ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-home .chat-input-wrap>.agent-cmd-chipbar{max-width:48rem;margin:0 auto 6px!important;font-size:13px!important;line-height:1.3!important;display:flex;text-align:left}
.agent-home .chat-input-wrap>.agent-cmd-chipbar[hidden]{display:none!important}
.agent-cmd-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 12px;border-radius:999px;background:var(--gold-light);color:var(--maroon);font-weight:600;font-size:13px}
.agent-cmd-chip-x{cursor:pointer;padding:0 4px;border-radius:999px;font-size:12px}
.agent-cmd-chip-x:hover{background:rgba(94,27,34,.12)}
@media (max-width:640px){.agent-cmd-ej{display:none}.agent-cmd-menu{max-height:48vh}}

/* ── Documentos (plan de encuentro, vía crucis, guía…) ────────────────────
   El chat ya no pinta todo como párrafos: título, secciones, pasos
   numerados, viñetas y textos para meditar se ven como un documento. */
.agent-answer .agent-doc-h1{font-family:var(--font-display,inherit);font-size:1.45rem;line-height:1.25;color:var(--maroon);margin:4px 0 10px;font-weight:700}
.agent-answer .agent-doc-h2{font-family:var(--font-display,inherit);font-size:1.12rem;line-height:1.3;color:var(--maroon);margin:22px 0 8px;padding-top:12px;border-top:1px solid var(--border);font-weight:700}
.agent-answer .agent-doc-h3{font-size:1rem;color:var(--ink,#2D241E);margin:16px 0 6px;font-weight:700}
.agent-answer .agent-doc-list{margin:8px 0 12px;padding-left:1.4em}
.agent-answer ol.agent-doc-list{list-style:decimal}
.agent-answer ul.agent-doc-list{list-style:disc}
.agent-answer .agent-doc-list li{margin:6px 0;line-height:1.6}
.agent-answer .agent-doc-list li::marker{color:var(--maroon);font-weight:700}
.agent-answer .agent-doc-list li>p{margin:4px 0 0}
.agent-answer .agent-doc-cita{margin:12px 0 14px;padding:12px 16px;border-left:3px solid var(--gold,#BC8A36);background:var(--cream);border-radius:0 12px 12px 0;font-style:italic}
.agent-answer .agent-doc-cita p{margin:0 0 4px}
.agent-answer .agent-doc-cita .agent-doc-ref{font-style:normal;font-size:.85em;color:var(--ink-2);margin:4px 0 0}
.agent-answer hr{border:0;border-top:1px solid var(--border);margin:18px 0}
.agent-answer strong{color:var(--ink,#2D241E);font-weight:700}

/* Página de referencia del sitio (una oración completa, una guía) que
   responde justo a lo preguntado: va primero y como tarjeta. */
.agent-destacado{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:14px 16px;border:1px solid var(--gold,#BC8A36);border-radius:14px;background:var(--cream);text-decoration:none!important}
.agent-destacado:hover{background:var(--gold-light)}
.agent-destacado-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.agent-destacado-title{font-weight:700;color:var(--maroon);font-size:15px;line-height:1.35}
.agent-destacado-summary{font-size:13px;color:var(--ink-2);line-height:1.45}
.agent-destacado-cta{font-size:13px;font-weight:700;color:var(--maroon);margin-top:2px}


/* Estado inicial del chat: bienvenida y compositor juntos; al iniciar conversación
   se retira chat-idle y vuelve el panel de mensajes desplazable con el compositor abajo. */
.agent-home .chat-panel.clean-chat.chat-idle{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  justify-items:stretch!important;
  gap:clamp(10px,2vh,22px)!important;
  overflow:visible!important;
}
.agent-home .chat-panel.clean-chat.chat-idle #chat-box,
.agent-home .chat-panel.clean-chat.chat-idle #welcome-screen{display:contents!important}
.agent-home .chat-panel.clean-chat.chat-idle #welcome-screen>div:first-child{
  width:100%!important;max-width:48rem!important;margin:0 auto!important;padding-inline:16px!important
}
.agent-home .chat-panel.clean-chat.chat-idle #welcome-screen h1{
  width:100%!important;max-width:100%!important;margin:0!important;text-align:center!important
}
.agent-home .chat-panel.clean-chat.chat-idle .chat-input-wrap{
  position:relative!important;inset:auto!important;align-self:stretch!important;
  width:100%!important;max-width:64rem!important;margin:0 auto!important;
  padding:0 16px!important;border:0!important;background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;z-index:auto!important
}
.agent-home .chat-panel.clean-chat.chat-idle #chat-form{width:100%!important;max-width:none!important;margin:0!important}
.agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{
  width:100%!important;max-width:64rem!important;margin:10px auto 0!important
}
/* Al iniciar una consulta estos accesos salen completamente del flujo. La
   regla explícita evita que las reglas responsive con display:flex!important
   anulen .hidden y dejen la portada mezclada con la respuesta. */
.agent-home #accesos-liturgia.hidden,
.agent-home #accesos-liturgia[hidden]{display:none!important}
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle{gap:12px!important;padding:12px 0!important}
 .agent-home .chat-panel.clean-chat.chat-idle #welcome-screen>div:first-child{padding-inline:20px!important}
 .agent-home .chat-panel.clean-chat.chat-idle .chat-input-wrap{padding:0 12px!important}
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{gap:7px!important}
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-liturgia{max-width:100%!important}
}

/* Ajustes finos del compositor inicial en teléfono. El placeholder usa dos
   líneas en algunos iPhone; 48px lo recortaba. */
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle{gap:20px!important}
 .agent-home .chat-panel.clean-chat.chat-idle .chat-input-wrap{padding:0 14px!important}
 .agent-home .chat-panel.clean-chat.chat-idle #chat-form{width:100%!important;gap:8px!important;align-items:center!important}
 .agent-home .chat-panel.clean-chat.chat-idle #chat-input{
   flex:1 1 0%!important;width:0!important;min-width:0!important;
   min-height:60px!important;max-height:140px!important;
   padding:10px 13px!important;font-size:16px!important;line-height:1.4!important;
   overflow-y:auto!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #chat-form>button[type="submit"]{
   flex:0 0 44px!important;width:44px!important;height:44px!important;min-height:44px!important;
   padding:0!important;border-radius:14px!important;display:inline-flex!important;
   align-items:center!important;justify-content:center!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #chat-form>button[type="submit"] svg{width:20px!important;height:20px!important}
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{
   display:flex!important;flex-direction:column!important;align-items:center!important;
   gap:12px!important;margin:12px auto 0!important;padding:0 10px!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-liturgia{
   width:auto!important;max-width:100%!important;min-height:0!important;
   padding:8px 14px!important;border-radius:999px!important;
   font-size:13px!important;line-height:1.35!important;white-space:normal!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-infografia-dia{
   width:100%!important;padding:10px 14px!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle .infografia-dia-titulo{overflow-wrap:anywhere}
}


/* Afinación de la portada móvil: los accesos siguen siendo enlaces, pero se
   presentan como navegación ligera en vez de tres botones grandes. El campo
   de inicio gana altura para que parezca un espacio real de escritura. */
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle #chat-input{
   min-height:92px!important;max-height:180px!important;
   padding:14px 15px!important;line-height:1.45!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #chat-form{align-items:center!important}
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{
   align-items:center!important;gap:18px!important;margin:12px auto 0!important;
   padding:0 12px!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-liturgia,
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-infografia-dia{
   display:inline-flex!important;align-items:center!important;justify-content:center!important;
   width:auto!important;max-width:100%!important;min-height:0!important;
   margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
   background:transparent!important;box-shadow:none!important;
   color:var(--maroon)!important;font-size:14px!important;font-weight:600!important;
   line-height:1.45!important;text-align:center!important;text-decoration:none!important;
   white-space:normal!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-infografia-dia{
   display:block!important;width:auto!important;padding:0!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-liturgia:hover,
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-infografia-dia:hover{
   background:transparent!important;text-decoration:underline!important;text-underline-offset:3px
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .infografia-dia-titulo{
   overflow-wrap:anywhere
 }
}


/* En la portada, tanto desktop como móvil, el menú del botón "+" debe caer
   debajo del compositor. Solo durante una conversación activa se abre hacia
   arriba, porque allí el compositor queda pegado al borde inferior. */
.agent-home .chat-panel.clean-chat.chat-idle #chat-form .agent-cmd-menu{
  top:calc(100% + 8px)!important;bottom:auto!important;
  left:0!important;right:0!important;
  max-height:min(42vh,360px)!important;overflow-y:auto!important;
  z-index:100!important;overscroll-behavior:contain
}
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle #chat-form .agent-cmd-menu{
   max-height:min(42dvh,360px)!important
 }
 .agent-home .chat-panel.clean-chat:not(.chat-idle) #chat-box{
   overflow-y:auto!important;
   -webkit-overflow-scrolling:touch;
   touch-action:pan-y
 }
}


/* Ajuste móvil de jerarquía y respiración en la portada. */
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle{gap:32px!important}
 .agent-home .chat-panel.clean-chat.chat-idle #welcome-screen h1{
   font-size:clamp(14px,4.4vw,18px)!important;
   line-height:1.2!important;letter-spacing:-.035em!important;
   white-space:nowrap!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{
   gap:24px!important;margin-top:12px!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-liturgia,
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-infografia-dia{
   font-size:13px!important;line-height:1.4!important
 }
}

/* Acceso a la presentación visible incluso antes de recorrer el guion. */
.agent-presentation-progress{position:relative;display:flex;align-items:center;gap:15px;overflow:hidden;max-width:620px;margin:14px 0 20px;padding:18px 20px 22px;border:1px solid #dfc8a4;border-radius:16px;background:linear-gradient(115deg,#fffaf1,#f7efe3);color:#4b2028;box-shadow:0 8px 25px #52231b11}
.agent-presentation-progress::after{content:"";position:absolute;left:0;bottom:0;width:45%;height:3px;background:#bd8b45;border-radius:3px;animation:agent-presentation-loading 2.8s ease-in-out infinite alternate}
.agent-presentation-progress-mark{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#6b2430;color:#f8db9c;font-size:23px;animation:agent-presentation-breathe 2.8s ease-in-out infinite}
.agent-presentation-progress-copy{display:grid;gap:3px;line-height:1.35}
.agent-presentation-progress-copy strong{font-size:15px}
.agent-presentation-progress-copy span{font-size:13px;color:#6d5a51}
@keyframes agent-presentation-breathe{50%{transform:scale(1.07);box-shadow:0 0 0 8px #bd8b4520}}
@keyframes agent-presentation-loading{to{transform:translateX(123%)}}
@media(prefers-reduced-motion:reduce){.agent-presentation-progress::after,.agent-presentation-progress-mark{animation:none}}
.agent-presentation-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}
.agent-presentation-actions.is-top{padding:15px;border:1px solid #d7b580;border-radius:15px;background:#fcf8f0;box-shadow:0 6px 24px #52231b13}
.agent-presentation-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 17px;border-radius:11px;text-decoration:none;font:700 14px/1.25 system-ui,sans-serif}
.agent-presentation-actions .agent-presentation-view{background:#611c27;color:#fff;border:1px solid #611c27;box-shadow:0 5px 12px #611c2730}
.agent-presentation-actions .agent-presentation-view:hover{background:#78303a;color:#fff}
.agent-presentation-actions .agent-presentation-download{border:1px solid #bc8b43;color:#611c27;background:#fff}
.agent-presentation-actions .agent-presentation-download:hover{background:#f8efdf}
@media(max-width:600px){.agent-presentation-actions a{width:100%}}

/* ── Portada con cinco accesos (2026-10-04) ───────────────────────────────
   Se añadieron "Presentación del día" y "Crea una presentación católica con
   IA". El bloque ya no se centra en vertical (dejaba ~220px en blanco encima y
   la cabecera del chat a mitad de pantalla): se ancla arriba y el campo sube,
   para que los cinco accesos quepan sin desplazarse ni en escritorio ni en
   móvil. */
.agent-home .chat-panel.clean-chat.chat-idle{align-content:start!important;gap:clamp(12px,2vh,20px)!important}
.agent-home .chat-panel.clean-chat.chat-idle #welcome-screen>div:first-child{margin:clamp(24px,9vh,96px) auto 0!important}
.agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{gap:10px!important;row-gap:10px!important}
/* El acceso que crea la presentación es la acción principal: relleno granate. */
.agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-presentacion-crear{
  background:var(--maroon)!important;border-color:var(--maroon)!important;color:#fff!important;cursor:pointer
}
.agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-presentacion-crear:hover,
.agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-presentacion-crear:focus-visible{
  background:var(--gold)!important;border-color:var(--gold)!important;color:#fff!important
}
/* Títulos largos (el de la infografía o la presentación del día) no ensanchan la fila. */
.agent-home #accesos-liturgia .acceso-infografia-dia{max-width:min(100%,30rem)}
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle{gap:16px!important;padding:0!important}
 .agent-home .chat-panel.clean-chat.chat-idle #welcome-screen>div:first-child{margin:clamp(18px,6vh,44px) auto 0!important}
 /* Los enlaces cortos comparten fila; los que llevan título ocupan la suya. */
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{
   flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;
   align-items:center!important;gap:12px 22px!important;margin:10px auto 0!important;padding:0 12px!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-infografia-dia{
   display:block!important;flex:1 1 100%!important;width:100%!important;max-width:100%!important;
   padding:0!important;font-size:13px!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-presentacion-crear{
   flex:1 1 100%!important;width:100%!important;max-width:22rem!important;margin-top:4px!important;
   padding:11px 16px!important;border:1px solid var(--maroon)!important;border-radius:999px!important;
   font-size:14px!important;text-align:center!important;text-decoration:none!important
 }
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia .acceso-presentacion-crear:hover{text-decoration:none!important}
}
/* Imágenes CatólicosGPT creadas desde el chat */
.agent-imagenes{margin:16px 0 8px;padding:14px;border:1px solid #d7b580;border-radius:15px;background:#fcf8f0;box-shadow:0 6px 24px #52231b13}
.agent-imagenes-estado{margin:0 0 12px;font:700 14px/1.35 system-ui,sans-serif;color:#611c27}
.agent-imagenes-estado.es-error{color:var(--maroon)}
.agent-imagenes-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:12px}
@media(max-width:600px){.agent-imagenes-grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.agent-imagenes-grilla.es-una{grid-template-columns:minmax(0,1fr)}.agent-imagenes{padding:10px}.agent-imagen-boton{min-height:34px;padding:6px 10px;font-size:12px}}
.agent-imagenes-grilla.es-una{grid-template-columns:minmax(0,420px)}
.agent-imagen{margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.agent-imagen-marco{position:relative;width:100%;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#0b1d2e,#000b17 60%,#3a2a12);display:flex;align-items:center;justify-content:center;border:1px solid #c99a4a55}
.agent-imagen-marco img{display:block;width:100%;height:100%;object-fit:cover}
.agent-imagen-marco a{display:block;width:100%;height:100%}
.agent-imagen-espera{color:#f2c35b;font-size:28px;animation:agentImagenLatido 1.6s ease-in-out infinite}
@keyframes agentImagenLatido{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.agent-imagen-espera{animation:none}}
.agent-imagen-pie{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:600 13px/1.3 system-ui,sans-serif;color:#5b4632;min-width:0}
.agent-imagen.es-fallida .agent-imagen-pie{color:var(--maroon)}
.agent-imagen-boton{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border-radius:9px;text-decoration:none;background:#611c27;color:#fff;font:700 13px/1.2 system-ui,sans-serif}
.agent-imagen-boton:hover{background:#78303a;color:#fff}
.agent-imagen-boton.es-secundario{background:#fff;color:#611c27;border:1px solid #bc8b43}
.agent-imagen-boton.es-secundario:hover{background:#f8efdf}
.agent-imagenes-galeria{display:inline-block;margin-top:12px;font:700 14px/1.3 system-ui,sans-serif;color:#611c27}

/* ── Portada: chat → lecturas → crear imagen → crear presentación (2026-10-04) ─
   Las dos acciones de IA son botones compactos con icono de estrellas, por
   debajo de las lecturas. Clase propia (.acceso-ia) para que no les afecten
   las reglas móviles que convierten .acceso-liturgia en texto plano. */
.agent-home #accesos-liturgia{display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;padding:0 12px!important}
.agent-home #accesos-liturgia .acceso-lecturas{font-size:14px!important}
.agent-home #accesos-liturgia .accesos-ia{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.agent-home #accesos-liturgia .acceso-ia{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(188,138,54,.55);
  background:linear-gradient(180deg,#fffdf7,#fbf3e3);
  color:var(--maroon)!important;text-decoration:none!important;
  font-weight:600;font-size:13px;line-height:1.25;letter-spacing:.005em;white-space:nowrap;
  box-shadow:0 1px 2px rgba(82,35,27,.08),0 4px 12px rgba(82,35,27,.06);
  transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s
}
.agent-home #accesos-liturgia .acceso-ia .acceso-ia-icono{flex:none;color:#c9922f;transition:color .2s}
.agent-home #accesos-liturgia .acceso-ia:hover,
.agent-home #accesos-liturgia .acceso-ia:focus-visible{
  background:var(--maroon);border-color:var(--maroon);color:#fff!important;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(97,28,39,.22)
}
.agent-home #accesos-liturgia .acceso-ia:hover .acceso-ia-icono,
.agent-home #accesos-liturgia .acceso-ia:focus-visible .acceso-ia-icono{color:#f2c35b}
@media(max-width:767px){
 .agent-home .chat-panel.clean-chat.chat-idle #accesos-liturgia{gap:16px!important;margin-top:14px!important}
 .agent-home #accesos-liturgia .accesos-ia{flex-direction:column;align-items:center;gap:9px}
 .agent-home #accesos-liturgia .acceso-ia{font-size:13px;padding:8px 14px;max-width:100%;white-space:normal;text-align:left}
}
.agent-home #accesos-liturgia + div{margin-top:14px!important}
.agent-premium-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:3px}
.agent-premium-botones .agent-premium-cta{margin-top:0}
.agent-premium-cta.es-secundario{background:#fff;color:var(--maroon);border:1px solid var(--maroon)}
.agent-premium-cta.es-secundario:hover{background:var(--maroon);color:#fff}

.agent-existente{display:grid;gap:10px;max-width:320px;margin-top:10px}.agent-existente .agent-infografia{display:block}.agent-existente .agent-infografia img{width:100%;height:auto;display:block}.agent-existente .agent-imagen-boton{justify-self:start;cursor:pointer;border:0}