/* * Mediaweb Chile - Intelligence Division 
 * Core Design System 2026
 */

:root {
    --mw-green: #26D07C;
    --mw-green-hover: #1fb86e;
    --mw-dark: #050505;
    --mw-glass: rgba(10, 10, 10, 0.95);
    --mw-border: rgba(255, 255, 255, 0.05);
}

/* --- Base & Reset --- */
[x-cloak] { display: none !important; }

body {
    background-color: var(--mw-dark);
    /* Fondo con gradientes sutiles para profundidad */
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(38, 208, 124, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(38, 208, 124, 0.03) 0%, transparent 30%);
    background-attachment: fixed;
}

/* Scrollbar Corporativo */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: var(--mw-green); 
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

/* --- Layout Elements --- */
.glass { 
    background: var(--mw-glass); 
    backdrop-filter: blur(20px); 
    border: 1px solid var(--mw-border); 
}

.rounded-mw {
    border-radius: 1.25rem;
}

/* --- Filtro de Fecha (Header) --- */
.date-filter-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 0 15px;
    border: 1px solid rgba(38, 208, 124, 0.1);
    transition: all 0.3s ease;
}

.date-filter-container:hover {
    border-color: var(--mw-green);
    background: rgba(38, 208, 124, 0.05);
}

input[type="date"] {
    background: transparent;
    border: none;
    outline: none;
    color: var(--mw-green);
    font-size: 11px;
    font-weight: 900;
    padding: 10px 5px;
    cursor: pointer;
    color-scheme: dark;
    text-transform: uppercase;
}

/* Icono de calendario nativo */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24" fill="none" stroke="%2326D07C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    cursor: pointer;
    margin-left: 8px;
    filter: drop-shadow(0 0 2px rgba(38, 208, 124, 0.4));
}

/* --- Burbujas de Chat (Pop-up) --- */
.chat-container { 
    display: flex; 
    flex-direction: column; 
    gap: 1.25rem; 
    padding: 10px 5px;
}

.msg { 
    max-width: 85%; 
    padding: 14px 18px; 
    border-radius: 20px; 
    font-size: 13.5px; 
    line-height: 1.6;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.msg-ai {
    align-self: flex-start;
    background: rgba(38, 208, 124, 0.08);
    color: #f4f4f5;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(38, 208, 124, 0.2);
}

.msg-user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.03);
    color: #e4e4e7;
    border-bottom-right-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-label {
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.15em;
    color: var(--mw-green);
    opacity: 0.8;
}

/* --- Componentes de Audio & VU Meter --- */
.vu-h-container { 
    height: 4px; 
    width: 100%; 
    background: rgba(255,255,255,0.03); 
    border-radius: 10px; 
    overflow: hidden; 
    position: relative; 
}

.vu-h-bar { 
    position: absolute; 
    left: 0; 
    height: 100%; 
    width: 0%; 
    transition: width 0.1s ease-out; 
    background: var(--mw-green); 
    box-shadow: 0 0 10px var(--mw-green);
}

/* WaveSurfer Visual */
#waveform-multi {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 10px;
}

/* --- Paginación --- */
.page-btn {
    background: rgba(38, 208, 124, 0.05);
    color: var(--mw-green);
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(38, 208, 124, 0.15);
    display: flex;
    align-items: center;
}

.page-btn:hover:not(.disabled) {
    background: var(--mw-green);
    color: var(--mw-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(38, 208, 124, 0.2);
}

.page-btn.disabled { 
    opacity: 0.2; 
    cursor: not-allowed; 
    filter: grayscale(1);
}

/* --- Login & Inputs Generales --- */
.input-group input:focus {
    border-color: var(--mw-green);
    background: rgba(38, 208, 124, 0.03);
    box-shadow: 0 0 20px rgba(38, 208, 124, 0.05);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

/* Animaciones */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(38, 208, 124, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(38, 208, 124, 0); }
    100% { box-shadow: 0 0 0 0 rgba(38, 208, 124, 0); }
}

.btn-active-pulse {
    animation: pulse-green 2s infinite;
}

.fa-sign-out-alt {
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.2));
}