/* =========================================================
   Mi Tiendita • Tema Claro (blanco + azules agradables)
   Reemplaza por completo tu assets/css/app.css con este
   ========================================================= */

/* Variables de color */
:root{
  --bg:#f8fafc;          /* Fondo general */
  --panel:#ffffff;       /* Tarjetas / paneles */
  --border:#e2e8f0;      /* Bordes suaves */
  --text:#0f172a;        /* Texto principal */
  --muted:#64748b;       /* Texto secundario */

  --primary:#2563eb;     /* Azul principal */
  --primary-600:#1d4ed8; /* Azul hover */
  --accent:#2563eb;      /* Acentos */

  --success:#059669;     /* Verde confirmación */
  --warning:#d97706;     /* Ámbar */
  --danger:#dc2626;      /* Rojo */
}

/* Reset y base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.35;
}
img{max-width:100%; display:block}

/* Contenedor principal */
.container{max-width:1100px; margin:80px auto 40px; padding:0 16px}

/* Topbar / navegación */
.topbar{
  position:fixed; top:0; left:0; right:0; height:60px;
  background:var(--panel);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  border-bottom:1px solid var(--border);
  z-index:50;
}
.logo{font-weight:800; letter-spacing:.2px; white-space:nowrap}
.top-search{margin-left:8px; flex:1; max-width:520px}
.input-compact{height:36px; padding:8px 10px}
.nav{margin-left:auto; display:flex; gap:8px}
.nav a{
  color:var(--text); text-decoration:none;
  padding:8px 12px; border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{background:#eff6ff; color:#0b3cc4}
.logout{color:var(--danger)}
.burger{display:none; background:none; border:none; color:var(--text); font-size:22px; margin-left:8px}

/* Cards y grid */
.card-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.card{
  grid-column:span 12;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 2px rgba(2,6,23,.04), 0 8px 24px rgba(2,6,23,.06);
}
.card h3{margin:0 0 8px 0}

/* KPI */
.kpi{display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--muted); margin:6px 0}
.kpi strong{font-size:22px; color:var(--text)}

/* Botones */
.btn{
  appearance:none; border:none; cursor:pointer;
  background:var(--primary); color:#fff;
  padding:10px 14px; border-radius:12px; font-weight:700;
  transition:transform .04s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 2px rgba(37,99,235,.2), 0 4px 12px rgba(37,99,235,.15);
}
.btn:hover{background:var(--primary-600)}
.btn:active{transform:translateY(1px)}
.btn.alt{background:#0ea5e9}          /* celeste */
.btn.alt:hover{background:#0284c7}
.btn.warn{background:var(--warning)}
.btn.warn:hover{background:#b45309}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#b91c1c}
.actions{display:flex; flex-wrap:wrap; gap:10px}

/* Formularios */
.form{display:grid; gap:10px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
label{font-size:13px; color:var(--muted); display:grid; gap:6px}

.input{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.input:focus{
  outline:none; border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
  background:#fff;
}

/* Tablas */
.table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
.table thead th{background:#f1f5f9; font-weight:700; color:#0f172a}
.table tbody tr:hover{background:#f8fafc}
.table tbody tr:last-child td{border-bottom:none}

/* Login card */
.login-card{
  max-width:420px; margin:110px auto; padding:22px;
  border-radius:16px; background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(2,6,23,.04), 0 8px 24px rgba(2,6,23,.06);
}
.center{text-align:center}

/* Footer */
.footer{max-width:1100px; margin:0 auto; color:var(--muted); padding:20px}

/* Sugerencias (autocompletado) */
.suggest-box{
  position:absolute; top:44px; left:0; right:0;
  background:#ffffff; border:1px solid var(--border);
  border-radius:12px; max-height:260px; overflow:auto; z-index:60;
  box-shadow:0 8px 24px rgba(2,6,23,.08);
}
.suggest-item{
  padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border);
  color:var(--text); font-size:14px;
}
.suggest-item:hover{background:#eff6ff}
.suggest-item:last-child{border-bottom:none}

/* Estados */
.tag-success{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; padding:2px 8px; border-radius:999px; font-size:12px}
.tag-warn{background:#fffbeb; color:#92400e; border:1px solid #fde68a; padding:2px 8px; border-radius:999px; font-size:12px}
.tag-danger{background:#fef2f2; color:#991b1b; border:1px solid #fecaca; padding:2px 8px; border-radius:999px; font-size:12px}

/* Utilidades */
.muted{color:var(--muted)}
.hidden{display:none}

/* Responsive */
@media (min-width:640px){
  .card{grid-column:span 6}
}
@media (min-width:1024px){
  .card{grid-column:span 4}
  .burger{display:none}
  .nav{display:flex}
}
@media (max-width:1023px){
  .burger{display:block; margin-left:auto}
  .nav{
    position:fixed; top:60px; right:0; left:0; background:var(--panel);
    flex-direction:column; gap:0; display:none; border-bottom:1px solid var(--border)
  }
  .nav.open{display:flex}
  .nav a{padding:12px 16px; border-radius:0; border-top:1px solid var(--border)}
  .top-search{display:none}
}

/* Ajustes POS (ventas) */
#catProducts{ /* grid de botones de producto táctil */
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px
}
#catProducts .btn{width:100%; justify-content:flex-start}
@media (min-width:900px){
  #catProducts{grid-template-columns:repeat(3,1fr)}
}