/* styles.css */
:root {
    --font-main: 'Inter', 'Segoe UI', sans-serif;
    --orange-dark: #FF8C00; --orange-medium: #FFA500; --orange-light: #FFC107; --orange-lighter: #FFD54F;
    
    --dm-bg-primary: #0A0C12; --dm-bg-secondary: #10141C; --dm-bg-ternary: #1A202C;
    --dm-accent-primary: var(--orange-dark); --dm-accent-secondary: var(--orange-medium);
    --dm-text-primary: #F0F2F8; --dm-text-secondary: #A8B0C0; --dm-text-placeholder: #687083;
    --dm-bubble-assistant-bg: rgba(255,140,0,0.08); --dm-bubble-assistant-text: var(--dm-text-primary);
    --dm-shadow-color: rgba(0,0,0,0.7); --dm-input-bg: #161B25; --dm-input-border: #303848;
    --dm-logo-text: white; --dm-dialog-bg: #141A24; --dm-dialog-shadow: rgba(0,0,0,0.8);
    --dm-star-inactive: #4A5568; --dm-star-active: var(--orange-light);

    --lm-bg-primary: #F8F9FC; --lm-bg-secondary: #FFFFFF; --lm-bg-ternary: #E4E9F1;
    --lm-accent-primary: #F57C00; --lm-accent-secondary: var(--orange-light);
    --lm-text-primary: #171C26; --lm-text-secondary: #424B5F; --lm-text-placeholder: #707A8F;
    --lm-bubble-assistant-bg: rgba(245,124,0,0.07); --lm-bubble-assistant-text: var(--lm-text-primary);
    --lm-shadow-color: rgba(0,0,0,0.08); --lm-input-bg: #F0F3F7; --lm-input-border: #C8D0DB;
    --lm-logo-text: white; --lm-dialog-bg: #FFFFFF; --lm-dialog-shadow: rgba(0,0,0,0.15);
    --lm-star-inactive: #CBD5E0; --lm-star-active: var(--orange-dark);

    --bg-primary: var(--dm-bg-primary); --bg-secondary: var(--dm-bg-secondary); --bg-ternary: var(--dm-bg-ternary);
    --accent-primary: var(--dm-accent-primary); --accent-secondary: var(--dm-accent-secondary);
    --text-primary: var(--dm-text-primary); --text-secondary: var(--dm-text-secondary); --text-placeholder: var(--dm-text-placeholder);
    --bubble-assistant-bg: var(--dm-bubble-assistant-bg); --bubble-assistant-text: var(--dm-bubble-assistant-text);
    --shadow-color: var(--dm-shadow-color); --input-bg: var(--dm-input-bg); --input-border: var(--dm-input-border);
    --logo-text: var(--dm-logo-text); --dialog-bg: var(--dm-dialog-bg); --dialog-shadow: var(--dm-dialog-shadow);
    --onboarding-visual-accent-color1: var(--accent-primary); --onboarding-visual-accent-color2: var(--accent-secondary);
    --star-inactive: var(--dm-star-inactive); --star-active: var(--dm-star-active);
}
body.light-mode {
    --bg-primary: var(--lm-bg-primary); --bg-secondary: var(--lm-bg-secondary); --bg-ternary: var(--lm-bg-ternary);
    --accent-primary: var(--lm-accent-primary); --accent-secondary: var(--lm-accent-secondary);
    --text-primary: var(--lm-text-primary); --text-secondary: var(--lm-text-secondary); --text-placeholder: var(--lm-text-placeholder);
    --bubble-assistant-bg: var(--lm-bubble-assistant-bg); --bubble-assistant-text: var(--lm-bubble-assistant-text);
    --shadow-color: var(--lm-shadow-color); --input-bg: var(--lm-input-bg); --input-border: var(--lm-input-border);
    --logo-text: var(--lm-logo-text); --dialog-bg: var(--lm-dialog-bg); --dialog-shadow: var(--lm-dialog-shadow);
    --onboarding-visual-accent-color1: var(--accent-primary); --onboarding-visual-accent-color2: var(--accent-secondary);
    --star-inactive: var(--lm-star-inactive); --star-active: var(--lm-star-active);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
    height:100%;
    -webkit-tap-highlight-color:transparent;
}
body{
    height: 100%; 
    font-family:var(--font-main); background-color:var(--bg-primary); color:var(--text-primary);
    display:flex; justify-content:center; align-items:center;
    overflow:hidden; position:relative; 
    transition:background-color 0.4s ease,color 0.4s ease;
}
.assistant-container{
    width:100%; height:100%; max-width:580px; 
    display:flex; flex-direction:column; 
    /* align-items:center; justify-content:center; Removed to allow children to control alignment */
    background-color:transparent; 
    position:relative; 
    overflow: hidden; /* CRUCIAL: Constrains children like main-interaction-area */
}

