/* =====================================================
   GANOVIDA — Centro de Servicio Autorizado Patacamaya
   Estilos Globales (Pre-Pedidos) - Modern Executive Theme
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600&family=DM+Mono:wght@400;500;600&display=swap');

:root {
  /* Paleta Executive Emerald & Warm Gold DXN */
  --cafe:          #0B2B20;  /* Verde esmeralda profundo (Encabezados/Marca) */
  --cafe-medio:    #134E3B;  /* Verde esmeralda medio */
  --cafe-claro:    #1A664E;  /* Verde esmeralda acento */
  --dorado:        #D97706;  /* Ámbar / Dorado DXN */
  --dorado-claro:  #F59E0B;  /* Ámbar brillante */
  --dorado-hover:  #B45309;  /* Ámbar interactivo */
  --crema:         #F8FAFC;  /* Fondo de inputs */
  --crema-oscura:  #E2E8F0;  /* Bordes refinados */
  --verde-dxn:     #059669;  /* Verde esmeralda activo */
  --verde-medio:   #10B981;  /* Verde medio */
  --verde-claro:   #D1FAE5;  /* Fondo badge activo */
  --blanco:        #FFFFFF;
  --gris-suave:    #F1F5F9;  /* Lienzo principal */
  --gris:          #64748B;  /* Texto secundario */
  --gris-oscuro:   #334155;  /* Texto principal alternativo */
  --rojo:          #EF4444;  /* Rojo peligro */
  --rojo-oscuro:   #DC2626;
  --rojo-claro:    #FEE2E2;
  --azul:          #2563EB;
  --naranja:       #D97706;
  --sombra-sm:     0 1px 3px rgba(11, 43, 32, 0.05), 0 1px 2px rgba(11, 43, 32, 0.03);
  --sombra:        0 4px 16px -2px rgba(11, 43, 32, 0.06), 0 2px 6px -1px rgba(11, 43, 32, 0.04);
  --sombra-fuerte: 0 12px 32px -4px rgba(11, 43, 32, 0.12), 0 4px 12px -2px rgba(11, 43, 32, 0.06);
  --radio:         14px;
  --radio-grande:  20px;
  --anillo-foco:   0 0 0 3px rgba(217, 119, 6, 0.25), 0 0 0 1px var(--dorado);
}

* { box-sizing: border-box; }

html { background: var(--cafe); }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gris-suave);
  color: var(--cafe);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--cafe);
  letter-spacing: -0.02em;
}

/* ── FOCO VISIBLE ─────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── MENÚ LATERAL (js/menu.js) ───────────────────── */
:root { --menu-ancho: 68px; --menu-ancho-abierto: 220px; }
body.con-menu { padding-left: var(--menu-ancho); transition: padding-left 0.2s ease; }
body.con-menu.menu-expandido { padding-left: var(--menu-ancho-abierto); }

.sidemenu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: var(--menu-ancho); overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--cafe) 0%, var(--cafe-medio) 100%);
  color: white; box-shadow: 4px 0 20px rgba(11, 43, 32, 0.18);
  transition: width 0.2s ease, transform 0.25s ease;
}
.menu-expandido .sidemenu { width: var(--menu-ancho-abierto); }

