/* ============================================================================
   PA DESIGN SYSTEM — Pollo Assistance
   ----------------------------------------------------------------------------
   Fase 0 del rediseño. Tokens + componentes base compartidos.
   Basado en la identidad REAL extraída de la web (naranja #FF9800→#F57C00,
   navy #1A1A2E, amarillo pollo #F5C842, verde/rojo/azul semánticos).

   REGLAS:
   - Es ADITIVO: define variables y clases OPT-IN (prefijo `pa-`). No cambia
     ningún estilo existente hasta que un elemento use estas clases/variables.
   - Cada módulo mantiene su identidad; esto es la BASE de calidad compartida,
     no un molde para que todo se vea igual.
   - Prefijo `--pa-` en todos los tokens para no colisionar con nada.
   ============================================================================ */

:root {
    /* ---- Marca (naranja pollo) ---- */
    --pa-orange:        #ff9800;
    --pa-orange-dark:   #f57c00;
    --pa-orange-light:  #ffa726;
    --pa-orange-050:    #fff8e1;   /* fondo naranja muy suave */
    --pa-orange-100:    #ffe8c2;
    --pa-yellow:        #f5c842;   /* amarillo pollo (acento) */
    --pa-gradient-brand: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    --pa-gradient-brand-soft: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);

    /* ---- Tinta / superficies (tema claro por defecto) ---- */
    --pa-ink:           #1a1a2e;   /* navy — cabeceras/superficies oscuras */
    --pa-bg:            #f6f7f9;   /* fondo de página */
    --pa-surface:       #ffffff;   /* tarjetas, paneles */
    --pa-surface-2:     #f2f4f7;   /* superficie secundaria/hover */
    --pa-surface-3:     #e9edf2;
    --pa-border:        #e3e7ee;   /* bordes suaves */
    --pa-border-strong: #d3d9e3;

    /* ---- Texto ---- */
    --pa-text:          #1f2430;   /* texto principal */
    --pa-text-muted:    #5b6370;   /* secundario */
    --pa-text-soft:     #949cab;   /* terciario / placeholders */
    --pa-text-on-brand: #ffffff;   /* texto sobre naranja */

    /* ---- Semánticos ---- */
    --pa-success:       #43a047;
    --pa-success-050:   #e8f5e9;
    --pa-danger:        #e53935;
    --pa-danger-050:    #ffebee;
    --pa-warning:       #fb8c00;
    --pa-info:          #1a73e8;
    --pa-info-050:      #e8f0fe;

    /* ---- Acentos (tiers/premium) ---- */
    --pa-purple:        #764ba2;
    --pa-purple-light:  #8b5cf6;
    --pa-gradient-premium: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* ---- Tipografía ---- */
    --pa-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --pa-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Consolas, monospace;

    --pa-fs-xs:   11.5px;
    --pa-fs-sm:   13px;
    --pa-fs-base: 14.5px;
    --pa-fs-md:   16px;
    --pa-fs-lg:   19px;
    --pa-fs-xl:   24px;
    --pa-fs-2xl:  31px;

    --pa-fw-normal:   400;
    --pa-fw-medium:   500;
    --pa-fw-semibold: 600;
    --pa-fw-bold:     700;

    --pa-lh-tight:  1.25;
    --pa-lh-normal: 1.5;

    /* ---- Espaciado (base 4px) ---- */
    --pa-space-1: 4px;
    --pa-space-2: 8px;
    --pa-space-3: 12px;
    --pa-space-4: 16px;
    --pa-space-5: 20px;
    --pa-space-6: 24px;
    --pa-space-8: 32px;
    --pa-space-10: 40px;
    --pa-space-12: 48px;

    /* ---- Radios ---- */
    --pa-radius-sm:  8px;
    --pa-radius-md:  12px;
    --pa-radius-lg:  16px;
    --pa-radius-xl:  22px;
    --pa-radius-pill: 999px;

    /* ---- Sombras (suaves, modernas) ---- */
    --pa-shadow-xs: 0 1px 2px rgba(20, 24, 40, 0.06);
    --pa-shadow-sm: 0 2px 8px rgba(20, 24, 40, 0.08);
    --pa-shadow-md: 0 6px 20px rgba(20, 24, 40, 0.10);
    --pa-shadow-lg: 0 14px 40px rgba(20, 24, 40, 0.14);
    --pa-shadow-brand: 0 8px 22px rgba(245, 124, 0, 0.28);

    /* ---- Transiciones ---- */
    --pa-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --pa-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Z-index ---- */
    --pa-z-dropdown: 1000;
    --pa-z-sticky:   1020;
    --pa-z-modal:    1050;
    --pa-z-toast:    1080;
}