/* --- APP CONTROL BUTTONS (Theme, Logout) --- */
.app-control-btn {
    position:absolute; 
    top: calc(env(safe-area-inset-top, 0px) + 15px); /* Consider safe area for notches */
    z-index:1500;
    background:none; border:none; color:var(--text-secondary);
    font-size:1.3rem; cursor:pointer; padding:10px; border-radius:50%;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    transition:color 0.3s ease,background-color 0.3s ease,transform 0.2s ease;
}
.app-control-btn:hover {color:var(--accent-primary); background-color:color-mix(in srgb,var(--bg-ternary)40%,transparent);}
.app-control-btn:active {transform: scale(0.9);}
.theme-toggle-btn {
    right: calc(env(safe-area-inset-right, 0px) + 15px); /* Consider safe area */
}
.logout-btn {
    left: calc(env(safe-area-inset-left, 0px) + 15px); /* Consider safe area */
}

/* --- DIALOGS (Retomar Sesión, Encuesta) --- */
.dialog-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background-color:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center;
    z-index:2000; opacity:0; visibility:hidden; transition:opacity 0.3s ease,visibility 0.3s ease; padding: 15px;
}
.dialog-overlay.visible {opacity:1; visibility:visible;}
.dialog-box {
    background-color:var(--dialog-bg); padding:25px 30px; border-radius:16px;
    box-shadow:0 10px 35px var(--dialog-shadow);
    width:100%; max-width:450px; text-align:center;
    transform:scale(0.9); transition:transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275),background-color 0.4s ease;
}
.dialog-overlay.visible .dialog-box {transform:scale(1);}
.dialog-box h2 {color:var(--text-primary);font-size:1.6rem;font-weight:600;margin-bottom:12px;}
.dialog-box p {color:var(--text-secondary);font-size:0.95rem;line-height:1.6;margin-bottom:20px;}
.dialog-buttons {display:flex;gap:12px;justify-content:center;margin-top:25px;}
.dialog-btn {
    padding:10px 18px;border:none;border-radius:8px;font-size:0.9rem;font-weight:500;
    cursor:pointer;transition:all 0.2s ease;min-width:110px;
}
.dialog-btn.primary {background-color:var(--accent-primary);color:white;}
.dialog-btn.primary:hover {background-color:color-mix(in srgb,var(--accent-primary)80%,black);transform:translateY(-1px);}
.dialog-btn.secondary {background-color:var(--bg-ternary);color:var(--text-primary);border:1px solid var(--input-border);}
.dialog-btn.secondary:hover {background-color:color-mix(in srgb,var(--bg-ternary)80%,black);transform:translateY(-1px);}
.dialog-btn:active {transform:translateY(0px);}

