/* ====================================================================
   MAIN.CSS — Variables corporativas APP ARYAN
   Colores extraídos pixel a pixel del logo oficial de Aryan
   Color principal: AZUL #115AAA (color del texto "Aryan" en el logo)
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=Fira+Sans:wght@300;400;500;600&display=swap');

:root {
    /* ============================================================
       COLORES CORPORATIVOS ARYAN — EXTRAÍDOS DEL LOGO OFICIAL
       NO CAMBIAR ESTOS VALORES SIN AUTORIZACIÓN
       ============================================================ */

    /* COLOR PRINCIPAL: Azul Aryan */
    --aryan-primary:         #115AAA;
    --aryan-primary-hover:   #0D4A8E;
    --aryan-primary-light:   #1A6EC4;
    --aryan-primary-lighter: #E8F0FA;
    --aryan-primary-dark:    #0A3D73;

    /* Colores de la barra multicolor del logo (solo para estados) */
    --aryan-bar-red:    #FF1C1C;
    --aryan-bar-yellow: #FFD400;
    --aryan-bar-green:  #48C420;
    --aryan-bar-cyan:   #2FB7ED;

    /* Gris corporativo (del texto "VALUE ADDED" del logo) */
    --aryan-gray-corp: #969696;

    /* Canales RGB para uso en rgba() */
    --aryan-primary-rgb:    17, 90, 170;
    --aryan-bar-red-rgb:    255, 28, 28;
    --aryan-bar-yellow-rgb: 255, 212, 0;
    --aryan-bar-green-rgb:  72, 196, 32;
    --aryan-bar-cyan-rgb:   47, 183, 237;

    /* Gradientes especiales */
    --login-gradient:          linear-gradient(160deg, #071d3a 0%, #0D3060 50%, #071d3a 100%);
    --aryan-multibar-gradient: linear-gradient(90deg, var(--aryan-bar-red), var(--aryan-bar-yellow), var(--aryan-bar-green), var(--aryan-bar-cyan));

    /* Escala de grises */
    --aryan-gray-50:  #FAFAFA;
    --aryan-gray-100: #F5F5F5;
    --aryan-gray-200: #E8E8E8;
    --aryan-gray-300: #D0D0D0;
    --aryan-gray-400: #A0A0A0;
    --aryan-gray-500: #6B6B6B;
    --aryan-gray-600: #4A4A4A;
    --aryan-gray-700: #333333;
    --aryan-gray-800: #1E1E1E;
    --aryan-gray-900: #121212;

    /* Estados — de la barra del logo */
    --color-success: #48C420;
    --color-warning: #FFD400;
    --color-error:   #FF1C1C;
    --color-info:    #2FB7ED;

    /* ============================================================
       MODO CLARO (por defecto)
       ============================================================ */
    --color-primary:         var(--aryan-primary);
    --color-primary-hover:   var(--aryan-primary-hover);
    --color-primary-light:   var(--aryan-primary-light);
    --color-primary-lighter: var(--aryan-primary-lighter);

    --bg-app:        #F1F4F8;
    --bg-surface:    #FFFFFF;
    --bg-rail:       #FFFFFF;
    --bg-subtle:     var(--aryan-gray-50);
    --bg-hover:      var(--aryan-gray-100);
    --bg-active:     var(--aryan-primary-lighter);
    --bg-input:      #FFFFFF;
    --bg-bubble-user: var(--aryan-primary-lighter);
    --bg-bubble-ai:  #FFFFFF;
    --bg-code:       var(--aryan-gray-100);

    --text-primary:   var(--aryan-gray-700);
    --text-secondary: var(--aryan-gray-500);
    --text-muted:     var(--aryan-gray-corp);
    --text-on-primary: #FFFFFF;

    --border-color:  var(--aryan-gray-200);
    --border-strong: var(--aryan-gray-300);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

    /* Tipografía del chat — controlada por preferencias del usuario */
    --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-chat: 'Inter', system-ui, sans-serif;
    --font-chat-size: 15px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --rail-width: 210px;
    --list-width: 340px;
    --detail-width: 300px;
    --topbar-height: 52px;
}