.sidemenu-cabeza {
  display: flex; align-items: center; gap: 10px; min-height: 68px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidemenu-logo { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; background: white; border-radius: 10px; padding: 3px; }
.sidemenu-marca { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.sidemenu-marca strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.sidemenu-marca span { font-size: 11.5px; font-weight: 600; color: var(--dorado-claro); }

.sidemenu-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 0; overflow-y: auto; overflow-x: hidden; }
.sidemenu-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; letter-spacing: normal;
  width: calc(100% - 20px); margin: 0 10px; padding: 11px 13px; min-height: 44px;
  border: none; border-radius: 10px; background: none; box-shadow: none;
  color: rgba(255, 255, 255, 0.82); font-family: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidemenu-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.sidemenu-item:hover { background: rgba(255, 255, 255, 0.1); color: white; transform: none; box-shadow: none; }
.sidemenu-item.activo { background: rgba(255, 255, 255, 0.16); color: white; box-shadow: inset 3px 0 0 var(--dorado-claro); }
.sidemenu-item.salir { color: #FCA5A5; }
.sidemenu-item.salir:hover { background: rgba(239, 68, 68, 0.2); color: #FEE2E2; }
.sidemenu-item.sidemenu-toggle { color: rgba(255, 255, 255, 0.6); }

.sidemenu-pie { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sidemenu-usuario { display: flex; align-items: center; gap: 14px; padding: 8px 23px; white-space: nowrap; color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 700; }
.sidemenu-usuario svg { width: 22px; height: 22px; flex-shrink: 0; }
.sidemenu-usuario span { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.sidemenu-usuario small { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }

/* Riel contraído: solo íconos (los nombres aparecen al pasar el mouse, por el title) */
.sidemenu-item span, .sidemenu-marca, .sidemenu-usuario span { transition: opacity 0.15s ease; }
body:not(.menu-expandido):not(.menu-abierto) .sidemenu .sidemenu-item span,
body:not(.menu-expandido):not(.menu-abierto) .sidemenu .sidemenu-marca,
body:not(.menu-expandido):not(.menu-abierto) .sidemenu .sidemenu-usuario span { opacity: 0; }

.menu-movil-bar, .sidemenu-fondo { display: none; }

/* Celular / tablet: barra fina arriba y menú que se desliza desde la izquierda */
@media (max-width: 900px) {
  body.con-menu, body.con-menu.menu-expandido { padding-left: 0; padding-top: 56px; }
  .menu-movil-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 150; padding: 0 12px;
    background: linear-gradient(135deg, var(--cafe) 0%, var(--cafe-medio) 100%);
    color: white; box-shadow: 0 2px 12px rgba(11, 43, 32, 0.25);
  }
  .menu-movil-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: none; color: white;
  }
  .menu-movil-btn:hover { transform: none; background: rgba(255, 255, 255, 0.2); }
  .menu-movil-btn svg { width: 22px; height: 22px; }
  .menu-movil-logo { height: 34px; width: auto; background: white; border-radius: 8px; padding: 2px; }
  .menu-movil-titulo { font-size: 16px; font-weight: 800; }

  .sidemenu, .menu-expandido .sidemenu { width: 260px; transform: translateX(-100%); }
  .menu-abierto .sidemenu { transform: none; }
  .menu-abierto .sidemenu-fondo { display: block; position: fixed; inset: 0; z-index: 190; background: rgba(6, 30, 22, 0.5); }
  .sidemenu-toggle { display: none !important; }
}

/* ── CONTAINER / CARD ───────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding: 28px 24px; }

.card {
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 26px; margin-bottom: 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: var(--sombra-fuerte);
}
.card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--cafe);
  margin: 0 0 20px; display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.02em;
}
.card-title i, .card-title svg {
  color: var(--dorado);
}

/* ── FORM ───────────────────────────────────────── */
label {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--cafe-claro); margin-bottom: 7px;
}
input, select, textarea {
  width: 100%; padding: 11px 14px; min-height: 44px;
  border: 1.5px solid var(--crema-oscura); border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; color: var(--cafe);
  background: var(--crema); transition: all 0.2s ease; outline: none;
  font-weight: 500;
}
input::placeholder { color: #94A3B8; font-weight: 400; }
input:focus, select:focus, textarea:focus {
  border-color: var(--dorado);
  box-shadow: var(--anillo-foco);
  background: white;
}
input[type="file"] { background: white; padding: 8px 10px; }

/* ── BUTTONS ─────────────────────────────────────── */
button {
  padding: 11px 20px; min-height: 44px; border: none; border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, var(--dorado), var(--dorado-claro));
  color: white; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -0.01em;
}
button:hover { transform: translateY(-1.5px); box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35); }
button:active { transform: translateY(0); }
button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-green   { background: linear-gradient(135deg, var(--cafe-claro), var(--verde-dxn)); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25); }
.btn-green:hover { box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35); }

.btn-danger, .logout { background: linear-gradient(135deg, var(--rojo-oscuro), var(--rojo)); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25); }
.btn-danger:hover, .logout:hover { box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35); }

.btn-outline { background: white; border: 1.5px solid var(--crema-oscura); color: var(--gris-oscuro); box-shadow: var(--sombra-sm); }
.btn-outline:hover { border-color: var(--dorado); color: var(--dorado-hover); background: #FFFBEB; transform: translateY(-1px); }

.btn-sm { padding: 8px 14px; font-size: 13px; min-height: 38px; border-radius: 8px; }
.btn-edit { background: linear-gradient(135deg, var(--cafe-medio), var(--cafe-claro)); box-shadow: 0 3px 10px rgba(19, 78, 59, 0.2); }
.btn-edit:hover { box-shadow: 0 5px 14px rgba(19, 78, 59, 0.3); }

/* ── TABLE ──────────────────────────────────────── */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  padding: 12px 16px; text-align: left;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gris); background: #F8FAFC;
  border-bottom: 1.5px solid var(--crema-oscura);
  font-weight: 700; white-space: nowrap;
}
th:first-child { border-top-left-radius: 10px; }
th:last-child { border-top-right-radius: 10px; }

td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid #F1F5F9; color: var(--cafe); font-weight: 500; }
tr:last-child td { border-bottom: none; }
tr { transition: background 0.15s ease; }
tr:hover td { background: #F8FAFC; }
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--crema-oscura); }

/* ── BADGES ─────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 700;
}
.badge-verde  { background: #D1FAE5; color: #047857; border: 1px solid #A7F3D0; }
.badge-gris   { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }
.badge-rojo   { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.badge-azul   { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Lucide Icons ────────────────────────────────── */
.lucide { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; flex-shrink: 0; }