/* Survey Specific Styles */
.survey-box p {margin-bottom: 10px;}
.survey-rating {margin-bottom:20px;}
.survey-rating .stars {display:flex;justify-content:center;gap:5px;margin-top:8px;}
.star-btn {background:none;border:none;font-size:1.8rem;color:var(--star-inactive);cursor:pointer;padding:5px;transition: color 0.2s ease, transform 0.2s ease;}
.star-btn:hover {transform:scale(1.15);}
.star-btn.active {color:var(--star-active);}
.survey-feedback textarea {
    width:100%;min-height:80px;background-color:var(--input-bg);border:1px solid var(--input-border);
    border-radius:8px;padding:10px;color:var(--text-primary);font-family:var(--font-main);font-size:0.9rem;
    resize:vertical; margin-top:8px;
}
.survey-feedback textarea:focus {outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary)20%,transparent);}

/* --- ONBOARDING FUTURISTA --- */
.onboarding {
    width:100%; height:100%; display:flex; position:absolute; top:0; left:0;
    opacity:1; visibility:visible; transition:opacity 0.5s ease,visibility 0.5s ease;
    background-color:var(--bg-primary); 
    /* overflow: hidden; /* Helps contain children if needed */
}
.onboarding.hidden {opacity:0; visibility:hidden; pointer-events:none;}
.onboarding-step-container {
    width:100%; height:100%; /* Use 100% height of parent */
    /* min-height: 100vh; /* Replaced with height: 100% */
    display:none; flex-direction:column; align-items:center; justify-content:center;
    padding:20px; position:absolute; top:0; left:0;
    opacity:0; transform:scale(0.97); transition:opacity 0.6s ease,transform 0.6s ease;
    overflow-y: auto; /* Allow content to scroll if keyboard reduces viewport height */
}
.onboarding-step-container.active {display:flex; opacity:1; transform:scale(1);}
.onboarding-visual-accent {
    position:absolute; width:250px; height:250px; border-radius:50%; z-index:0;
    background:radial-gradient(circle,color-mix(in srgb,var(--onboarding-visual-accent-color1)20%,transparent)0%,transparent 60%);
    animation:subtlePulse 10s infinite ease-in-out;
}
.onboarding-step-container:nth-child(1) .onboarding-visual-accent {top:-80px;left:-80px;}
.onboarding-step-container:nth-child(2) .onboarding-visual-accent {
    bottom:-90px;right:-90px;top:auto;left:auto;
    background:radial-gradient(circle,color-mix(in srgb,var(--onboarding-visual-accent-color2)18%,transparent)0%,transparent 55%);
    animation-delay:-5s;
}
@keyframes subtlePulse{0%,100%{transform:scale(1) rotate(0deg);opacity:0.3;}50%{transform:scale(1.15) rotate(15deg);opacity:0.5;}}
.onboarding-step-content {
    z-index:1; text-align:center; width:100%; max-width:400px;
    display:flex; flex-direction:column; align-items:center; gap:18px; 
    background-color:color-mix(in srgb,var(--bg-secondary)80%,transparent);
    padding:clamp(20px,5vh,30px); border-radius:22px; backdrop-filter:blur(12px);
    border:1px solid color-mix(in srgb,var(--accent-primary)15%,transparent);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2); 
}
.onboarding-logo {
    width:75px; height:75px; border-radius:50%; margin-bottom:8px;
    background:linear-gradient(145deg,var(--accent-primary),var(--accent-secondary));
    color:var(--logo-text); display:flex; align-items:center; justify-content:center;
    font-size:2.6rem; font-weight:700;
    box-shadow:0 4px 18px color-mix(in srgb,var(--accent-primary)25%,transparent);
}
.onboarding-title {font-size:clamp(1.7rem,4.5vw,2.1rem);font-weight:600;color:var(--text-primary);margin-bottom:-8px;}
.onboarding-subtitle {font-size:clamp(0.85rem,2.2vw,0.95rem);color:var(--text-secondary);line-height:1.55;max-width:340px;}
.input-group-futuristic {
    position:relative;width:100%;display:flex;align-items:center;
    background-color:var(--input-bg);border-radius:10px;border:1px solid var(--input-border);
    transition:all 0.3s ease;
}
.input-group-futuristic:focus-within {border-color:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary)18%,transparent);}
.input-icon {padding-left:16px;padding-right:8px;color:var(--text-placeholder);font-size:1rem;}
.input-group-futuristic input[type="text"],.input-group-futuristic select {
    flex-grow:1;padding:14px 16px 14px 0;border:none;background:none;color:var(--text-primary);
    font-family:var(--font-main);font-size:1rem; /* 16px to prevent iOS auto-zoom */
    outline:none;
}
.input-group-futuristic input[type="text"]::placeholder{color:var(--text-placeholder);}
.input-group-futuristic select{appearance:none;cursor:pointer;padding-right:40px; font-size:1rem;} /* 16px to prevent iOS auto-zoom */
.select-group{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23A8B0C0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:0.9em;}
body.light-mode .select-group{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23424B5F' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");}
.input-group-futuristic select option{background:var(--bg-secondary);color:var(--text-primary);}
.futuristic-button {
    width:100%;padding:14px 20px;border-radius:10px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
    color:white;font-family:var(--font-main);font-size:1rem;font-weight:500;
    box-shadow:0 5px 16px color-mix(in srgb,var(--accent-primary)22%,transparent);
    transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
}
.futuristic-button:hover {background:linear-gradient(135deg,color-mix(in srgb,var(--accent-primary)80%,black),color-mix(in srgb,var(--accent-secondary)80%,black));box-shadow:0 7px 20px color-mix(in srgb,var(--accent-primary)30%,transparent);transform:translateY(-2px);}
.futuristic-button:active {transform:translateY(0px) scale(0.98);box-shadow:0 3px 12px color-mix(in srgb,var(--accent-primary)18%,transparent);}
.futuristic-button .icon-right {transition:transform 0.3s ease;}
.futuristic-button:hover .icon-right {transform:translateX(3px);}

/* --- MAIN INTERACTION AREA (Chat) --- */
.main-interaction-area {
    display:none; flex-direction:column; width:100%; height:100%;
    background-color:transparent; opacity:0;
    transition:opacity 0.5s ease 0.1s; padding:0;
    position:relative; /* Context for children */
    overflow: hidden; /* CRITICAL: Prevents this area from expanding beyond parent */
}
.main-interaction-area.visible {opacity:1; display:flex;}


.chat-header-placeholder {
    padding:clamp(10px,2.5vh,15px) 15px 8px; /* Adjusted padding slightly */
    width:100%;display:flex;flex-direction:column;
    align-items:center;flex-shrink:0; /* Prevent shrinking */
    position:relative; 
    background-color:transparent; 
    /* max-height: 35vh; /* Optional: constraint for very tall visualization states */
}
.recording-countdown {
    position:absolute; top:5px; 
    left:50%; transform: translateX(-50%);
    font-size:1.2rem; font-weight:bold; color:var(--accent-primary);
    background-color:color-mix(in srgb,var(--bg-secondary)70%,transparent);
    padding:3px 8px; border-radius:5px;
    z-index:5; display:none; 
}
.voice-visualization-container {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:170px;}
.voice-visualization {position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;}
.voice-visualization .ring {position:absolute;width:100%;height:100%;border-radius:50%;border:2.5px solid var(--accent-primary);opacity:0;transform:scale(0.5);transition:all 0.4s ease;}
.voice-visualization .ring:nth-child(1){width:45px;height:45px;border-width:3.5px;} .voice-visualization .ring:nth-child(2){width:70px;height:70px;}
.voice-visualization .ring:nth-child(3){width:95px;height:95px;border-width:2px;} .voice-visualization .ring:nth-child(4){width:120px;height:120px;border-width:2px;opacity:0.6;transform:scale(1);}
.voice-visualization .ring:nth-child(5){width:38px;height:38px;background-color:var(--accent-primary);border:none;opacity:1;transform:scale(1);}
.voice-visualization.recording .ring{border-color:var(--accent-secondary);}
.voice-visualization.recording .ring:nth-child(1){animation:recordPulse 1.5s infinite ease-out 0s;} .voice-visualization.recording .ring:nth-child(2){animation:recordPulse 1.5s infinite ease-out 0.3s;}
.voice-visualization.recording .ring:nth-child(3){animation:recordPulse 1.5s infinite ease-out 0.6s;} .voice-visualization.recording .ring:nth-child(5){background-color:var(--accent-secondary);}
.voice-visualization.speaking .ring{border-color:var(--accent-primary);}
.voice-visualization.speaking .ring:nth-child(1){animation:speakWave 1.2s infinite cubic-bezier(0.45,0.05,0.55,0.95)0s;} .voice-visualization.speaking .ring:nth-child(2){animation:speakWave 1.2s infinite cubic-bezier(0.45,0.05,0.55,0.95)0.15s;}
.voice-visualization.speaking .ring:nth-child(3){animation:speakWave 1.2s infinite cubic-bezier(0.45,0.05,0.55,0.95)0.3s;} .voice-visualization.speaking .ring:nth-child(5){animation:speakCenterPulse 1.2s infinite cubic-bezier(0.45,0.05,0.55,0.95);background-color:var(--accent-primary);}
.voice-visualization.processing .ring{border-color:var(--text-secondary);}
.voice-visualization.processing .ring:nth-child(4){animation:processingPulse 1.8s infinite ease-in-out;} .voice-visualization.processing .ring:nth-child(3){animation:processingPulse 1.8s infinite ease-in-out 0.2s;}
.voice-visualization.processing .ring:nth-child(5){background-color:var(--text-secondary);}
.assistant-info{text-align:center;margin-top:15px;}
.assistant-info h1{font-size:1.7rem;font-weight:500;color:var(--text-primary);transition:color 0.4s ease;}
.assistant-info .subtitle{font-size:0.85rem;color:var(--text-secondary);transition:color 0.4s ease;}
.interpreting-status{padding:6px 12px;background-color:var(--bg-ternary);border-radius:10px;color:var(--text-secondary);font-size:0.8rem;margin-top:10px;text-align:center;font-style:italic;transition:all 0.3s ease;opacity:0;transform:translateY(6px);display:none;}
.interpreting-status.visible{opacity:1;transform:translateY(0);display:inline-block;}

.chat-body-wrapper{
    width:100%; padding:0 12px; display:flex; flex-direction:column;
    background-color: transparent;
    /* Default state, grows when .layout-settled is applied by JS */
    flex-grow: 0; 
    overflow-y: hidden; /* No scroll initially */
    min-height: 0; /* Important for flex children that might scroll */
}

/* Layout Asentado: Controles fijos abajo, chat con scroll */
/* This class is added by JS based on content height */
.main-interaction-area.layout-settled {
    justify-content: flex-start; /* Header at top, controls at bottom, chat fills space */
}
.main-interaction-area.layout-settled .chat-body-wrapper {
    flex-grow:1; /* Takes up available space */
    overflow-y:auto; /* Enables scrolling for chat messages */
    scrollbar-width:thin; scrollbar-color:var(--accent-secondary)var(--bg-ternary);
}
.main-interaction-area.layout-settled .chat-body-wrapper::-webkit-scrollbar{width:5px;} 
.main-interaction-area.layout-settled .chat-body-wrapper::-webkit-scrollbar-track{background:var(--bg-ternary);border-radius:2.5px;}
.main-interaction-area.layout-settled .chat-body-wrapper::-webkit-scrollbar-thumb{background-color:var(--accent-secondary);border-radius:2.5px;}

/* Initial centering when not settled and few messages */
.main-interaction-area:not(.layout-settled) {
    justify-content: center; 
}

.chat-body{width:100%;display:flex;flex-direction:column;gap:10px;padding-bottom:8px;}
.bubble{max-width:85%;padding:10px 15px;border-radius:18px;font-size:0.9rem;line-height:1.5;box-shadow:0 3px 8px var(--shadow-color);word-break:break-word;white-space:pre-wrap;transition:all 0.4s ease;position:relative;opacity:0;transform:translateY(10px);}
.bubble.visible{opacity:1;transform:translateY(0);}
.bubble.assistant{background-color:var(--bubble-assistant-bg);color:var(--bubble-assistant-text);align-self:flex-start;border:1px solid var(--accent-primary);border-top-left-radius:7px;}
.bubble.user{display:none !important;}
.bubble.loading-text{color:transparent;min-height:calc(0.9rem*1.5 + 20px);display:flex;align-items:center;padding-left:40px;}
.bubble.loading-text::after{content:'';position:absolute;left:15px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--text-primary);animation:typingDots 1.3s infinite;box-shadow:10px 0 0 color-mix(in srgb,var(--text-primary)65%,transparent),20px 0 0 color-mix(in srgb,var(--text-primary)35%,transparent);}