/* ============================================================
   MODO OSCURO
   ============================================================ */
html[data-theme='dark'] {
    --bg-app:        #0B1220;
    --bg-surface:    #131B2A;
    --bg-rail:       #101827;
    --bg-subtle:     #172033;
    --bg-hover:      #1C2739;
    --bg-active:     rgba(var(--aryan-primary-rgb), .22);
    --bg-input:      #172033;
    --bg-bubble-user: rgba(var(--aryan-primary-rgb), .20);
    --bg-bubble-ai:  #172033;
    --bg-code:       #0B1220;

    --color-primary:         #3D8BE0;
    --color-primary-hover:   #5A9EE8;
    --color-primary-lighter: rgba(var(--aryan-primary-rgb), .20);

    --text-primary:   #E6EAF2;
    --text-secondary: #9BA7BC;
    --text-muted:     #6F7C93;

    --border-color:  #23304A;
    --border-strong: #33425F;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* Preferencias de fuente del usuario */
html[data-font='arial']     { --font-chat: Arial, Helvetica, sans-serif; }
html[data-font='inter']     { --font-chat: 'Inter', system-ui, sans-serif; }
html[data-font='roboto']    { --font-chat: 'Roboto', system-ui, sans-serif; }
html[data-font='fira-sans'] { --font-chat: 'Fira Sans', system-ui, sans-serif; }

html[data-font-size='small']  { --font-chat-size: 13px; }
html[data-font-size='normal'] { --font-chat-size: 15px; }
html[data-font-size='large']  { --font-chat-size: 17px; }
html[data-font-size='xlarge'] { --font-chat-size: 19px; }

/* ====================================================================
   RESET Y BASE
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }

button { font-family: inherit; cursor: pointer; }

/* Barra multicolor del logo — separador de marca */
.aryan-multibar {
    height: 3px;
    width: 100%;
    background: var(--aryan-multibar-gradient);
    flex-shrink: 0;
}

/* ====================================================================
   SCROLLBARS
   ==================================================================== */

.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* ====================================================================
   FORMULARIOS
   ==================================================================== */

.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-input,
.form-select {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.form-input:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--aryan-primary-rgb), .15);
}

.form-input::placeholder { color: var(--text-muted); }

.form-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ====================================================================
   BOTONES
   ==================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
    background: var(--color-primary);
    color: var(--text-on-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background .15s, color .15s;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-block { width: 100%; }

/* ====================================================================
   BADGES DE ESTADO Y PRIORIDAD
   ==================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    border-radius: 5px;
    white-space: nowrap;
}

.badge-new,
.badge-open    { background: rgba(var(--aryan-primary-rgb), .12); color: var(--color-primary); }
.badge-pending,
.badge-hold    { background: rgba(var(--aryan-bar-yellow-rgb), .20); color: #8A6D00; }
.badge-solved,
.badge-closed  { background: rgba(var(--aryan-bar-green-rgb), .16); color: #2E7D14; }
.badge-neutral { background: var(--bg-hover); color: var(--text-secondary); }

html[data-theme='dark'] .badge-pending,
html[data-theme='dark'] .badge-hold  { color: var(--aryan-bar-yellow); }
html[data-theme='dark'] .badge-solved,
html[data-theme='dark'] .badge-closed { color: var(--aryan-bar-green); }

/* Punto de prioridad */
.priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--aryan-gray-400);
}
.priority-urgent { background: var(--aryan-bar-red); }
.priority-high   { background: #FF8A3D; }
.priority-normal { background: var(--aryan-bar-cyan); }
.priority-low    { background: var(--aryan-gray-400); }

/* Etiqueta de categoría IA */
.tag-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 5px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* ====================================================================
   UTILIDADES
   ==================================================================== */

.empty-state {
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}