/* ==========================================================
   ACROBOT — estilos del widget de chat (lanzador, etiqueta y panel)
   Antes iban en línea en app/Views/layout/footer.php, ~13 KB repetidos en
   cada página; como archivo, el navegador los guarda en caché. Se carga desde
   layout/header.php solo si el chat está activo.
   IMPORTANTE: al cambiar este archivo hay que subir su ?v= en layout/header.php.
   ========================================================== */

.acro-chat-toggle-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    /* Fondo oscuro, como las tarjetas del sitio: el astronauta es de trazo
       neón y sobre cian macizo se perdía. El aro y el brillo dan el contraste. */
    background: radial-gradient(circle at 50% 38%, #0d1b26 0%, #050a10 100%);
    border: 1.5px solid var(--cyan-primary, #00d9ff);
    color: var(--cyan-primary, #00d9ff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 9998;
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.45);
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.acro-chat-toggle-btn:hover { transform: scale(1.08); }
.acro-chat-toggle-btn.is-open { transform: scale(0.9); box-shadow: 0 0 10px rgba(0, 217, 255, 0.25); }

/* ---- Acrobot: cara, etiqueta y flecha ---- */
.acro-chat-launcher {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.acro-chat-launcher .acro-chat-toggle-btn {
    position: static;
    pointer-events: auto;
    padding: 0;
    overflow: hidden;
}

.acro-chat-callout {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.acro-chat-callout-text {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cyan-primary, #00d9ff);
    text-shadow: 0 0 10px rgba(0, 217, 255, .65), 0 0 22px rgba(0, 217, 255, .35);
    white-space: nowrap;
    animation: acrobotGlow 2.4s ease-in-out infinite;
}
.acro-chat-callout-arrow {
    width: 30px;
    height: 17px;
    color: var(--cyan-primary, #00d9ff);
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, .6));
    animation: acrobotNudge 1.8s ease-in-out infinite;
}
/* Al abrir el panel la etiqueta sobra: ya se ve el nombre en la cabecera. */
.acro-chat-launcher.is-open .acro-chat-callout { opacity: 0; transform: translateX(8px); }

/* Los textos rotan en el mismo sitio. Todos se apilan invisibles en una celda para
   que la etiqueta mida siempre lo del más largo: así la flecha y el botón no brincan. */
.acro-chat-callout-text {
    position: relative;
    display: inline-grid;
    justify-items: end;
}
.acro-callout-sizer { grid-area: 1 / 1; visibility: hidden; }
.acro-callout-word { position: absolute; top: 0; right: 0; }

/* Al cambiar de texto: sacudida con aberración de color (cian y naranja, los dos
   colores de Tron) y un pulso en el aro del botón para atraer la mirada. */
.acro-chat-launcher.is-glitch .acro-chat-callout { animation: acrobotGlitch .55s linear 1; }
.acro-chat-launcher.is-glitch .acro-chat-callout-text { animation: acrobotAberration .55s linear 1; }
.acro-chat-launcher.is-glitch .acro-chat-toggle-btn { animation: acrobotPing .7s ease-out 1; }

@keyframes acrobotGlitch {
    0%, 100% { transform: none; }
    12%      { transform: translateX(-3px) skewX(-12deg); }
    24%      { transform: translateX(3px) skewX(9deg); }
    36%      { transform: translateX(-2px) skewX(-5deg); }
    50%      { transform: scale(1.08); }
    70%      { transform: scale(1); }
}
@keyframes acrobotAberration {
    0%, 100% { opacity: 1;  text-shadow: 0 0 10px rgba(0, 217, 255, .65); }
    15%      { opacity: .7; text-shadow: -3px 0 rgba(255, 108, 0, .9), 3px 0 rgba(0, 217, 255, .95); }
    30%      { opacity: 1;  text-shadow: 3px 0 rgba(255, 108, 0, .9), -3px 0 rgba(0, 217, 255, .95), 0 0 16px rgba(0, 217, 255, .8); }
    55%      { text-shadow: 0 0 18px rgba(0, 217, 255, 1), 0 0 34px rgba(0, 217, 255, .6); }
}
@keyframes acrobotPing {
    0%   { box-shadow: 0 0 18px rgba(0, 217, 255, .45), 0 0 0 0 rgba(0, 217, 255, .55); }
    100% { box-shadow: 0 0 18px rgba(0, 217, 255, .45), 0 0 0 14px rgba(0, 217, 255, 0); }
}

@keyframes acrobotGlow {
    0%, 100% { opacity: .8; text-shadow: 0 0 8px rgba(0, 217, 255, .45); }
    50%      { opacity: 1;  text-shadow: 0 0 14px rgba(0, 217, 255, .9), 0 0 26px rgba(0, 217, 255, .5); }
}
@keyframes acrobotNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

.acrobot-face {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.16em;
    line-height: 0;
}
/* Algo menor que el botón para que la antena no toque el borde del círculo. */
.acro-chat-toggle-btn .acrobot-face { width: 34px; height: 34px; font-size: 34px; }
#acro-chat-title .acrobot-face { width: 22px; height: 22px; margin-right: 8px; vertical-align: -0.34em; }
.acrobot-face-svg { width: 100%; height: 100%; display: block; }

/* Mientras Acrobot piensa, el visor se convierte en lluvia de código. */
.acrobot-matrix {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    border-radius: 50%;
    background: #020b12;
    font-family: var(--font-mono, monospace);
    color: #4dffa6;
    text-shadow: 0 0 6px rgba(77, 255, 166, .85);
    line-height: 1;
}
.acrobot-face.is-thinking .acrobot-face-svg { visibility: hidden; }
.acrobot-face.is-thinking .acrobot-matrix { display: block; }
.acrobot-matrix i {
    position: absolute;
    top: 0;
    font-style: normal;
    white-space: pre;
    animation: acrobotRain linear infinite;
}
@keyframes acrobotRain {
    from { transform: translateY(-100%); }
    to   { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .acro-chat-callout-text,
    .acro-chat-callout-arrow,
    .acro-chat-launcher.is-glitch .acro-chat-callout,
    .acro-chat-launcher.is-glitch .acro-chat-callout-text,
    .acro-chat-launcher.is-glitch .acro-chat-toggle-btn,
    .acrobot-matrix i { animation: none; }
}

.acro-chat-panel {
    position: fixed;
    bottom: 85px;
    right: 25px;
    width: min(360px, calc(100vw - 30px));
    height: min(480px, calc(100vh - 140px));
    background: #080b12;
    border: 1px solid var(--cyan-primary, #00d9ff);
    box-shadow: 0 0 35px rgba(0, 217, 255, .25);
    z-index: 9998;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.acro-chat-panel.is-open { display: flex; }

.acro-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(0, 217, 255, 0.06);
    border-bottom: 1px solid var(--grid-dark, #1a202c);
    color: var(--cyan-primary, #00d9ff);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: bold;
}
#acro-chat-title { display: flex; align-items: center; min-width: 0; }
#acro-chat-title b {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.acro-chat-title-sub {
    margin-left: 5px;
    font-weight: normal;
    color: var(--cyan-ice, #7fe7ff);
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acro-chat-header button {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 15px;
    padding: 4px;
}
.acro-chat-header button:hover { color: var(--cyan-primary, #00d9ff); }

.acro-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.acro-chat-msg {
    max-width: 85%;
    padding: 9px 13px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.acro-chat-msg.user {
    align-self: flex-end;
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid var(--cyan-deep, #0891b2);
    color: #e2e8f0;
}
.acro-chat-msg.assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--grid-dark, #1a202c);
    color: #cbd5e1;
}
.acro-chat-msg.error {
    align-self: flex-start;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid #ef4444;
    color: #fca5a5;
}
.acro-chat-msg.pending { opacity: 0.6; }

.acro-chat-actions {
    padding: 8px 12px;
    border-top: 1px solid var(--grid-dark, #1a202c);
    background: rgba(0,0,0,0.2);
}
.acro-chat-actions button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--cyan-deep, #0891b2);
    color: var(--cyan-primary, #00d9ff);
    padding: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.acro-chat-actions button:hover { background: rgba(0, 217, 255, 0.08); }
.acro-chat-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.acro-chat-form-link {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    text-decoration: underline;
}
.acro-chat-form-link:hover { color: var(--cyan-primary, #00d9ff); }
.acro-chat-privacy {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
    background: rgba(0,0,0,0.3);
}
.acro-chat-privacy a { color: inherit; text-decoration: underline; }
.acro-chat-privacy a:hover { color: var(--cyan-primary, #00d9ff); }

.acro-chat-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--grid-dark, #1a202c);
    background: rgba(0,0,0,0.3);
}
.acro-chat-input {
    flex: 1;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--grid-dark, #1a202c);
    color: #e2e8f0;
    padding: 9px 12px;
    font-size: 13px;
}
.acro-chat-input:focus { outline: none; border-color: var(--cyan-primary, #00d9ff); }
.acro-chat-form button {
    background: var(--cyan-primary, #00d9ff);
    border: none;
    color: #050508;
    width: 38px;
    cursor: pointer;
    font-size: 14px;
}
.acro-chat-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* En el celular la etiqueta flota sobre el contenido (en el home quedaba encima de
   "23 años" y no se leía ninguno de los dos). Una cápsula oscura la separa del
   fondo; el brillo y la flecha animada siguen igual. */
@media (max-width: 768px) {
    .acro-chat-callout {
        padding: 5px 9px 5px 11px;
        background: rgba(5, 10, 16, 0.86);
        border: 1px solid rgba(0, 217, 255, 0.35);
        border-radius: 999px;
        box-shadow: 0 0 14px rgba(0, 217, 255, 0.18);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

@media (max-width: 480px) {
    /* La posición la fija el contenedor: el botón va estático dentro de él. */
    .acro-chat-launcher { bottom: 20px; right: 20px; }
    .acro-chat-toggle-btn { width: 40px; height: 40px; font-size: 16px; }
    .acro-chat-toggle-btn .acrobot-face { width: 30px; height: 30px; font-size: 30px; }
    .acro-chat-callout-text { font-size: 11px; }
    .acro-chat-callout-arrow { width: 24px; }
    .acro-chat-panel { bottom: 72px; right: 15px; width: calc(100vw - 30px); }
}