/* Override de superficies para módulos/zonas en modo oscuro (opt-in con
   [data-pa-theme="dark"] en un contenedor). La marca no cambia. */
[data-pa-theme="dark"] {
    --pa-bg:            #0d1117;
    --pa-surface:       #161b22;
    --pa-surface-2:     #1c2230;
    --pa-surface-3:     #232b3a;
    --pa-border:        #2a3140;
    --pa-border-strong: #3a4353;
    --pa-text:          #e7ebf2;
    --pa-text-muted:    #b3bccb;
    --pa-text-soft:     #7d8698;
}

/* ============================================================================
   COMPONENTES BASE (opt-in) — se aplican SOLO a elementos con clase `pa-*`.
   ============================================================================ */

/* ---- Botones ---- */
.pa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pa-space-2);
    font-family: var(--pa-font); font-size: var(--pa-fs-sm); font-weight: var(--pa-fw-semibold);
    line-height: 1; padding: 10px 18px; border-radius: var(--pa-radius-pill);
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform var(--pa-transition), background var(--pa-transition), box-shadow var(--pa-transition), border-color var(--pa-transition);
    user-select: none;
}
.pa-btn:active { transform: translateY(1px) scale(0.99); }
.pa-btn:disabled, .pa-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.pa-btn--primary { background: var(--pa-gradient-brand); color: var(--pa-text-on-brand); box-shadow: var(--pa-shadow-brand); }
.pa-btn--primary:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 10px 26px rgba(245, 124, 0, 0.34); }

.pa-btn--ghost { background: var(--pa-surface); color: var(--pa-text); border-color: var(--pa-border-strong); }
.pa-btn--ghost:hover:not(:disabled) { background: var(--pa-surface-2); }

.pa-btn--soft { background: var(--pa-orange-050); color: var(--pa-orange-dark); }
.pa-btn--soft:hover:not(:disabled) { background: var(--pa-orange-100); }

.pa-btn--danger { background: var(--pa-danger); color: #fff; }
.pa-btn--danger:hover:not(:disabled) { filter: brightness(1.05); }

.pa-btn--sm { padding: 7px 13px; font-size: var(--pa-fs-xs); }
.pa-btn--lg { padding: 13px 24px; font-size: var(--pa-fs-base); }
.pa-btn--icon { padding: 9px; border-radius: var(--pa-radius-md); }
.pa-btn--block { width: 100%; }

/* ---- Tarjetas ---- */
.pa-card {
    background: var(--pa-surface); border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-lg); padding: var(--pa-space-5);
    box-shadow: var(--pa-shadow-sm);
}
.pa-card--interactive { cursor: pointer; transition: transform var(--pa-transition), box-shadow var(--pa-transition), border-color var(--pa-transition); }
.pa-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--pa-shadow-md); border-color: var(--pa-orange-light); }

/* ---- Inputs ---- */
.pa-input, .pa-textarea {
    font-family: var(--pa-font); font-size: var(--pa-fs-base); color: var(--pa-text);
    background: var(--pa-surface); border: 1.5px solid var(--pa-border-strong);
    border-radius: var(--pa-radius-md); padding: 11px 14px; width: 100%;
    transition: border-color var(--pa-transition), box-shadow var(--pa-transition);
}
.pa-input::placeholder, .pa-textarea::placeholder { color: var(--pa-text-soft); }
.pa-input:focus, .pa-textarea:focus {
    outline: none; border-color: var(--pa-orange);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.18);
}
.pa-textarea { resize: vertical; line-height: var(--pa-lh-normal); min-height: 48px; }

/* ---- Chip / etiqueta ---- */
.pa-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--pa-fs-xs); font-weight: var(--pa-fw-semibold);
    padding: 4px 11px; border-radius: var(--pa-radius-pill);
    background: var(--pa-surface-2); color: var(--pa-text-muted);
    border: 1px solid var(--pa-border);
}
.pa-chip--brand { background: var(--pa-orange-050); color: var(--pa-orange-dark); border-color: transparent; }

/* ---- Utilidades ligeras ---- */
.pa-elevated { box-shadow: var(--pa-shadow-md); }
.pa-muted    { color: var(--pa-text-muted); }
.pa-brand-text { background: var(--pa-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Estado deshabilitado del envío mientras la IA responde (Fase 2) */
.pa-send-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
#messageInput:disabled { opacity: 0.65; cursor: not-allowed; }

/* Respeta preferencia de menos animación */
@media (prefers-reduced-motion: reduce) {
    .pa-btn, .pa-card--interactive { transition: none; }
    .pa-btn:active { transform: none; }
}