body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #0f172a;
    color: #e5e7eb;
}

/* alerts and buttons */
.alert {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.alert-danger { background:#7f1d1d; color:#fee2e2; }
.alert-success { background:#14532d; color:#bbf7d0; }
.btn-primary, .btn-secondary {
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 8px;
}
.btn-primary { background:#2563eb; color:white; }
.btn-secondary { background:#1f2937; color:#e5e7eb; }

/* forms */
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
select,
textarea {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #1f2937;
    background:#020617;
    color:#e5e7eb;
}
label { font-size:0.85rem; color:#9ca3af; display:block; margin-bottom:2px; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.table th, .table td {
    border-bottom: 1px solid #1f2937;
    padding: 6px 8px;
}
.table th {
    text-align: left;
    color: #9ca3af;
}

/* layout */
.app-body {
    display:flex;
    min-height:100vh;
}
.app-main {
    flex:1;
    padding:20px;
}
.navbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:50px;
    background:#020617;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    border-bottom:1px solid #1f2937;
    z-index:10;
}
.app-main { margin-top:60px; }

.navbar a {
    color:#e5e7eb;
    text-decoration:none;
    margin-right:12px;
    font-size:0.9rem;
}
.navbar a:hover {
    text-decoration:underline;
}
.navbar-logo {
    height:32px;
    margin-right:8px;
    object-fit:contain;
}
.navbar-brand {
    display:flex;
    align-items:center;
    font-weight:700;
}
.navbar-left, .navbar-center, .navbar-right {
    display:flex;
    align-items:center;
}
.navbar-center a { margin:0 8px; }

.cards-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:12px;
    margin-top:16px;
}
.card {
    background:#020617;
    border-radius:10px;
    padding:12px;
    border:1px solid #1f2937;
}

/* login */
.login-body {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:#020617;
}
.login-card {
    background:#020617;
    padding:24px;
    border-radius:12px;
    border:1px solid #1f2937;
    width:320px;
}
.login-logo {
    max-width:120px;
    margin-bottom:8px;
}
.login-card h1 {
    margin-top:0;
    margin-bottom:16px;
    font-size:1.1rem;
}
.login-footer {
    margin-top:10px;
    font-size:0.8rem;
    color:#6b7280;
}

/* install */
.install-body {
    background:#020617;
    color:#e5e7eb;
}
.install-container {
    max-width:700px;
    margin:20px auto;
    background:#020617;
    border-radius:12px;
    border:1px solid #1f2937;
    padding:20px;
}

/* grid */
.grid-two {
    display:grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
    gap:16px;
}

/* order lines */
.order-line-row {
    display:grid;
    grid-template-columns:2.2fr repeat(2,0.8fr) repeat(4,1fr) 1fr 1.2fr 1fr 1.2fr 1.2fr;
    gap:6px;
    margin-bottom:6px;
}
.order-lines-header {
    font-size:0.8rem;
    color:#9ca3af;
    margin-bottom:4px;
}
/* Ocultar menú y cabecera al imprimir */
@media print {
    .sidebar,
    .topbar,
    .menu,
    .navbar,
    header,
    nav {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hacer que el contenido ocupe toda la página */
    .content-wrapper,
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}
/* Ocultar el botón "Imprimir / PDF" en la versión imprimida */
@media print {
    .btn-print,
    .print-button,
    #btnPrint,
    #print,
    [onclick*="window.print"],
    .acciones-pedido,
    .print-options {
        display: none !important;
        visibility: hidden !important;
    }
}
/* =========================
   THEME CLARO ERP
========================= */

:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#111827;
}

/* Fondo general */
.app-body{
  background:var(--bg)!important;
  color:var(--text)!important;
}

/* Contenedores */
.app-main{
  background:transparent!important;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}

/* Inputs */
input,select,textarea{
  background:#fff!important;
  color:var(--text)!important;
  border:1px solid #d1d5db!important;
  border-radius:10px;
  padding:8px;
}

/* Tablas */
.table{
  background:#fff!important;
  border:1px solid var(--border);
  border-radius:12px;
}
.table th{
  background:#f9fafb;
}

/* Botones */
.btn-primary{
  background:var(--primary)!important;
  color:#fff!important;
  border-radius:10px;
}
.btn-secondary{
  background:#fff!important;
  border:1px solid var(--border);
  border-radius:10px;
}

/* Navbar */
nav,.navbar{
  background:#fff!important;
  border-bottom:1px solid var(--border);
}

/* Alerts */
.alert-success{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:10px;
}
.alert-warning{
  background:#fffbeb;
  border:1px solid #fcd34d;
  border-radius:10px;
}

/* =====================
   OVERRIDE FINAL (CLARO / GRIS) — DICIEMBRE 2025
   (al final para que gane a todo, incluso estilos inline con !important)
===================== */

:root{
  --bg:#f3f4f6;
  --panel:#ffffff;
  --panel-2:#f9fafb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --border-2:#d1d5db;
  --primary:#0ea5e9;
  --primary-2:#0284c7;
  --danger:#ef4444;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

html, body{ background:var(--bg) !important; color:var(--text) !important; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Contenedores */
.app-body{ background:var(--bg) !important; color:var(--text) !important; }
.app-main{ color:var(--text) !important; }

/* Navbar */
.navbar{ background:var(--panel) !important; border-bottom:1px solid var(--border) !important; }
.navbar a{ color:var(--text) !important; opacity:1 !important; }
.navbar a:hover{ color:var(--primary-2) !important; }

/* Tarjetas / paneles */
.card, .panel, .box{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow) !important;
}

/* Tablas */
.table{ background:var(--panel) !important; border:1px solid var(--border) !important; }
.table th{ background:var(--panel-2) !important; color:var(--text) !important; border-bottom:1px solid var(--border) !important; }
.table td{ color:var(--text) !important; border-bottom:1px solid var(--border) !important; }
.table tr:hover td{ background:#f3f4f6 !important; }

/* Formularios */
input, select, textarea{
  background:var(--panel) !important;
  color:var(--text) !important;
  border:1px solid var(--border-2) !important;
}
input::placeholder, textarea::placeholder{ color:#9ca3af !important; }
label{ color:var(--muted) !important; }

/* Botones */
.btn-primary{
  background:var(--primary) !important;
  border:1px solid rgba(2,132,199,.35) !important;
  color:#fff !important;
}
.btn-primary:hover{ background:var(--primary-2) !important; }

.btn-secondary{
  background:var(--panel) !important;
  border:1px solid var(--border-2) !important;
  color:var(--text) !important;
}
.btn-secondary:hover{ background:var(--panel-2) !important; }

/* Badges */
.badge{ background:#e5e7eb !important; color:#111827 !important; border:1px solid var(--border) !important; }
.badge.pendiente{ background:#fef3c7 !important; color:#92400e !important; border-color:#fde68a !important; }
.badge.servido{ background:#dcfce7 !important; color:#166534 !important; border-color:#bbf7d0 !important; }
.badge.pagada{ background:#dcfce7 !important; color:#166534 !important; border-color:#bbf7d0 !important; }
.badge.vencida{ background:#fee2e2 !important; color:#991b1b !important; border-color:#fecaca !important; }

/* Documentos (Cuentas venta / Pedidos / Facturas) — quita el negro inline */
.doc-page,
.invoice-page,
.doc-page * ,
.invoice-page *{
  color:inherit;
}
.doc-page, .invoice-page{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
}
.doc-table th, .doc-table td,
.invoice-table th, .invoice-table td{
  border-bottom:1px solid var(--border) !important;
}

/* Texto fijo de pie en facturas: que se lea */
.invoice-page p{ color:var(--text) !important; }

/* Print: que el PDF salga limpio (blanco) */
@media print{
  body, .app-body{ background:#fff !important; }
  .invoice-page, .doc-page{ background:#fff !important; border:none !important; box-shadow:none !important; }
  .navbar, .invoice-actions, .doc-actions{ display:none !important; }
  .table, .invoice-table, .doc-table{ border-collapse:collapse !important; }
  .table th, .table td{ border-bottom:1px solid #ddd !important; }
}

/* ===============================
   Filtros pedidos – alineación correcta (FIX)
   =============================== */

.orders-filters{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;   /* clave: alinear por abajo */
}

.orders-filters .filter-field{
  display:flex;
  flex-direction:column;
}

.orders-filters label{
  font-size:0.85rem;
  margin:0 0 6px 0;
  height:18px;                 /* reserva espacio del label */
  line-height:18px;
}

/* Igualar alturas reales */
.orders-filters select,
.orders-filters input[type="date"]{
  height:38px !important;
  box-sizing:border-box !important;
}

/* El botón es el que suele desalinear por padding/line-height */
.orders-filters button,
.orders-filters .btn-secondary{
  height:38px !important;
  box-sizing:border-box !important;
  padding:0 14px !important;
  line-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* ===============================
   FIX: Alinear botón "Filtrar" con los campos (orders.php)
   =============================== */

.orders-filters{
  align-items: flex-end; /* clave: alinea por abajo todos los campos */
}

.orders-filters .filter-field{
  justify-content: flex-end;
}

.orders-filters .filter-field button{
  margin-top: auto; /* empuja el botón hacia abajo dentro de su columna */
  height: 38px;
  line-height: 38px; /* que quede centrado vertical */
  padding-top: 0;
  padding-bottom: 0;
}

/* por si algún input/select tiene otra altura en tu CSS base */
.orders-filters select,
.orders-filters input[type="date"]{
  height: 38px;
}
/* ===== FIX DEFINITIVO: filtros Pedidos (alineación botón Filtrar) ===== */
.orders-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:flex-end !important;  /* alinear todos por abajo */
}

/* Cada “columna” de filtro */
.orders-filters .filter-field{
  display:flex !important;
  flex-direction:column !important;
}

/* Etiquetas: que no empujen raro */
.orders-filters .filter-field > label{
  line-height:1.1 !important;
  margin:0 0 6px 0 !important;
}

/* Inputs/Selects: misma altura real */
.orders-filters .filter-field > select,
.orders-filters .filter-field > input[type="date"]{
  height:38px !important;
}

/* El botón: misma altura + pegado abajo */
.orders-filters .filter-field > button{
  height:38px !important;
  line-height:38px !important;
  padding:0 14px !important;
  margin:0 !important;
  align-self:flex-end !important;   /* clave para que baje al final */
}
/* ===== Pedidos: alinear Filtrar con los date/select (FIX definitivo) ===== */
.orders-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:flex-end !important;
}

.orders-filters .filter-field{
  display:flex !important;
  flex-direction:column !important;
}

/* Asegura cajas consistentes */
.orders-filters .filter-field > label,
.orders-filters .filter-field > select,
.orders-filters .filter-field > input,
.orders-filters .filter-field > button{
  box-sizing:border-box !important;
}

/* Inputs/selects altura uniforme */
.orders-filters .filter-field > select,
.orders-filters .filter-field > input[type="date"]{
  height:38px !important;
}

/* Botón: centrado real (esto suele ser la clave) */
.orders-filters .filter-field > button.btn-secondary{
  height:38px !important;
  padding:0 14px !important;
  margin:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  line-height:normal !important; /* importante: evita “bajarlo” */
  vertical-align:middle !important;
  align-self:flex-end !important;
}
/* FIX definitivo: botón Filtrar desalineado por margin-top global del botón */
.orders-filters .btn-secondary,
.orders-filters button{
  margin-top: 0 !important;     /* quita el empuje hacia abajo */
}

/* Opcional pero recomendable: que en filtros nada meta márgenes raros */
.orders-filters select,
.orders-filters input[type="date"]{
  margin-bottom: 0 !important;
}

/* Alineación por abajo (tu layout) */
.orders-filters{
  align-items: flex-end !important;
}

/* =====================================================
   FONDO ERP CON IMAGEN + LEGIBILIDAD
   (añadir AL FINAL del style.css)
===================================================== */

/* Fondo general con imagen */
html, body{
  background-image: url("../images/erp-bg.jpg"); /* ajusta ruta si hace falta */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Capa de oscurecido suave para que todo se lea */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.65); /* oscurece sin matar la imagen */
  z-index:-1;
}

/* Contenedor principal */
.app-body{
  background:transparent !important;
  color:#111827 !important;
}

/* Navbar */
.navbar{
  background:rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(6px);
  border-bottom:1px solid #e5e7eb !important;
}

.navbar a{
  color:#111827 !important;
  font-weight:500;
}

/* Paneles / cards / bloques */
.card,
.panel,
.box,
.app-main > div{
  background:rgba(255,255,255,0.95) !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.12) !important;
}

/* Formularios */
input, select, textarea{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d1d5db !important;
}

label{
  color:#374151 !important;
}

/* Tablas */
.table{
  background:#ffffff !important;
}

.table th{
  background:#f9fafb !important;
  color:#111827 !important;
}

.table td{
  color:#111827 !important;
}

/* Botones */
.btn-primary{
  background:#0ea5e9 !important;
  color:#fff !important;
}

.btn-secondary{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d1d5db !important;
}

/* Documentos (PDF / vista pedido / factura) */
.doc-page,
.invoice-page{
  background:#ffffff !important;
  color:#111827 !important;
  border-radius:16px !important;
}
/* === FONDO ERP (imagen + overlay en el mismo background) === */

html, body{
  background: transparent !important;
}

/* IMPORTANTE: el body debe crear “contexto” para el ::before */
body{
  position: relative;
}

/* Fondo real */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  /* Foto + oscurecido en el MISMO background */
  background-image:
    linear-gradient(rgba(15,23,42,0.65), rgba(15,23,42,0.65)),
    url("../images/erp-bg.jpg");  /* <-- esta ruta es relativa a assets/css/style.css */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* =========================================
   CONTRASTE GLOBAL SOBRE FONDO CON IMAGEN
   ========================================= */

/* Texto base sobre fondo */
body,
.app-main{
  color: #e5e7eb; /* gris muy claro */
}

/* Títulos principales */
h1, h2, h3, h4{
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* Subtítulos / textos secundarios */
label,
small{
  color: #cbd5e1;
}

/* Enlaces generales */
a{
  color: #60a5fa;
}
a:hover{
  color: #93c5fd;
}

/* =========================================
   TARJETAS / PANELES BLANCOS
   ========================================= */

.card,
.panel,
.grid-two > div,
table,
form{
  background: rgba(255,255,255,0.96);
  color: #111827;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* Texto dentro de tarjetas */
.card h1,
.card h2,
.card h3,
.panel h2,
.panel h3,
table,
table th,
table td,
form label{
  color: #111827;
  text-shadow: none;
}

/* =========================================
   NAVBAR
   ========================================= */

.navbar{
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
}

.navbar a,
.navbar span{
  color: #111827;
  font-weight: 500;
}

.navbar a:hover{
  color: #2563eb;
}

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

.btn-primary{
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color: #fff;
  border: none;
}

.btn-secondary{
  background: #f1f5f9;
  color: #111827;
  border: 1px solid #cbd5e1;
}

/* =========================================
   INPUTS / SELECTS
   ========================================= */

input,
select,
textarea{
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
}

input::placeholder,
textarea::placeholder{
  color: #9ca3af;
}

/* =========================================
   DASHBOARD TARJETAS CONTADOR
   ========================================= */

.dashboard-cards .card{
  background: rgba(255,255,255,0.98);
}

.dashboard-cards .card h3{
  color: #111827;
}

.dashboard-cards .card span{
  color: #374151;
}
/* =========================================================
   THEME CORPORATIVO + MODERNO (SaaS)
   Pegar al FINAL de assets/css/style.css
   ========================================================= */

:root{
  --brand-1:#2563eb;   /* azul corporativo */
  --brand-2:#0ea5e9;   /* cian moderno */
  --text-on-bg:#eef2ff;
  --muted-on-bg:#cbd5e1;

  --card:#ffffff;
  --cardText:#0f172a;
  --cardMuted:#475569;

  --border:#e5e7eb;
  --shadow: 0 14px 38px rgba(2,6,23,.22);
}

/* Fondo con imagen: legible + moderno */
body{
  color: var(--text-on-bg);
}

/* Títulos sobre fondo */
h1,h2,h3{
  color:#fff;
  letter-spacing:-.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Texto secundario sobre fondo */
label, small, .muted{
  color: var(--muted-on-bg);
}

/* Navbar estilo “glass” corporativo */
.navbar{
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}
.navbar a, .navbar span{
  color:#0f172a;
  font-weight: 600;
}
.navbar a{
  position: relative;
  padding: 10px 8px;
  border-radius: 10px;
}
.navbar a:hover{
  color:#0f172a;
  background: rgba(37,99,235,.10);
}

/* Contenedores / “cards” limpios y modernos */
.card,
.panel,
.grid-two > div,
table,
form{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--cardText);
}

/* Asegurar texto oscuro dentro de tarjetas */
.card *, .panel *, form *, table *{
  color: inherit;
  text-shadow: none;
}
.card h1,.card h2,.card h3,
.panel h1,.panel h2,.panel h3{
  color: var(--cardText);
}

/* Inputs y selects tipo “app moderna” */
input, select, textarea{
  background: #fff;
  color: var(--cardText);
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

/* Botón primario corporativo */
.btn-primary{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff !important;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 10px 18px rgba(37,99,235,.25);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(37,99,235,.32);
}

/* Botón secundario moderno */
.btn-secondary{
  background: rgba(241,245,249,.95);
  color: #0f172a !important;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 12px;
  padding: 10px 14px;
}
.btn-secondary:hover{
  background: rgba(226,232,240,.95);
}

/* Links dentro de tablas y acciones (más corporate) */
table a{
  color: var(--brand-1);
  font-weight: 600;
}
table a:hover{
  color: #1d4ed8;
  text-decoration: underline;
}

/* Tablas más “SaaS” */
.table{
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th{
  background: rgba(248,250,252,.95);
  color:#0f172a;
  font-weight: 700;
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.table tbody tr:hover td{
  background: rgba(37,99,235,.06);
}

/* Si tu dashboard tiene cards (por si acaso) */
.dashboard-cards .card{
  background: rgba(255,255,255,.98);
}
.dashboard-cards .card h3{
  color:#0f172a;
}
.dashboard-cards .card span{
  color:#334155;
}
/* =========================================================
   PATCH DASHBOARD: texto visible + quitar fondo gris detrás
   (PEGAR AL FINAL del style.css)
========================================================= */

/* 1) Quitar el panel “gigante” (culpable: .app-main > div) */
.app-main > div{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2) Textos “Bienvenido / Empresa” (suelen ser <p> directos) */
.app-main > p{
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
  font-weight: 500;
  margin-top: 6px;
}
.app-main > p strong{
  color:#ffffff !important;
  font-weight: 700;
}

/* 3) Ajuste visual de los cuadros del dashboard */
.cards-grid{
  margin-top: 18px;
}

.cards-grid .card{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 35px rgba(2,6,23,.18) !important;
  padding: 16px 16px !important;
}

/* Si el título dentro de la card es h3 (como “Clientes”) */
.cards-grid .card h3{
  margin: 0 0 10px 0 !important;
  font-size: 1.05rem !important;
  color:#0f172a !important;
}

/* El número (30, 38, 109, 515) suele ser un span o p */
.cards-grid .card span,
.cards-grid .card p{
  margin: 0 !important;
  color:#334155 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  text-shadow: none !important;
}
/* =========================================================
   CLIENTES (clients.php) – ajustes visuales
   Pegar al FINAL de assets/css/style.css
========================================================= */

/* 1) En páginas internas: títulos dentro de panel BLANCO en oscuro */
.grid-two > div h2,
.grid-two > div h3,
.grid-two > div .section-title{
  color:#0f172a !important;
  text-shadow:none !important;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 12px 0;
}

/* Si tus títulos son <h2> sueltos dentro del panel */
.grid-two > div > h2{
  padding:14px 16px 10px 16px;
  border-bottom:1px solid rgba(226,232,240,.9);
  background: linear-gradient(to bottom, rgba(248,250,252,.95), rgba(255,255,255,.95));
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

/* 2) Paneles de la grid: padding interior consistente */
.grid-two > div{
  padding:16px !important;
}

/* 3) Formularios: mejor espaciado y labels más “pro” */
.grid-two form label{
  font-size:.82rem !important;
  font-weight:700 !important;
  color:#475569 !important;
  margin:10px 0 6px 0 !important;
}

.grid-two form input,
.grid-two form select,
.grid-two form textarea{
  margin-bottom:10px !important;
}

/* 4) Botón Guardar: que no quede “pegado abajo” raro */
.grid-two form .btn-primary{
  margin-top:10px !important;
}

/* 5) Tabla: cabecera más definida y acciones alineadas */
.grid-two .table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}

.grid-two .table td:last-child,
.grid-two .table th:last-child{
  text-align:right;
  white-space:nowrap;
}

/* 6) Enlaces Editar/Borrar más compactos */
.grid-two .table td a{
  display:inline-block;
  margin-left:10px;
}
/* =====================================================
   FONDO TRANSPARENTE REAL (deja ver la imagen)
===================================================== */

html,
body,
.app-body,
.app-main{
  background: transparent !important;
}
/* =====================================================
   PANELES FLOTANTES BLANCOS (formularios y tablas)
===================================================== */

.card,
.panel,
.grid-two > div,
form,
table{
  background: rgba(255,255,255,0.96) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px rgba(2,6,23,.25) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
}
/* =====================================================
   TÍTULOS SOBRE FONDO CON IMAGEN
===================================================== */

.app-main > h1,
.app-main > h2{
  color:#ffffff !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.55);
  font-weight: 800;
  letter-spacing:-.02em;
}
/* =====================================================
   TÍTULOS DENTRO DE PANELES
===================================================== */

.grid-two > div h2,
.grid-two > div h3{
  color:#0f172a !important;
  text-shadow:none !important;
  font-weight:800;
  margin-bottom:12px;
}
/* ===================================================
   FIX FINAL: eliminar fondo gris y dejar imagen visible
   (Clientes, Proveedores, Productos, etc.)
=================================================== */

/* Eliminar cualquier fondo intermedio */
.app-main{
  background: transparent !important;
}

/* Evitar capas grises heredadas */
.grid-two{
  background: transparent !important;
}

/* Asegurar que SOLO los paneles sean blancos */
.grid-two > div{
  background: rgba(255,255,255,0.96) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
}
/* ===================================================
   FIX REAL: quitar el gris (var(--bg)) y dejar ver la imagen
=================================================== */

/* 1) Anular el fondo claro global */
html, body{
  background: transparent !important;
}

/* 2) El gris suele venir de aquí */
.app-body{
  background: transparent !important;
}

/* 3) Y a veces también de aquí */
.app-main,
.grid-two{
  background: transparent !important;
}

/* 4) Mantener paneles blancos (formularios / listados) */
.grid-two > div,
.card,
.panel,
.box,
form,
.table{
  background: rgba(255,255,255,0.96) !important;
}
/* ===================================================
   CLIENTES (y todas las pantallas con grid-two):
   Quitar el “panel blanco” gigante de la columna
=================================================== */

/* 1) La columna (contenedor) NO debe tener fondo */
.grid-two > div{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) El panel blanco se lo damos SOLO al contenido real */
.grid-two form,
.grid-two .table{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 38px rgba(2,6,23,.22) !important;
}

/* 3) Padding interno del formulario (para que no quede “pegado”) */
.grid-two form{
  padding: 18px !important;
}

/* 4) Títulos de la columna sobre el fondo con imagen (legibles) */
.grid-two > div > h2,
.grid-two > div > h1{
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
  margin: 0 0 12px 0 !important;
}
/* =====================================================
   CLIENTES – CABECERAS AZUL ACRISTALADAS
===================================================== */

/* Contenedor del título (la franja superior) */
.grid-two form > h2,
.grid-two .table-wrapper > h2,
.grid-two .table-container > h2,
.grid-two h2{
  background: linear-gradient(
    135deg,
    rgba(37,99,235,0.85),
    rgba(14,165,233,0.85)
  );
  color: #ffffff !important;
  padding: 12px 18px;
  margin: -18px -18px 16px -18px; /* se integra con la card */
  border-radius: 16px 16px 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .2px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.25);
}
/* Quitar efecto raro en el borde superior */
.grid-two form,
.grid-two .table{
  overflow: hidden; /* clave */
}
/* Eliminar sensación de “columna gris” entre paneles */
.grid-two{
  gap: 20px;
  background: transparent !important;
}
/* Sombra más limpia y profesional */
.grid-two form,
.grid-two .table{
  box-shadow: 0 10px 24px rgba(2,6,23,.18) !important;
}
/* =====================================================
   CLIENTES – CABECERAS GLASS AZUL (FIX REAL)
   ===================================================== */

/* Asegura que el panel recorte y la franja quede integrada */
.grid-two > div{
  overflow: hidden !important;
  border-radius: 16px !important;
}

/* Títulos de panel: “Nuevo cliente” / “Listado de clientes” */
.grid-two > div > h2{
  display:block !important;
  margin: 0 !important;
  padding: 12px 16px !important;

  background: linear-gradient(
    135deg,
    rgba(37,99,235,.88),
    rgba(14,165,233,.82)
  ) !important;

  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border-bottom: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.20) !important;
}

/* Deja el contenido separado del header */
.grid-two > div > h2 + *{
  margin-top: 12px !important;
}
/* =========================================
   CLIENTES – FRANJAS AZULES UNIFICADAS
   (solo cabeceras internas y separadores)
   ========================================= */

/* Cabeceras tipo "Nuevo cliente" y "Listado de clientes" */
.card > h2,
.card > h3,
.panel > h2,
.panel > h3{
  background: linear-gradient(
    90deg,
    #1e3a8a,
    #2563eb,
    #0ea5e9
  );
  color: #ffffff !important;
  padding: 10px 14px;
  margin: -14px -14px 14px -14px;
  border-radius: 14px 14px 0 0;
  font-weight: 600;
}

/* Línea azul bajo cabeceras de formulario */
.card hr,
.panel hr{
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    #2563eb,
    #0ea5e9
  );
  margin: 0 0 12px 0;
}

/* Cabecera de tabla (Nombre, CIF/NIF, etc.) */
.table thead th{
  background: linear-gradient(
    90deg,
    #1e3a8a,
    #2563eb,
    #0ea5e9
  ) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: none !important;
}

/* Separadores horizontales del formulario */
.card label{
  border-top: 1px solid rgba(37,99,235,0.25);
  padding-top: 6px;
}
/* =========================================
   CLIENTES – SEPARADORES AZULES (FORMULARIO)
   Solo las líneas bajo los campos
   ========================================= */

/* Quitar el gris actual */
.card label{
  border-top: none !important;
}

/* Línea azul bajo cada campo */
.card input,
.card select,
.card textarea{
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(
    90deg,
    #1e3a8a,
    #2563eb,
    #0ea5e9
  );
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
/* =========================================================
   FIX TABLAS (Cuentas venta + Facturas)
   - misma estética que Clientes: cabecera azul + bordes redondeados
   - sin tocar nada de lógica
========================================================= */

/* Que las tablas sean “tarjeta” (redondeo real + sombra) */
.table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;

  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 38px rgba(2,6,23,.22) !important;
}

/* Cabecera azul “acristalada” */
.table thead th{
  background: linear-gradient(90deg,
    rgba(37,99,235,.95),
    rgba(14,165,233,.85)
  ) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255,255,255,.25) !important;
}

/* Redondeo en esquinas de la cabecera */
.table thead th:first-child{ border-top-left-radius: 14px !important; }
.table thead th:last-child{  border-top-right-radius:14px !important; }

/* Cuerpo legible */
.table tbody td{
  color: #0f172a !important;
  border-bottom: 1px solid rgba(226,232,240,.75) !important;
}

/* Rayado suave + hover */
.table tbody tr:nth-child(even) td{
  background: rgba(248,250,252,.70) !important;
}
.table tbody tr:hover td{
  background: rgba(37,99,235,.08) !important;
}

/* (Opcional pero recomendado) formularios sueltos arriba en esas páginas (filtros) */
.app-main > form{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: 0 14px 38px rgba(2,6,23,.18) !important;
  margin-bottom: 12px !important;
}
/* =========================================================
   FIX FACTURAS: que el TOTAL y los totales SIEMPRE se vean
   + dejar tablas más “sólidas” (menos transparencia)
   ========================================================= */

/* 1) Tablas: un pelín más opacas para que NO se vea la imagen detrás */
.table{
  background: rgba(255,255,255,0.985) !important;
}

/* 2) Cabecera de tabla: mismo azul “glass” que te gusta */
.table thead th{
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(14,165,233,.90)) !important;
  color:#fff !important;
  border-bottom: 1px solid rgba(255,255,255,.25) !important;
}

/* Bordes redondeados arriba de la cabecera */
.table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.table thead th:first-child{ border-top-left-radius:16px !important; }
.table thead th:last-child{ border-top-right-radius:16px !important; }

/* 3) FACTURAS: Totales (footer/tfoot) en oscuro sobre blanco */
.invoice-page tfoot td,
.invoice-page tfoot th{
  background:#fff !important;
  color:#0f172a !important;
  font-weight:700 !important;
}

/* Por si el “Total” está en un bloque aparte (nombres típicos) */
.invoice-total,
.invoice-totals,
.invoice-summary,
.totals,
.total-box,
.invoice-footer{
  background:#fff !important;
  color:#0f172a !important;
}

/* Links dentro de factura, que no “desaparezcan” */
.invoice-page a{ color:#2563eb !important; }
/* =========================================================
   FIX: Cuentas de venta + Facturas (tablas y total)
   Pegar AL FINAL del style.css
========================================================= */

/* 1) Asegura que CUALQUIER tabla (aunque no tenga class="table")
      se vea como “panel” blanco y con cabecera azul */
.app-main table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;

  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(226,232,240,.95) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 12px 28px rgba(2,6,23,.18) !important;
}

.app-main table th,
.app-main table td{
  padding:8px 10px !important;
  border-bottom:1px solid rgba(226,232,240,.75) !important;
  font-size:.85rem !important;
  color:#0f172a !important;
  background:transparent !important;
}

/* Cabecera azul tipo “Clientes” */
.app-main table thead th{
  background:linear-gradient(90deg,#1d4ed8,#0ea5e9) !important;
  color:#ffffff !important;
  font-weight:700 !important;
  border-bottom:0 !important;
}

.app-main table tbody tr:hover td{
  background:rgba(37,99,235,.06) !important;
}

/* 2) Total facturado (que se lea sobre el fondo) */
.app-main .total-facturado,
.app-main .invoice-total,
.app-main .total-line{
  color:#ffffff !important;
  font-weight:800 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}

/* Si el “Total:” está en un <p> suelto sin clase, lo forzamos igual */
.app-main > p:last-of-type,
.app-main > div:last-of-type{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}
/* =========================================================
   PDF / PRINT RESET (dejar los PDFs limpios y profesionales)
   Pegar al FINAL del style.css
========================================================= */
@media print {

  /* márgenes del PDF */
  @page { margin: 12mm; }

  /* quitar fondo con imagen + overlay */
  html, body {
    background: #fff !important;
    color: #111827 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body::before { content: none !important; display: none !important; }

  /* ocultar navegación/botones */
  .sidebar, .topbar, .menu, .navbar, header, nav,
  .btn-print, .print-button, #btnPrint, #print,
  [onclick*="window.print"], .acciones-pedido, .print-options {
    display: none !important;
    visibility: hidden !important;
  }

  /* el contenido a ancho completo */
  .app-body, .app-main, .content-wrapper, .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: #fff !important;
  }

  /* quitar “estilo app” (sombras, bordes redondeados, transparencias) */
  .card, .panel, .box, table, form {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* documentos (pedido/factura/cuenta venta) totalmente blancos */
  .doc-page, .invoice-page {
    background: #fff !important;
    color: #111827 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .doc-page *, .invoice-page * {
    color: #111827 !important;
    text-shadow: none !important;
    background: transparent !important;
  }

  /* tablas en PDF: clásicas, legibles */
  .table, .doc-table, .invoice-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .table th, .doc-table th, .invoice-table th {
    background: #f3f4f6 !important;   /* adiós azul/degradados */
    color: #111827 !important;
    border-bottom: 1px solid #d1d5db !important;
  }
  .table td, .doc-table td, .invoice-table td {
    border-bottom: 1px solid #e5e7eb !important;
  }

  /* enlaces en PDF: negros (más “serio”) */
  a { color: #111827 !important; text-decoration: none !important; }
}

/* =========================================================
   NAVBAR AZUL (igual al estilo de las cabeceras azules)
   Pegar al FINAL del style.css
   ========================================================= */

.navbar{
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 25px rgba(2,6,23,.25) !important;
}

/* Links y textos en blanco */
.navbar a,
.navbar span,
.navbar .navbar-brand{
  color:#ffffff !important;
  font-weight:600 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Hover más “corporativo” */
.navbar a{
  border-radius:10px;
  padding:8px 10px;
}
.navbar a:hover{
  background: rgba(255,255,255,.14) !important;
  text-decoration:none !important;
}

/* Logo/brand alineado */
.navbar-brand{
  gap:8px;
}
/* =========================================================
   NAVBAR – HOVER LIMPIO Y CORPORATIVO
   ========================================================= */

/* Estado normal */
.navbar a{
  background: transparent !important;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Hover correcto (sin manchas raras) */
.navbar a:hover{
  background: rgba(255,255,255,0.18) !important;  /* glass suave */
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  text-decoration: none !important;
}

/* Quitar cualquier efecto heredado raro */
.navbar a::before,
.navbar a::after{
  display:none !important;
  content:none !important;
}

/* Evita fondos blancos heredados */
.navbar .navbar-center a:hover,
.navbar .navbar-left a:hover,
.navbar .navbar-right a:hover{
  background: rgba(255,255,255,0.18) !important;
}

.dashboard-stats{
  margin-top: 40px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37,99,235,.85), rgba(14,165,233,.85));
  box-shadow: 0 20px 40px rgba(2,6,23,.35);
  backdrop-filter: blur(6px);
}

.stats-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  margin-bottom:16px;
}

.stats-header h2{
  margin:0;
  font-size:1.4rem;
}

.stats-filter select{
  background: rgba(255,255,255,.95);
  border-radius:10px;
  padding:6px 12px;
  border:none;
  font-weight:600;
}
/* FIX: inputs del login no deben salirse del panel */
.login-card,
.login-box,
.auth-card,
.card-login {
  overflow: hidden;           /* recorta cualquier desborde */
}

/* Asegura que inputs ocupen el ancho del contenedor (sin pasarse) */
.login-card input,
.login-box input,
.auth-card input,
.card-login input,
.login-card select,
.login-box select,
.auth-card select,
.card-login select,
.login-card textarea,
.login-box textarea,
.auth-card textarea,
.card-login textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;     /* incluye padding y borde dentro del 100% */
  display: block;
}

/* Si tu formulario tiene padding raro, esto lo normaliza un poco */
.login-card form,
.login-box form,
.auth-card form,
.card-login form {
  padding-right: 0;
}
/* ===== LOGIN FIX DEFINITIVO ===== */

.login-card form label {
  display: block;
  margin-bottom: 12px;     /* separa el texto del input */
  font-size: 24px;
}

.login-card form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;    /* separa cada campo */
  padding: 10px 14px;
  border-radius: 10px;
}
/* Dashboard chart */
.dashboard-chart{
  margin-top: 26px;
  background: transparent; /* importante */
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 16px;
}

.dashboard-chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.dashboard-chart-head h2{
  margin:0;
}

.dashboard-chart-filter{
  display:flex;
  align-items:center;
  gap:10px;
}

.dashboard-chart-canvas{
  height: 320px;           /* tamaño visible */
  background: transparent;  /* importante */
}

.dashboard-chart-canvas canvas{
  background: transparent !important; /* importante */
}
/* ===== SELECT AÑO COMO BOTÓN DESTACADO ===== */

.dashboard-chart-filter {
  position: relative;
}

/* Select con aspecto de botón */
.dashboard-chart-filter select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #ffffff;

  border: none;
  border-radius: 14px;

  padding: 12px 46px 12px 18px;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
  outline: none;

  /* SOMBRAS POTENTES */
  box-shadow:
    0 10px 25px rgba(37,99,235,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transition: all 0.18s ease;
}

/* Flecha */
.dashboard-chart-filter::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #e0e7ff;
  font-size: 15px;
  pointer-events: none;
}

/* Hover: sube y brilla */
.dashboard-chart-filter select:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px rgba(37,99,235,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Active: efecto botón presionado */
.dashboard-chart-filter select:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 16px rgba(37,99,235,0.35),
    inset 0 2px 6px rgba(0,0,0,0.25);
}

/* Focus accesible */
.dashboard-chart-filter select:focus {
  box-shadow:
    0 0 0 3px rgba(96,165,250,0.6),
    0 10px 25px rgba(37,99,235,0.45);
}
/* ===== SELECT AÑO estilo glossy azul profundo (B) ===== */

.dashboard-chart-filter select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  min-width: 150px;
  padding: 12px 44px 12px 56px;
  font-weight: 800;
  font-size: 14px;

  color: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);

  /* Capas glossy */
  background-image:
    /* línea vertical izquierda */
    linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0.10)),
    /* brillo superior */
    linear-gradient(to bottom, rgba(255,255,255,0.40), rgba(255,255,255,0.06)),
    /* base azul profundo */
    linear-gradient(to bottom,
      #2563eb 0%,
 	  #1d4ed8 40%,
	  #1e40af 75%,
  	  #0b2a6f 100%
    );

  background-size:
    1px 100%,
    100% 55%,
    100% 100%;
  background-position:
    46px 0,
    0 0,
    0 0;
  background-repeat: no-repeat;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -14px 20px rgba(0,0,0,0.35);

  cursor: pointer;
  outline: none;
}

/* Flecha */
.dashboard-chart-filter{
  position: relative;
}
.dashboard-chart-filter::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0e7ff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Hover */
.dashboard-chart-filter select:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -16px 22px rgba(0,0,0,0.40);
}

/* Active */
.dashboard-chart-filter select:active{
  transform: translateY(1px);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.40),
    inset 0 3px 12px rgba(0,0,0,0.45);
}

/* Focus */
.dashboard-chart-filter select:focus{
  box-shadow:
    0 0 0 3px rgba(59,130,246,0.55),
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -14px 20px rgba(0,0,0,0.35);
}
/* Ocultar el texto "Año" (label) */
.dashboard-chart-filter label { 
  display: none !important; 
}

/* Quitar cualquier estilo raro del contenedor del filtro */
.dashboard-chart-filter {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* ===== FORZAR COLOR AZUL INTENSO BOTÓN AÑO ===== */

.dashboard-chart-filter select{
  /* forzamos el fondo completo */
  background-image:
    linear-gradient(to bottom,
      #003cff 0%,
      #1d4ed8 35%,
      #1e40af 70%,
      #0b2a6f 100%
    ) !important;

  /* quitamos cualquier otra capa previa */
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;

  color: #ffffff !important;
}
/* ===== Dropdown de años: que se vea siempre el texto ===== */

/* El desplegable (options) */
.dashboard-chart-filter select option {
  color: #0b1220 !important;      /* texto oscuro */
  background: #ffffff !important; /* fondo blanco */
  font-weight: 700;
}

/* En algunos navegadores ayuda también esto */
.dashboard-chart-filter select optgroup {
  color: #0b1220 !important;
  background: #ffffff !important;
}
/* ===== Desplegable de años legible ===== */

/* El botón (select cerrado) sigue blanco */
.dashboard-chart-filter select{
  color: #fff !important;
}

/* El menú desplegable (opciones) en fondo blanco y texto oscuro */
.dashboard-chart-filter select option{
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Opcional: cuando está seleccionado, que destaque un poco (no todos los navegadores lo respetan) */
.dashboard-chart-filter select option:checked{
  background: #e5efff !important;
  color: #0f172a !important;
}
/* ================================
   FACTURA: SELECT ESTADO (FORZADO)
   ================================ */

/* el select de estado en la vista de factura */
.invoice-page .invoice-actions form select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  padding: 10px 44px 10px 18px !important;
  font-weight: 800 !important;
  font-size: 13px !important;

  color: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: 0 0, 0 0, right 14px center !important;
  background-size: 100% 55%, 100% 100%, 12px 12px !important;

  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.40), rgba(255,255,255,0.06)) ,
    linear-gradient(to bottom, #2563eb 0%, #1d4ed8 40%, #1e40af 75%, #0b2a6f 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0e7ff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
  !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -14px 20px rgba(0,0,0,0.35)
  !important;

  cursor: pointer !important;
  outline: none !important;
  transform: translateZ(0); /* evita glitches */
}

/* dropdown legible */
.invoice-page .invoice-actions form select option{
  color: #0b1220 !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}

/* hover/active */
.invoice-page .invoice-page .invoice-actions form select:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -16px 22px rgba(0,0,0,0.40)
  !important;
}
.invoice-page .invoice-actions form select:active{
  transform: translateY(1px) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.40),
    inset 0 3px 12px rgba(0,0,0,0.45)
  !important;
}
/* ===== FACTURA: ocultar texto "Estado actual: ..." ===== */

.invoice-page .invoice-actions span {
  display: none !important;
}

.years-compare{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.year-chip{
  cursor:pointer;
  user-select:none;
}

.year-chip input{
  display:none;
}

.year-chip span{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(to bottom, #2563eb 0%, #1d4ed8 40%, #1e40af 75%, #0b2a6f 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.35);
}

.year-chip input:checked + span{
  box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(-1px);
}
.years-list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.year-chip{
  cursor:pointer;
  user-select:none;
}

.year-chip input{
  display:none;
}

.year-chip span{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.year-chip input:checked + span{
  background: linear-gradient(to bottom, #2563eb 0%, #1d4ed8 40%, #1e40af 75%, #0b2a6f 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.years-list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.year-chip{
  cursor:pointer;
  user-select:none;
}

.year-chip{
  position: relative;
}

.year-chip input{
  position: absolute;
  opacity: 0;      /* invisible */
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
  pointer-events: none; /* el click lo recibe el label */
}

.year-chip span{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.year-chip input:checked + span{
  background: linear-gradient(to bottom, #2563eb 0%, #1d4ed8 40%, #1e40af 75%, #0b2a6f 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
/* ===== FIX: mostrar listado de años (labels) y quitar flecha antigua ===== */

/* 1) Quitar la flecha que era para el select */
.dashboard-chart-filter::after{
  content: none !important;
}

/* 2) Volver a mostrar los labels (porque ahora los años son label) */
.dashboard-chart-filter label{
  display: inline-flex !important;
}

/* 3) Si todavía existe algún label antiguo "Año" con for="year", ese sí lo ocultamos */
.dashboard-chart-filter label[for="year"]{
  display: none !important;
}

/* 4) Asegurar que el contenedor del listado se ve */
.dashboard-chart-filter .years-list{
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
/* ===== NAVBAR responsive: sin saltos de línea y con scroll horizontal ===== */

/* Contenedor del menú (usa varios selectores por si tu navbar tiene otro nombre) */
.navbar, .topbar, .top-nav, .app-navbar, header nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;     /* no rompe a otra línea */
  overflow-x: auto;                 /* si no cabe, scroll horizontal */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Links del menú */
.navbar a, .topbar a, .top-nav a, .app-navbar a, header nav a {
  white-space: nowrap !important;   /* evita “Cuentas↵venta” */
  flex: 0 0 auto;
  font-size: clamp(13px, 1.05vw, 18px);  /* se adapta a pantalla */
}

/* Opcional: que el scroll no se vea feo */
.navbar::-webkit-scrollbar,
.topbar::-webkit-scrollbar,
.top-nav::-webkit-scrollbar,
.app-navbar::-webkit-scrollbar,
header nav::-webkit-scrollbar {
  height: 6px;
}
.navbar::-webkit-scrollbar-thumb,
.topbar::-webkit-scrollbar-thumb,
.top-nav::-webkit-scrollbar-thumb,
.app-navbar::-webkit-scrollbar-thumb,
header nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
}

/* =========================================================
   FIX MEJORA INCORPORADA: NAVBAR a ancho monitor (100%)
   (sin ocultar overflow-x global para no “cortar” el menú)
   ========================================================= */
.app-navbar,
.navbar,
header {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* Evita que algún elemento interno “empuje” el ancho */
.app-navbar *,
.navbar *,
header * {
  box-sizing: border-box !important;
}

/* Si algún contenedor mete padding/margen raro, que no cree scroll en la página */
html, body {
  max-width: 100%;
}

/* ===========================
   FIX VISUALES DATOS COMERCIALES
   =========================== */

/* Texto del detalle en blanco */
.detail-actions h2,
.detail-actions h2 span,
.detail-actions a {
    color: #ffffff !important;
}

/* Botón Volver */
.detail-actions .btn {
    background: #1e40af;
    color: #fff !important;
}

/* Ocultar producto exacto (no se elimina lógica) */
.hide-product-exact {
    display: none !important;
}

/* Botones Filtrar / Limpiar bien alineados */
.actions-row {
    margin-top: 16px;
    justify-content: flex-start;
}

/* =========================================================
   ✅ NAVBAR ABFRUIT (FINAL) — TRANSPARENTE + BOTONES REDONDOS
   (este bloque se queda AL FINAL para que gane a todo)
   ========================================================= */

/* Header azul MUY translúcido (más transparente aún) */
.navbar.navbar-translucent{
  background: rgba(13, 110, 253, 0.30) !important;  /* ⬅ más transparente */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 10px 25px rgba(2,6,23,0.18) !important;
}

/* Altura/padding limpio */
.navbar{
  padding: 10px 18px !important;
}

/* Centro en formato botones */
.navbar-center.navbar-buttons{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Botones (Clientes, Proveedores, etc.) MUY redondos */
.navbar-center.navbar-buttons a.nav-btn{
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;

  padding: 9px 18px !important;     /* ⬅ más “pill” */
  border-radius: 9999px !important; /* ⬅ súper redondo */

  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

/* Hover (sin subrayado) */
.navbar-center.navbar-buttons a.nav-btn:hover{
  background: rgba(255,255,255,0.30) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22) !important;
}

/* Activo */
.navbar-center.navbar-buttons a.nav-btn.is-active{
  background: rgba(255,255,255,0.95) !important;
  color: #0b5ed7 !important;
  font-weight: 800 !important;
}

/* Usuario y salir */
.navbar-right .nav-btn{
  background: rgba(255,255,255,0.18) !important;
  border-radius: 9999px !important;
  padding: 9px 14px !important;
  text-decoration: none !important;
}

/* Salir en rojo suave */
.navbar-right .nav-btn.logout{
  background: rgba(220,53,69,0.35) !important;
}
.navbar-right .nav-btn.logout:hover{
  background: rgba(220,53,69,0.55) !important;
  transform: translateY(-1px);
}

/* Asegurar que NUNCA subraye en hover por reglas antiguas */
.navbar .nav-btn:hover{
  text-decoration: none !important;
}

/* =========================================================
   NAVBAR ABFRUIT — FIJO EN 1 LÍNEA + SCROLL ELEGANTE
   (PEGAR AL FINAL del style.css)
========================================================= */

/* Barra “glass” MÁS transparente */
.navbar.navbar-translucent{
  background: rgba(13,110,253,0.22) !important;  /* más transparente */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.18) !important;
}

/* Layout: izquierda fija, derecha fija, centro con scroll */
.navbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999 !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  flex-wrap: nowrap !important;     /* NUNCA baja a 2ª línea */
  overflow: hidden !important;      /* el scroll va en el centro */
  padding: 10px 14px !important;
  height: 56px !important;
}

/* Para que el contenido no quede debajo del navbar */
.app-main{ margin-top: 70px !important; }

/* Izquierda y derecha NO se encogen */
.navbar-left,
.navbar-right{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Centro: ocupa lo que quede y hace scroll horizontal si no cabe */
.navbar-center.navbar-buttons{
  flex: 1 1 auto !important;
  min-width: 0 !important;          /* CLAVE para que el overflow funcione */
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;     /* NUNCA baja */
  gap: 8px !important;

  overflow-x: auto !important;      /* scroll horizontal elegante */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding: 2px 2px !important;
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

/* Scrollbar (Chrome/Edge) discreto */
.navbar-center.navbar-buttons::-webkit-scrollbar{ height: 6px; }
.navbar-center.navbar-buttons::-webkit-scrollbar-track{ background: transparent; }
.navbar-center.navbar-buttons::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.26);
  border-radius: 999px;
}

/* Botones redondeados estilo ABFRUIT */
.navbar-center.navbar-buttons a.nav-btn{
  flex: 0 0 auto !important;
  white-space: nowrap !important;

  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;

  padding: 7px 14px !important;
  border-radius: 999px !important; /* súper redondo */
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;

  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.navbar-center.navbar-buttons a.nav-btn:hover{
  background: rgba(255,255,255,0.26) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}

/* Activo */
.navbar-center.navbar-buttons a.nav-btn.is-active{
  background: rgba(255,255,255,0.95) !important;
  color: #0b5ed7 !important;
  font-weight: 700 !important;
}

/* Marca */
.navbar-brand{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.navbar-brand span{
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.30);
}
.navbar-logo{
  height: 32px !important;
  width: auto !important;
}

/* Derecha */
.navbar-user{
  color: rgba(255,255,255,0.95) !important;
  font-weight: 700 !important;
  margin-right: 10px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

/* Botón salir */
.navbar-right .nav-btn.logout{
  background: rgba(220,53,69,0.32) !important;
}
.navbar-right .nav-btn.logout:hover{
  background: rgba(220,53,69,0.52) !important;
}

/* En pantallas estrechas, reducimos un pelín padding para que quepa mejor */
@media (max-width: 1100px){
  .navbar{ padding: 8px 10px !important; }
  .navbar-center.navbar-buttons a.nav-btn{ padding: 7px 12px !important; font-size: 12.5px !important; }
}

/* En pantallas MUY estrechas: aún más compacto (pero siempre 1 línea + scroll) */
@media (max-width: 700px){
  .navbar{ height: 54px !important; }
  .navbar-brand span{ display: none !important; } /* deja solo logo si no cabe */
}