/* =========================================================
   ERP — STYLE.CSS (LIMPIO + UNIFICADO)
   - Fondo imagen + overlay
   - Panels translúcidos (recupera transparencia)
   - Navbar: Brand grande, usuario pequeño a la derecha
   - Labels en BLANCO cuando están SOBRE FONDO (Pedidos, Clientes, Productos, etc.)
     y en OSCURO cuando están DENTRO de panel blanco (Datos comerciales, etc.)
   - Fix: textos superiores ya NO quedan tapados por la franja azul (navbar)
   - Mejora: navbar-center con más separación (textos menos juntos)
   - Limpieza: elimina CSS de .nav-left/.nav-right (ya no se usan en tu navbar.php)
   ========================================================= */

/* =========================
   BASE
   ========================= */
*{ box-sizing:border-box; }

:root{
  --nav-h: 64px;

  --bg-overlay: rgba(15,23,42,.55);

  /* ✅ RECUPERAR TRANSPARENCIA */
  --panel: rgba(255,255,255,.82);
  --panel-solid: rgba(255,255,255,.92);

  --text: #0f172a;
  --muted: #475569;

  --border: rgba(226,232,240,.65);
  --shadow: 0 14px 38px rgba(2,6,23,.22);

  --blue-1:#1d4ed8;
  --blue-2:#0ea5e9;

  --radius: 16px;
  --input-radius: 12px;
}

html, body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ffffff;
}

