/* ==========================================================
   VARIABLES (Paleta Tailwind-like, pero sin Tailwind)
   ========================================================== */
:root{
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827;

  --blue-500:#3b82f6; --blue-600:#2563eb;
  --green-500:#22c55e; --green-600:#15803d;
  --red-500:#ef4444; --red-600:#b91c1c;

  --white:#fff; --black:#000;
  --radius-sm:4px; --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow:0 2px 6px rgba(0,0,0,.12);
  --shadow-lg:0 10px 15px rgba(0,0,0,.18);
}

/* ==========================================================
   RESET
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}

/* ==========================================================
   BODY GLOBAL
   ========================================================== */
body{
  font-family: Arial, sans-serif;
  background: var(--gray-100);
}

/* ==========================================================
   GRID (index principal)
   ========================================================== */
.botones-grid{
  width:90%;
  max-width:800px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:25px;
  margin-top:40px;
}

/* ==========================================================
   BOTONES PRINCIPALES (index.php)
   ========================================================== */
.btn{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  padding:16px;
  border-radius:var(--radius-lg);
  font-size:1.5rem;
  font-weight:700;
  cursor:pointer;
  border:0;
  text-decoration:none;
  transition:all .15s;
  user-select:none;
}

.btn:hover{filter:brightness(.95)}
.btn:active{filter:brightness(.90)}

.btn-azul{background:var(--blue-500);color:var(--white)}
.btn-azul:hover{background:var(--blue-600)}

.btn-verde{background:var(--green-500);color:var(--white)}
.btn-verde:hover{background:var(--green-600)}

.btn-rojo{background:var(--red-500);color:var(--white)}
.btn-rojo:hover{background:var(--red-600)}

.btn-gris{background:var(--gray-600);color:var(--white)}

/* Iconos */
.icon-xl{font-size:3rem}

/* ==========================================================
   ENCABEZADO GENERAL (todas las páginas)
   ========================================================== */
.encabezado{
  width:100%;
  border-collapse:collapse;
  background:var(--blue-600);
  color:var(--white);
  box-shadow:var(--shadow);
}
.encabezado td{
  padding:12px;
  font-size:20px;
  font-weight:700;
}
.encabezado-izquierda{text-align:left;width:33%}
.encabezado-centro{text-align:center;width:34%;letter-spacing:1px}
.encabezado-derecha{text-align:right;width:33%}

/* ==========================================================
   UTILIDADES DE FORMULARIOS
   ========================================================== */
.container{
  width:95%;
  max-width:1200px;
  margin:auto;
}

.fila{display:flex;gap:15px}
.columna{flex:1}

.input{
  width:100%;
  padding:6px;
  border:1px solid var(--gray-500);
  border-radius:var(--radius-sm);
}

.caja{
  background:var(--white);
  padding:15px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  margin-bottom:15px;
}

/* ==========================================================
   FOOTER
   ========================================================== */
footer{
  margin-top:30px;
  text-align:center;
  color:var(--gray-600);
  font-size:.9rem;
}

/* ==========================================================
   TABLAS EXCLUSIVAS DE stock.php
   ESTA ES LA PARTE QUE AGREGO
   ========================================================== */
.tabla-stock {
    width: 100%;
    border-collapse: collapse;
}

/* Bordes solo aquí */
.tabla-stock th,
.tabla-stock td {
    border: 1px solid #999;
    text-align: center;
    padding: 8px;
}

/* Encabezado */
.tabla-stock thead {
    background-color: var(--blue-600);
    color: var(--white);
}

/* Filas pares/impares */
.tabla-stock tbody tr:nth-child(odd) { background-color: #f1f1f1; }
.tabla-stock tbody tr:nth-child(even){ background-color: #ffffff; }

/* Hover */
.tabla-stock tbody tr:hover {
    background-color: #d7e6ff;
}

/* Ancho de columna nombre */
.nombre-columna{
    width: 250px;
}

/* ==========================================================
   NUEVOS BOTONES ADICIONADOS (NO REEMPLAZAN NADA EXISTENTE)
   ========================================================== */

.btn-amarillo{background:#facc15;color:#111827;}
.btn-amarillo:hover{background:#eab308;}

.btn-naranja{background:#fb923c;color:#111827;}
.btn-naranja:hover{background:#f97316;}

.btn-violeta{background:#a78bfa;color:white;}
.btn-violeta:hover{background:#8b5cf6;}

.btn-marron{background:#92400e;color:white;}
.btn-marron:hover{background:#78350f;}

@media print {
    body * { visibility: hidden !important; }
    #print_area, #print_area * { visibility: visible !important; }

    #print_area { position: absolute; left: 0; top: 0; width: 100%; }

    #print_area input,
    #print_area button,
    #print_area a { display: none !important; }

    #print_area .cantidad-print { display: inline !important; }

    table { page-break-inside: auto; }
    tr, td, th { page-break-inside: avoid; page-break-after: auto; }
}