/* =========================================================================
   Bylogistics Chat — Design System (Mobile First · iPhone 17 Pro Max ref.)
   Basado en tokens CSS. Inspiración: Apple / iMessage / Telegram / Discord.
   ========================================================================= */

/* --------- Tokens ---------- */
:root {
    /* Colores marca */
    --brand-500: #0A84FF;
    --brand-600: #0071E3;
    --brand-400: #5AC8FA;

    /* Superficies (light) */
    --bg:        #f5f6f8;
    --bg-elev:   #ffffff;
    --panel:     #ffffff;
    --panel-2:   #f2f4f7;
    --sidebar:   #f7f8fa;

    --text:      #0b0d10;
    --text-2:    #3c4453;
    --muted:     #6b7280;
    --border:    #e5e7eb;
    --border-2:  #eceef2;

    /* Estados */
    --ok:        #30d158;
    --err:       #ff453a;
    --warn:      #ff9f0a;

    /* Chat bubbles */
    --bubble-me:      linear-gradient(135deg, #0A84FF 0%, #5AC8FA 100%);
    --bubble-me-text: #ffffff;
    --bubble-you:     #ffffff;
    --bubble-you-text:#0b0d10;

    /* Sombras */
    --shadow-sm:  0 1px 2px rgba(15,23,42,.06);
    --shadow-md:  0 6px 16px rgba(15,23,42,.08);
    --shadow-lg:  0 20px 40px rgba(15,23,42,.12);

    /* Radios */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Espaciado */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* Tipografía */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Inter", "Poppins", "Segoe UI", Roboto, sans-serif;
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px;
    --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;

    /* Animación */
    --ease: cubic-bezier(.2,.7,.2,1);
    --t-fast: 150ms;
    --t: 220ms;

    /* Safe areas iOS notch */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* Modo oscuro */
[data-theme="dark"] {
    --bg:        #000000;
    --bg-elev:   #0e1013;
    --panel:     #121418;
    --panel-2:   #1a1d22;
    --sidebar:   #0b0d10;

    --text:      #f2f4f7;
    --text-2:    #c8cdd6;
    --muted:     #8a94a6;
    --border:    #232833;
    --border-2:  #2b313d;

    --bubble-me:      linear-gradient(135deg, #0A84FF 0%, #5AC8FA 100%);
    --bubble-me-text: #ffffff;
    --bubble-you:     #1c1f26;
    --bubble-you-text:#f2f4f7;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 6px 16px rgba(0,0,0,.5);
    --shadow-lg:  0 20px 40px rgba(0,0,0,.6);
}

/* Preferencia del sistema */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg:#000; --bg-elev:#0e1013; --panel:#121418; --panel-2:#1a1d22; --sidebar:#0b0d10;
        --text:#f2f4f7; --text-2:#c8cdd6; --muted:#8a94a6; --border:#232833; --border-2:#2b313d;
        --bubble-you:#1c1f26; --bubble-you-text:#f2f4f7;
    }
}

/* --------- Reset base --------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; height:100%; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}
img,svg{display:block;max-width:100%}
button{font: inherit; color: inherit;}
a{color: var(--brand-500); text-decoration: none;}
a:hover{text-decoration: underline;}

/* Scrollbars finos */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background: color-mix(in oklab, var(--border) 60%, transparent); border-radius:99px}
::-webkit-scrollbar-thumb:hover{background: var(--border)}

/* --------- Componentes reutilizables --------- */

/* Botones */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 12px 18px;
    font-weight: 600; font-size: var(--fs-base);
    border-radius: var(--r-md); border: 1px solid transparent;
    cursor:pointer;
    background: var(--panel-2);
    color: var(--text);
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
    min-height: 44px; /* accesibilidad táctil */
}
.btn:hover{background: color-mix(in oklab, var(--panel-2) 80%, var(--brand-500) 20%);}
.btn:active{transform: scale(.98);}
.btn:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px}

.btn-primary {
    background: var(--brand-500);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in oklab, var(--brand-500) 30%, transparent);
}
.btn-primary:hover{background: var(--brand-600);}
.btn-ghost{background: transparent;}
.btn-danger{background: var(--err); color:#fff;}
.btn-block{width:100%}
.btn-icon{padding:10px; width:44px; height:44px}

/* Inputs */
.input, .textarea, .select {
    width:100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 13px 14px;
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    outline: none;
    transition: border var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
    min-height: 44px;
}
.input:focus, .textarea:focus, .select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-500) 20%, transparent);
    background: var(--bg-elev);
}
.textarea{min-height: 44px; max-height: 140px; resize:none; line-height:1.4}
.label{display:block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 6px}

/* Tarjeta */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

/* Avatares */
.avatar{
    width:40px;height:40px;border-radius:50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    color:#fff; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0; overflow:hidden; user-select:none;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-lg{width:64px;height:64px;font-size:22px}
.avatar-xl{width:96px;height:96px;font-size:32px}

/* Badge */
.badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px; border-radius: var(--r-pill);
    background: var(--panel-2); font-size: var(--fs-xs); color: var(--text-2);
}
.badge.online{background: color-mix(in oklab, var(--ok) 15%, transparent); color: var(--ok)}
.badge.dot::before{content:""; width:8px;height:8px;border-radius:50%;background:currentColor}

.online-dot{
    position:absolute; right:-2px; bottom:-2px;
    width:12px;height:12px;border-radius:50%;
    background: var(--ok); border:2px solid var(--panel);
}

/* Modal */
.modal-backdrop[hidden]{ display: none !important; }
.modal-backdrop{
    position:fixed; inset:0; background: rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center;
    z-index:100; padding: var(--sp-4);
    backdrop-filter: blur(8px);
    animation: fadeIn var(--t) var(--ease);
}
.modal{
    background: var(--panel); border:1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    max-width: 480px; width:100%;
    box-shadow: var(--shadow-lg);
    animation: popIn var(--t) var(--ease);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes popIn  { from{opacity:0; transform: translateY(20px) scale(.96)} to{opacity:1; transform:none} }
@keyframes slideUp { from{transform: translateY(20px); opacity:0} to{transform:none; opacity:1} }

/* Skeleton */
.skeleton{
    background: linear-gradient(90deg, var(--panel-2), var(--border-2), var(--panel-2));
    background-size: 200% 100%;
    animation: shine 1.4s linear infinite;
    border-radius: var(--r-sm);
}
@keyframes shine{ from{background-position: 200% 0} to{background-position:-200% 0} }

/* Notificaciones toast */
.toast{
    position: fixed; left:50%; bottom: calc(20px + var(--sab)); transform: translateX(-50%);
    background: var(--panel); border:1px solid var(--border); color: var(--text);
    padding: 10px 16px; border-radius: var(--r-pill);
    box-shadow: var(--shadow-md); z-index:200;
    animation: slideUp var(--t) var(--ease);
    font-size: var(--fs-sm);
}

/* Utilidades */
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.hidden{display:none !important}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.center{text-align:center}
.row{display:flex; gap:12px}
.col{display:flex; flex-direction:column}

/* Focus visible global */
:focus-visible{outline: 2px solid var(--brand-500); outline-offset: 2px}

/* Alto contraste */
@media (prefers-contrast: more){
    :root{ --border:#000; --muted:#333 }
    [data-theme="dark"]{ --border:#fff; --muted:#ddd }
}

/* Reducir animaciones */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}