.controls{
    width:100%;display:flex;flex-direction:column;align-items:center;
    padding:10px 0 clamp(10px,2.5vh,20px); /* Adjusted padding */
    flex-shrink:0; /* Prevent shrinking */
    background-color:var(--bg-primary); 
    border-top:1px solid var(--bg-ternary);
    opacity: 0;
    transition: opacity 0.5s ease 0.2s; 
    position: relative; /* Keep in normal document flow */
}
.main-interaction-area.visible .controls { 
    opacity: 1;
}
/* Estilos adicionales para el Step 3 del Onboarding */
.onboarding-step-container:nth-child(3) .onboarding-visual-accent {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--orange-lighter) 15%, transparent) 0%, transparent 65%);
    animation-delay: -2.5s;
}

.input-group-futuristic select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.terms-group {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 10px;
}

.terms-group input[type="checkbox"] {
    width: 18px; /* Tamaño más manejable */
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent-primary); /* Moderno, colorea la caja cuando está marcada */
}

.terms-group label {
    font-size: 0.75rem; /* Letra chiquita */
    color: var(--text-secondary);
    line-height: 1.4;
}

.terms-group label a {
    color: var(--accent-primary);
    text-decoration: underline;
}

@media(max-width: 600px) {
    .terms-group label {
        font-size: 0.7rem;
    }
}
/* Estilos para popups de Términos y Política de Privacidad */
.legal-dialog-content {
    max-height: 65vh; /* Altura máxima antes de que aparezca el scroll */
    overflow-y: auto; /* Habilita el scroll vertical si el contenido es muy largo */
    text-align: left;
    padding-right: 15px; /* Espacio para la barra de scroll */
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-secondary) var(--bg-ternary);
}

