/* ======= Base / Reset ligero ======= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Ubuntu, Cantarell, Arial, "Helvetica Neue", sans-serif;
  color: #111827;               /* gris-900 */
  background: #eee9e9;          /* azul-gris muy claro */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: #7a4a2f; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ======= Paleta & Tokens ======= */
:root{
  --brand-700:#6e442a;  /* madera oscuro */
  --brand-600:#7a4a2f;
  --brand-500:#8b5e3c;
  --brand-200:#e9d9cd;
  --brand-50:#fbf7f3;

  --bg:#f8fafc;
  --surface:#ffffff;
  --border:#e5e7eb;     /* gris-200 */
  --muted:#6b7280;      /* gris-500 */
  --ok:#16a34a;         /* verde-600 */
  --warn:#ca8a04;       /* ámbar-600 */
  --danger:#b91c1c;     /* rojo-700 */
  --ring:#7a4a2f33;     /* halo enfoque */
  --shadow: 0 6px 18px rgba(17,24,39,.08);
  --radius: 14px;
  --pad: 1rem;
}

/* ======= Contenedores ======= */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ======= Barra de navegación ======= */
.navbar{
  position: sticky; 
  top:0; 
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
  box-shadow: 0 3px 10px rgba(17,24,39,.04);
}
.navbar .row{
  display: flex; 
  gap: .75rem; 
  align-items: center;
}
.navbar .brand{
  font-weight: 700; 
  letter-spacing:.2px; 
  color: var(--brand-700);
}
.navbar nav{
  display:flex; 
  gap:.75rem; 
  align-items:center; 
  margin-left: 1rem;
}

.navbar a{
  padding:.45rem .7rem; 
  border-radius: 10px; 
  color:#374151;
}

.navbar a.active, .navbar a:hover{
  background: var(--brand-50);
  color: var(--brand-700);
}
.navbar .spacer{ margin-left:auto; }

/* ======= Tipografía / utilidades de texto ======= */
h1,h2,h3{ 
  line-height:1.2; 
  margin: 0 0 .6rem; }
h1{ 
  font-size: clamp(1.6rem, 2.4vw, 2rem); }
