/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM  ·  Flomay Química S.L.  (Fase 5)
   ------------------------------------------------------------------------
   Capa base compartida por TODAS las páginas. Basada en el estilo de
   referencia de administracion/fprc (azul #3b82f6, fondos claros,
   Segoe UI, tarjetas con sombra suave).

   Reglas de esta capa:
   · Variables --fl-* en :root → cualquier CSS de página puede usarlas.
   · Componentes con prefijo .ds-* → 100% opt-in; NO se restilizan
     elementos sueltos (button, table, h1...) para no romper páginas.
   · Solo tres retoques globales sin riesgo: scrollbars, selección de
     texto y foco accesible con teclado.

   Migración por lotes: al retocar una página, sustituir sus estilos
   repetidos por estos componentes hasta que su CSS propio quede solo
   con lo específico de esa página.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta ── */
    --fl-primario:        #3b82f6;
    --fl-primario-oscuro: #2563eb;
    --fl-primario-suave:  #eff6ff;
    --fl-exito:           #16a34a;
    --fl-exito-suave:     #dcfce7;
    --fl-aviso:           #d97706;
    --fl-aviso-suave:     #fef3c7;
    --fl-peligro:         #dc2626;
    --fl-peligro-suave:   #fee2e2;

    /* ── Neutros ── */
    --fl-fondo:           #f0f2f5;
    --fl-superficie:      #ffffff;
    --fl-texto:           #1a1b1e;
    --fl-texto-suave:     #4b5563;
    --fl-texto-mudo:      #9ca3af;
    --fl-borde:           #e5e7eb;
    --fl-borde-suave:     #f3f4f6;

    /* ── Geometría y sombra ── */
    --fl-radio:           10px;
    --fl-radio-sm:        7px;
    --fl-sombra:          0 2px 8px rgba(0, 0, 0, .07);
    --fl-sombra-alta:     0 6px 18px rgba(0, 0, 0, .12);

    /* ── Tipografía ── */
    --fl-fuente:          'Segoe UI', system-ui, Arial, sans-serif;
}

/* ── Retoques globales seguros ─────────────────────────────────────────── */
::selection { background: var(--fl-primario); color: #fff; }

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c3c9d2; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #a8b0bc; }

:focus-visible { outline: 2px solid var(--fl-primario); outline-offset: 2px; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border: none; border-radius: var(--fl-radio-sm);
    font: 600 14px var(--fl-fuente); cursor: pointer;
    background: var(--fl-primario); color: #fff;
    transition: filter .15s, transform .1s;
}
.ds-btn:hover { filter: brightness(1.08); }
.ds-btn:active { transform: scale(.97); }
.ds-btn:disabled { opacity: .55; cursor: not-allowed; }
.ds-btn--secundario { background: var(--fl-borde-suave); color: var(--fl-texto-suave); }
.ds-btn--exito      { background: var(--fl-exito); }
.ds-btn--peligro    { background: var(--fl-peligro); }
.ds-btn--fantasma   { background: transparent; color: var(--fl-primario); border: 1px solid var(--fl-borde); }

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--fl-superficie);
    border-radius: var(--fl-radio);
    box-shadow: var(--fl-sombra);
    padding: 16px 18px;
}
.ds-card--interactiva { transition: transform .15s, box-shadow .15s; cursor: pointer; }
.ds-card--interactiva:hover { transform: translateY(-2px); box-shadow: var(--fl-sombra-alta); }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.ds-tabla-wrap { overflow-x: auto; }
.ds-tabla { width: 100%; border-collapse: collapse; font: 14px var(--fl-fuente); }
.ds-tabla thead th {
    padding: 10px 14px; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--fl-texto-suave); background: #f9fafb;
    border-bottom: 1px solid var(--fl-borde);
    white-space: nowrap;
}
.ds-tabla tbody td { padding: 11px 14px; border-bottom: 1px solid var(--fl-borde-suave); }
.ds-tabla tbody tr:hover { background: #f9fafb; }
.ds-tabla tbody tr:last-child td { border-bottom: none; }

/* ── Insignias ─────────────────────────────────────────────────────────── */
.ds-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font: 600 12px var(--fl-fuente); white-space: nowrap;
}
.ds-badge--azul    { background: var(--fl-primario-suave); color: var(--fl-primario-oscuro); }
.ds-badge--verde   { background: var(--fl-exito-suave); color: #15803d; }
.ds-badge--ambar   { background: var(--fl-aviso-suave); color: #b45309; }
.ds-badge--rojo    { background: var(--fl-peligro-suave); color: #b91c1c; }
.ds-badge--gris    { background: var(--fl-borde-suave); color: var(--fl-texto-mudo); }

/* ── Formularios ───────────────────────────────────────────────────────── */
.ds-campo { display: flex; flex-direction: column; gap: 4px; }
.ds-campo label { font: 600 12px var(--fl-fuente); color: var(--fl-texto-suave); }
.ds-input, .ds-select, .ds-textarea {
    padding: 9px 12px; border: 1px solid var(--fl-borde); border-radius: var(--fl-radio-sm);
    font: 14px var(--fl-fuente); background: var(--fl-superficie); color: var(--fl-texto);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
    border-color: var(--fl-primario);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.ds-modal-fondo {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ds-modal {
    background: var(--fl-superficie); border-radius: 14px;
    padding: 24px; max-width: 480px; width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    max-height: 90vh; overflow-y: auto;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ds-toast {
    position: fixed; right: 18px; top: 76px; z-index: 1200;
    padding: 12px 18px; border-radius: 9px;
    color: #fff; font: 14px var(--fl-fuente);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    animation: dsToastIn .25s ease-out;
    background: var(--fl-exito);
}
.ds-toast--error { background: var(--fl-peligro); }
@keyframes dsToastIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Utilidades responsive ─────────────────────────────────────────────── */
.ds-solo-movil { display: none; }
@media (max-width: 640px) {
    .ds-solo-movil { display: initial; }
    .ds-oculta-movil { display: none !important; }
}

/* ── Componente compartido: barra de navegación inferior ───────────────
   El gap fijo de 40px desbordaba en móvil (375px) y cortaba las
   etiquetas de los extremos en todas las páginas. Reparto equitativo. */
@media (max-width: 640px) {
    .navigation-bar {
        gap: 0 !important;
        justify-content: space-around !important;
        padding-left: 4px;
        padding-right: 4px;
    }
    .navigation-bar .nav-item {
        flex: 1;
        min-width: 0;
        font-size: 0.72em;
    }
    .navigation-bar .nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .navigation-bar .nav-item i { font-size: 1.35em; }
}