.legal-dialog-content::-webkit-scrollbar { width: 5px; }
.legal-dialog-content::-webkit-scrollbar-track { background: var(--bg-ternary); border-radius: 2.5px; }
.legal-dialog-content::-webkit-scrollbar-thumb { background-color: var(--accent-secondary); border-radius: 2.5px; }

.legal-dialog-content h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--input-border);
    padding-bottom: 4px;
}

.legal-dialog-content ul {
    list-style-position: inside;
    padding-left: 10px;
    margin-top: 5px;
}

.legal-dialog-content li {
    margin-bottom: 5px;
}

/* Hacer que los enlaces de los términos parezcan clicables */
#openTermsLink, #openPrivacyLink {
    cursor: pointer;
    font-weight: 600;
}
#recordBtn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;background-color:var(--accent-primary);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:white;box-shadow:0 0 16px color-mix(in srgb,var(--accent-primary)35%,transparent),0 4px 8px var(--shadow-color);transition:all 0.2s ease;outline:none;}
#recordBtn:hover{background-color:color-mix(in srgb,var(--accent-primary)80%,black);box-shadow:0 0 20px color-mix(in srgb,var(--accent-primary)50%,transparent),0 6px 12px var(--shadow-color);}
#recordBtn:active,#recordBtn.is-recording{transform:scale(.92);background-color:var(--accent-secondary);}
#recordBtn.is-recording{color:var(--text-primary);}
#recordBtn:disabled{background-color:var(--bg-ternary);color:var(--text-placeholder);cursor:not-allowed;box-shadow:none;}
#userInput{display:none !important;}