/* Fondo con imagen + overlay (la imagen está en assets/images/erp-bg.jpg) */
body{
  position:relative;
  min-height:100vh;

  /* ✅ FIX: que NINGUNA página quede tapada por la navbar */
  padding-top: var(--nav-h);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    url("../images/erp-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* Layout principal */
.app-body{
  display:flex;
  min-height:100vh;
}
.app-main{
  flex:1;
  padding: 20px;

  /* ✅ ya no hace falta margen porque ahora lo gestiona body padding-top */
  margin-top: 0;
}

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

/* =========================
   NAVBAR
   ========================= */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;

  display:flex;
  align-items:center;
  justify-content:space-between;

  height: var(--nav-h);
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 25px rgba(2,6,23,.25);
}

/* Contenedores del navbar (tu HTML usa .navbar-left .navbar-center .navbar-right) */
.navbar .navbar-left{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
  min-width: 0;
}
.navbar .navbar-center{
  display:flex;
  align-items:center;

  /* ✅ más aire horizontal (textos menos juntos) */
  gap: 16px;

  /* si no cabe, baja limpio */
  flex-wrap: wrap;

  /* que pueda encogerse sin romper */
  flex: 1 1 auto;
  min-width: 0;

  /* centrado visual */
  justify-content: center;
}
.navbar .navbar-right{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 12px;
}

/* Links */
.navbar a,
.navbar span{
  color:#fff;
  text-decoration:none;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* BRAND: “ERP Comercial” grande y a la izquierda */
.navbar .brand{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 6px 8px;
  border-radius: 10px;
}

/* Links del menú central */
.navbar .navbar-center > a{
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;         /* ✅ más alto visual */
  border-radius: 10px;
  white-space: nowrap;       /* evita saltos raros en palabras */
  line-height: 1.25;
}

/* ✅ Mantener marcado el enlace de la página actual (si usas class="active") */
.navbar a.active,
.navbar a.is-active{
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hover */
.navbar .navbar-center > a:hover,
.navbar .navbar-right > a:hover,
.navbar .navbar-left > a:hover{
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Usuario pequeño a la derecha */
.navbar .user{
  font-size: 12px;
  font-weight: 600;
  opacity: .95;
}
.navbar .logout{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
}

/* En pantallas estrechas: reducimos paddings y fuente */
@media (max-width: 1100px){
  :root{ --nav-h: 60px; }
  body{ padding-top: var(--nav-h); }
  .navbar{ height: var(--nav-h); padding: 8px 10px; }
  .navbar .brand{ font-size: 16px; }
  .navbar .navbar-center{ gap: 12px; }
  .navbar .navbar-center > a{ font-size: 12px; padding: 6px 8px; }
}

/* =========================
   ALERTS + BOTONES
   ========================= */
.alert{
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.alert-danger{ background:#7f1d1d; color:#fee2e2; }
.alert-success{ background:#14532d; color:#bbf7d0; }
.alert-warning{ background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }

.btn-primary, .btn-secondary{
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue-1), var(--blue-2));
  color:white;
  box-shadow: 0 10px 18px rgba(37,99,235,.25);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-secondary{
  background: rgba(255,255,255,.95);
  color: var(--text);
  border: 1px solid rgba(203,213,225,.9);
}
.btn-secondary:hover{ background: rgba(241,245,249,.95); }

/* =========================
   PANELES / CARDS / GRID
   ========================= */
.card,
.panel,
.box{
  /* ✅ Transparencia + “cristal” */
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  color: var(--text);
  margin-bottom: 12px;
}

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

/* =========================
   CABECERAS AZULES (como tus capturas)
   - Para h2 dentro de la grid
   ========================= */
.grid-two > div > h2{
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  color:#fff !important;
  padding: 10px 14px;
  margin: 0 0 12px 0;
  border-radius: 14px;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.30);
}

/* Cuando el h2 está dentro de una card/panel */
.card > h2,
.panel > h2{
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  color:#fff !important;
  padding: 10px 14px;
  margin: -14px -14px 14px -14px;
  border-radius: 14px 14px 0 0;
  font-weight: 800;
}

/* =========================
   FORMULARIOS
   ========================= */

/* ✅ Por defecto: labels BLANCOS (para formularios “sobre fondo”) */
label{
  font-size: .82rem;
  font-weight: 800;
  color: #ffffff;
  display:block;
  margin: 10px 0 6px 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* ✅ Dentro de paneles blancos: labels en oscuro */
.card label,
.panel label,
.box label{
  color: var(--muted);
  text-shadow: none;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
select,
textarea{
  width:100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--input-radius);
  border: 1px solid #dbe3ef;

  /* ✅ ligera transparencia para mantener el efecto */
  background: var(--panel-solid);
  color: var(--text);

  outline:none;
  transition: box-shadow .18s ease, border-color .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);
}
textarea{ min-height: 90px; }

/* =========================
   TABLAS
   ========================= */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;

  /* ✅ recuperar transparencia sin perder lectura */
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: .85rem;
}

.table th, .table td{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(226,232,240,.75);
}

.table thead th{
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  color:#fff;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.table tbody tr:nth-child(even) td{
  background: rgba(248,250,252,.55);
}
.table tbody tr:hover td{
  background: rgba(37,99,235,.08);
}

.table td:last-child,
.table th:last-child{
  text-align:right;
  white-space:nowrap;
}
.table a{
  color: var(--blue-1);
  font-weight: 700;
  text-decoration:none;
}
.table a:hover{ text-decoration:underline; }

/* =========================
   DASHBOARD (si lo usas)
   ========================= */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
  margin-top:16px;
}
.cards-grid .card{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   LOGIN
   ========================= */
.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding-top: 0; /* login no necesita offset de navbar */
}
.login-card{
  background: rgba(255,255,255,.90);
  padding:24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  width: 360px;
  overflow:hidden;
  color: var(--text);
}
.login-card h1{
  margin: 0 0 16px 0;
  font-size: 1.2rem;
  color: var(--text);
}
.login-card input{ box-sizing:border-box; }

/* =========================
   PRINT / PDF LIMPIO
   ========================= */
@media print{
  @page { margin: 12mm; }

  html, body{
    background:#fff !important;
    color:#111827 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding-top: 0 !important;
  }
  body::before{ content:none !important; display:none !important; }

  .navbar, header, nav,
  .btn-print, .print-button, #btnPrint, #print,
  [onclick*="window.print"]{
    display:none !important;
    visibility:hidden !important;
  }

  .app-main{ margin-top:0 !important; padding:0 !important; }
  .card, .panel, .box, form, table{
    background: transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .table{
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  .table thead th{
    background:#f3f4f6 !important;
    color:#111827 !important;
    border-bottom:1px solid #d1d5db !important;
  }
  .table td{
    border-bottom:1px solid #e5e7eb !important;
  }

  a{ color:#111827 !important; text-decoration:none !important; }
}