h2{ 
  font-size: clamp(1.25rem, 2vw, 1.5rem); 
  color:#1f2937; }
h3{ 
  font-size: 1.1rem; 
  color:#1f2937; }
.muted{ 
    color: var(--muted); }

/* ======= Layout / helpers ======= */
.section{ padding: 1.25rem 0; }
.grid{ display:grid; gap: 1rem; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

/* ======= Tarjetas ======= */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card .card-body{ 
  padding: var(--pad); 
}
.card .card-title{ 
  font-weight: 700; 
  margin-bottom: .35rem; 
}

/* ======= Botones ======= */
.btn{
  appearance: none; 
  border: 1px solid transparent; 
  border-radius: 12px;
  padding:.55rem .9rem; 
  font-weight:600; 
  cursor:pointer; 
  line-height:1.1;
  transition: .15s ease-in-out; 
  display:inline-flex; 
  align-items:center; 
  gap:.5rem;
}

.btn:focus{ 
  outline: none; 
  box-shadow: 0 0 0 4px var(--ring); 
}

.btn-primary{ background: var(--brand-600); 
  color:#fff; 
}

.btn-primary:hover{ 
  background: var(--brand-700); 
}

.btn-secondary{ 
  background:#fff; 
  border-color: var(--border); 
  color:#374151; 
}

.btn-secondary:hover{ 
  background:#f3f4f6; 
}

.btn-danger{ 
  background: var(--danger); 
  color:#fff; 
}

.btn-danger:hover{ 
  filter: brightness(.95); 
}

.btn-ghost{ 
  background: transparent; 
  color:#374151; 
}

.btn-ghost:hover{ 
  background:#f3f4f6; 
}

.btn-sm{ 
  padding:.4rem .65rem; 
  border-radius:10px; 
  font-size:.92rem; 
}

.btn-block{ 
  width:100%; 
  justify-content:center; 
}

/* ======= Formularios ======= */
label{ 
  display:block; 
  font-weight:600; 
  margin:.35rem 0 .25rem; 
  color:#374151; 
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
select, textarea{
  width:100%; 
  padding:.6rem .7rem; 
  border-radius:12px;
  background:#fff; 
  border:1px solid var(--border);
  transition: .12s ease-in-out;
}

textarea{ 
  min-height: 110px; 
}

input:focus, select:focus, textarea:focus{
  outline:none; 
  border-color: var(--brand-500); 
  box-shadow: 0 0 0 4px var(--ring);
}

.form-row{ 
  display:grid; 
  gap:.75rem; 
  grid-template-columns: repeat(2,1fr); 
}

@media (max-width:680px){ .form-row{ grid-template-columns: 1fr; } }

.form-actions{ 
  margin-top:.9rem;
  display:flex; 
  gap:.5rem; 
  flex-wrap:wrap; 
}

/* Mensajes */
.alert{ 
  padding:.7rem .9rem; 
  border-radius:12px; 
  border:1px solid transparent; 
}

.alert-ok{ 
  background:#ecfdf5; 
  border-color:#a7f3d0; 
  color:#065f46; 
}

.alert-warn{ 
  background:#fffbeb; 
  border-color:#fde68a; 
  color:#92400e; 
}

.alert-bad{ 
  background:#fef2f2; 
  border-color:#fecaca; 
  color:#7f1d1d; 
}

/* ======= Tablas ======= */
.table{
  width:100%; 
  border-collapse: collapse; 
  background: var(--surface);
  border:1px solid var(--border); 
  border-radius: var(--radius);
  overflow:hidden; 
  box-shadow: var(--shadow);
}

.table th, .table td{ 
  padding:.7rem .8rem; 
  text-align:left; 
}

.table thead th{
  background: var(--brand-50); 
  color:#374151; 
  font-weight:700; 
  border-bottom:1px solid var(--border);
}

.table tbody tr{ 
  border-top:1px solid var(--border); 
}

.table tbody tr:hover{ 
  background:#fafafa;
 }

.table .actions{ 
  white-space:nowrap;
   display:flex; 
   gap:.35rem; 
  }

/* ======= Badges ======= */
.badge{
  display:inline-flex; 
  align-items:center; 
  gap:.35rem;
  font-size:.85rem; 
  border-radius:999px; 
  padding:.25rem .6rem; 
  border:1px solid transparent;
}

.badge-ok{ 
  background:#ecfdf5; 
  color:#065f46; 
  border-color:#bbf7d0; 
}

.badge-warn{ 
  background:#fffbeb; 
  color:#92400e; 
  border-color:#fde68a; 
}

.badge-bad{ background:#fef2f2; 
  color:#7f1d1d; 
  border-color:#fecaca; 
}

.badge-neutral{ 
  background:#eef2ff; 
  color:#3730a3; 
  border-color:#c7d2fe; 
}

.product-card .thumb{
  width:100%;
  height:180px;
  border-bottom:1px solid var(--border);
  background:#f3f4f6;
  overflow:hidden;
  display:flex;                 /* centrado del contenido */
  align-items:center;
  justify-content:center;
}

.product-card .meta{ 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:.5rem; 
  margin-top:.45rem; 
}

.product-card .thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;             /* recorte proporcional */
  object-position:center;       /* centrado del recorte */
  border:0;
}

/* ======= Paginación simple ======= */
.pagination{ 
  display:flex; 
  gap:.35rem; 
  align-items:center; 
  flex-wrap:wrap; 
}

.pagination a, .pagination span{
  padding:.4rem .65rem; 
  border:1px solid var(--border); 
  border-radius:10px; 
  color:#374151; 
  background:#fff;
}

.pagination .active{ 
  background: var(--brand-600); 
  color:#fff; 
  border-color:transparent; 
}

/* ======= Footer ======= */
.footer{
  margin-top: 2rem; 
  padding: 1.25rem 0;
  border-top: 1px solid var(--border); 
  color: var(--muted);
}

/* ======= Utilidades espaciado ======= */
.mt-1
{ 
  margin-top:.25rem;
} 

.mt-2
{ 
  margin-top:.5rem;
} 

.mt-3
{ 
  margin-top:.75rem;
}
 
.mt-4
{ 
  margin-top:1rem;
}

.mb-1
{ 
  margin-bottom:.25rem;
}
 
.mb-2
{ 
  margin-bottom:.5rem;
}
 
.mb-3
{ 
  margin-bottom:.75rem;
} 

.mb-4
{
   margin-bottom:1rem;
}

.p-1
{ 
  padding:.25rem;
} 

.p-2
{ 
  padding:.5rem;
} 

.p-3
{ 
  padding:.75rem;
}

.p-4
{ 
  padding:1rem;
}

             
/* ======= Flex helpers ======= */
.flex{ 
  display:flex; 
} 

.items-center
{ 
  align-items:center; 
}

.justify-between{ 
  justify-content:space-between;  
} 

.gap-1
{ 
  gap:.25rem;
}

.gap-2{
   
  gap:.5rem;
} 

.gap-3{ 
  gap:.75rem;}

/* ======= Modal ======= */
.modal{
  position: fixed;  
  inset: 0; 
  background: rgba(0,0,0,.55);
  display: none; 
  align-items: center;
   justify-content: 
   center; padding: 1rem;
}

.modal.open{ display: flex; }

.modal-dialog{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(100%, 980px);
  max-height: 90vh; overflow: auto;
  position: relative;
}
.modal-close{
  position: absolute; 
  top: .35rem; 
  right: .5rem;
  border: none; 
  background: transparent; 
  font-size: 2rem; 
  line-height: 1;
  cursor: pointer; 
  color: #6b7280;
}

.modal-body{ padding: var(--pad); }

/* Thumbnails para cotizaciones */
.thumb-mini{
  width: 200px; height: 140px;
  object-fit: cover; object-position: center;
  border: 1px solid var(--border); border-radius: 12px;
  background:#f3f4f6; display:block;
}
.thumb-xs{
  width: 64px; height: 48px;
  object-fit: cover; object-position: center;
  border: 1px solid var(--border); border-radius: 8px;
  background:#f3f4f6; display:block;
}

/* Dropdown base */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  cursor: pointer;
  list-style: none;
  padding: .5rem .75rem;
  border-radius: .25rem;
}
.dropdown[open] .dropdown-toggle,
.dropdown.active .dropdown-toggle {
  /* resaltar cuando está activo o abierto */
  background: rgba(0,0,0,.06);
}

/* Dropdown accesible con <details>/<summary> */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { cursor: pointer; padding: .5rem .75rem; border-radius: .25rem;}
.dropdown[open] .dropdown-toggle, .dropdown.active .dropdown-toggle { background: rgba(0,0,0,.06); }

.dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px; margin-top: .25rem; padding: .25rem 0;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: .35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1000;
}
.dropdown-menu a, .dropdown-item { display: block; padding: .5rem .75rem; text-decoration: none; color: inherit; white-space: nowrap; }
.dropdown-menu a:hover { background: rgba(0,0,0,.05); }
.dropdown-menu a.active { font-weight: 600; }
.muted { opacity: .6; cursor: default; }

.auth-center{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-center .card{
  width: 100%;
  max-width: 520px; /* ancho cómodo del formulario */
}