@media(max-width:600px){
    .app-control-btn{top: calc(env(safe-area-inset-top, 0px) + 12px);font-size:1.2rem;width:40px;height:40px;} 
    .theme-toggle-btn{right: calc(env(safe-area-inset-right, 0px) + 12px);} 
    .logout-btn{left: calc(env(safe-area-inset-left, 0px) + 12px);}
    .onboarding-step-content{gap:15px; padding: clamp(15px, 4vh, 25px);}
    .onboarding-logo{width:65px;height:65px;font-size:2.3rem;}
    .voice-visualization-container{min-height:150px;} .voice-visualization{width:130px;height:130px;}
    .voice-visualization .ring:nth-child(1){width:35px;height:35px;border-width:3px;} .voice-visualization .ring:nth-child(2){width:55px;height:55px;}
    .voice-visualization .ring:nth-child(3){width:75px;height:75px;} .voice-visualization .ring:nth-child(4){width:95px;height:95px;}
    .voice-visualization .ring:nth-child(5){width:30px;height:30px;}
    .assistant-info h1{font-size:1.4rem;} .assistant-info .subtitle{font-size:0.8rem;}
    #recordBtn{width:55px;height:55px;font-size:1.5rem;}
    .dialog-box{padding:20px 22px;max-width:calc(100% - 30px);} .dialog-box h2{font-size:1.3rem;} .dialog-box p{font-size:0.9rem;}
    .dialog-buttons{flex-direction:column; gap: 10px;}
    .futuristic-button{padding:12px 16px;font-size:0.95rem;}
    .input-group-futuristic input[type="text"],.input-group-futuristic select{padding:12px 14px 12px 0; font-size:1rem;} /* Ensure 1rem for inputs */
    .input-icon{padding-left:14px;font-size:0.95rem;}
    .recording-countdown {font-size: 1rem; top: 2px;}
}
@keyframes recordPulse{0%{transform:scale(0.6);opacity:0.8;}50%{transform:scale(1);opacity:1;}100%{transform:scale(0.6);opacity:0.8;}}
@keyframes speakWave{0%{transform:scale(0.7);opacity:0;}25%{opacity:0.3;}50%{transform:scale(1.05);opacity:0.8;}75%{opacity:0.3;}100%{transform:scale(0.7);opacity:0;}}
@keyframes speakCenterPulse{0%,100%{transform:scale(1);}50%{transform:scale(0.85);}}
@keyframes processingPulse{0%,100%{opacity:0.5;transform:scale(0.98);}50%{opacity:0.8;transform:scale(1.02);}}
@keyframes typingDots{0%,100%{background-color:var(--text-primary);box-shadow:10px 0 0 color-mix(in srgb,var(--text-primary)65%,transparent),20px 0 0 color-mix(in srgb,var(--text-primary)35%,transparent);}33%{background-color:color-mix(in srgb,var(--text-primary)65%,transparent);box-shadow:10px 0 0 var(--text-primary),20px 0 0 color-mix(in srgb,var(--text-primary)65%,transparent);}66%{background-color:color-mix(in srgb,var(--text-primary)35%,transparent);box-shadow:10px 0 0 color-mix(in srgb,var(--text-primary)65%,transparent),20px 0 0 var(--text-primary);}}