/* ══════════════════════════════════════════════════════════════════════════
   TEMA COMÚN DEL ERP  ·  Gestión Flomay
   ------------------------------------------------------------------------
   Se carga en todas las pantallas DESPUÉS de su propio CSS. Hace dos cosas:

   1. Unifica la paleta. Las pantallas antiguas pintan con variables
      (--primary-blue, --accent-dark, --text-gray...) que cada hoja definía
      con valores parecidos pero no iguales. Aquí se redefinen una sola vez
      con el azul corporativo (#0091D8, el de la web y el del menú), así que
      cambian de color sin tocar su código.
   2. Unifica la forma de lo más repetido: botones, campos, tablas, tarjetas,
      etiquetas y ventanas. Con moderación: solo lo que se ve igual en todas
      partes; los colores semánticos (verde, rojo, ámbar) se respetan.

   No toca los mapas (Leaflet), a FLORE ni al portal de clientes.
   ══════════════════════════════════════════════════════════════════════════ */

:root, body {
    /* paleta corporativa */
    --primary-blue: #0091d8;
    --accent-dark: #007bb8;
    --blue-mid: #33a7e0;
    --fl-primario: #0091d8;
    --fl-primario-oscuro: #007bb8;
    --fl-primario-suave: #e8f4fb;
    --success-green: #16a34a;
    --danger-red: #dc2626;
    --warning-orange: #d97706;
    --warning-yellow: #d97706;
    /* texto y fondos */
    --text-light: #0f172a;
    --text-dark: #0f172a;
    --text-gray: #475569;
    --text-mid: #475569;
    --text-muted: #94a3b8;
    --fl-texto: #0f172a;
    --fl-texto-suave: #475569;
    --fl-texto-mudo: #94a3b8;
    --bg-dark: #f4f6f9;
    --bg-darker: #ffffff;
    --bg-white: #ffffff;
    --bg-light: #f8fafc;
    --fl-fondo: #f4f6f9;
    --border: #e2e8f0;
    --border-light: #eef2f7;
    --fl-borde: #e2e8f0;
    --fl-borde-suave: #eef2f7;
    --radius: 12px;
    --radius-sm: 8px;
    --fl-radio: 12px;
    --fl-radio-sm: 8px;
    --fl-fuente: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
body { font-family: var(--fl-fuente); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }

/* ── Botones: misma forma en todas partes; el color lo pone cada variante ── */
.btn, .ds-btn, .btn-primary, .btn-secondary, .btn-light, .btn-cancel, .btn-save, .btn-guardar, .btn-export, .btn-refresh,
.btn-action, .btn-nuevo-pedido, .btn-agregar, .btn-pri, .btn-sec, .btn-pdf, .btn-generate, .btn-consulta, .btn-historial, .btn-erp, .btn-erp-ent {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn:active, .ds-btn:active { transform: translateY(1px); }
.btn-primary, .btn-save, .btn-guardar, .btn-pri, .btn-nuevo-pedido, .ds-btn:not(.ds-btn--secundario):not(.ds-btn--fantasma):not(.ds-btn--peligro):not(.ds-btn--exito) {
    background: var(--primary-blue); border-color: var(--primary-blue); color: #fff;
}
.btn-primary:hover, .btn-save:hover, .btn-guardar:hover, .btn-pri:hover, .btn-nuevo-pedido:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-light, .btn-cancel, .btn-secondary, .btn-sec, .btn-refresh, .ds-btn--secundario { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.btn-light:hover, .btn-cancel:hover, .btn-secondary:hover, .btn-sec:hover, .btn-refresh:hover, .ds-btn--secundario:hover { background: #e2e8f0; color: #0f172a; }
.btn-danger, .btn-delete, .ds-btn--peligro { background: var(--danger-red); border-color: var(--danger-red); color: #fff; }
.btn-success, .ds-btn--exito { background: var(--success-green); border-color: var(--success-green); color: #fff; }
.btn:disabled, .ds-btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; }

/* ── Campos de formulario ───────────────────────────────────────────────── */
.form-ctrl, .ds-input, .filter-select,
main input[type="text"], main input[type="search"], main input[type="number"], main input[type="date"], main input[type="time"],
main input[type="email"], main input[type="tel"], main input[type="password"], main select, main textarea,
.modal input[type="text"], .modal input[type="number"], .modal input[type="date"], .modal select, .modal textarea,
.modal-box input, .modal-box select, .modal-box textarea, .modal-card input, .modal-card select, .modal-card textarea {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
}
.form-ctrl:focus, .ds-input:focus, .filter-select:focus,
main input:focus, main select:focus, main textarea:focus, .modal input:focus, .modal select:focus, .modal textarea:focus,
.modal-box input:focus, .modal-card input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 145, 216, .14);
}
.form-label, .input-label, .ds-campo label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 600; }
/* No se tocan los cuadros de búsqueda de la cabecera ni nada dentro de un mapa */
header .search-bar input, .leaflet-container input, .leaflet-container select, .leaflet-container button { border-radius: 999px; box-shadow: none; }
/* …salvo los iconos de Font Awesome de los marcadores (campana, aspa), que
   necesitan su propia fuente para dibujarse */
.leaflet-container *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) { font-family: inherit; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.ds-tabla th, .table-card th, .table-wrap th, .table-scroll th, .tabla th, table.table th, .data-table th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.ds-tabla td, .table-card td, .table-wrap td, .table-scroll td, .tabla td, table.table td, .data-table td { border-bottom: 1px solid #f1f5f9; }
.ds-tabla tr:hover td, .table-card tr:hover td, .table-wrap tr:hover td, .table-scroll tr:hover td, .tabla tr:hover td { background: #f8fbfe; }
.table-title, .section-title { color: #0f172a; font-weight: 700; }
.section-title i, .table-title i { color: var(--primary-blue); }

/* ── Tarjetas, paneles y ventanas ───────────────────────────────────────── */
.card, .table-card, .panel, .ds-card { border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.modal-box, .modal-content, .modal-card, .ds-modal { border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.modal-overlay, .modal-backdrop, .ds-modal-fondo { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.modal-close { color: #94a3b8; }
.modal-close:hover { color: #0f172a; }

/* ── Etiquetas ──────────────────────────────────────────────────────────── */
.badge, .ds-badge { border-radius: 999px; font-weight: 700; font-size: .72rem; letter-spacing: .03em; }

/* ── Pestañas y filtros ─────────────────────────────────────────────────── */
.tab.active, .tab[aria-selected="true"] { color: var(--primary-blue); border-color: var(--primary-blue); }

/* ── Cabecera común (la de administracion.css y styles.css) ─────────────── */
header .logo { color: #0f172a; letter-spacing: .02em; }
header .logout-button { border-radius: 999px; }
header .logout-button:hover { background: var(--primary-blue); color: #fff; }

/* ── Barra de desplazamiento discreta ───────────────────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   PASO ENTRE PANTALLAS
   Al ir de una pantalla a otra, la vieja se funde y la nueva entra con un
   leve deslizamiento, como en una app. La cabecera y la barra de abajo se
   quedan quietas: son las mismas en las dos, y que parpadearan despistaría.

   Va aquí y no en flomay-animaciones.css porque el navegador decide si hay
   transición ANTES de que corra ningún script, y esta hoja es la que todas
   las pantallas cargan desde el <head>. Donde el navegador no lo sepa hacer
   (Firefox, Safari antiguos), se cambia de pantalla como siempre.
   ══════════════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fl-pantalla-sale .14s ease-in both; }
::view-transition-new(root) { animation: fl-pantalla-entra .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fl-pantalla-sale  { to   { opacity: 0; } }
@keyframes fl-pantalla-entra { from { opacity: 0; transform: translateY(8px); } }
body > header { view-transition-name: fl-cabecera; }
.navigation-bar.erp-barra { view-transition-name: fl-barra; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}