/* =========================
   RESET + BASE
========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  color: #2b2b2b;
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

:root{
  /* Paleta */
  --brand:#b2212f;      /* principal */
  --brand-dark:#911c27; /* hover / gradiente */
  --bg:#fafafa;         /* fondo general */
  --card:#ffffff;       /* fondo tarjetas */
  --ink:#2b2b2b;        /* texto */
  --muted:#777;         /* texto secundario */
  --line:#e8e8e8;       /* bordes suaves */
  --green:#2A9D8F;
  --amber:#E9C46A;
  --red:#D64550;

  /* Rutinas */
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 18px rgba(0,0,0,.08);
  --wrap:1200px;
}

.hidden { display: none !important; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 15px; }
.muted { color: var(--muted); font-size: .9em; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; }
.row { display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.right { text-align: right; }
.w-48 { width: 48%; }

/* =========================
   HEADER + NAV
========================= */
.app-header{
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.header-row{ display:flex; justify-content:space-between; align-items:center; padding: 12px 0; gap: 12px; }
.brand{ display:flex; align-items:center; gap:10px; min-width: 0; }
.brand img{
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #fff;
}
.brand-text h1{ margin:0; font-size: 1.25rem; line-height: 1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text p{ color:#f7e4e4; font-size:.9rem; }

.tabs{
  display:flex; gap:8px; padding: 8px 0 12px; overflow:auto; -webkit-overflow-scrolling: touch;
}
.tabs button{
  border:1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
  color:#fff; border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; white-space: nowrap;
}
.tabs button.active{ background:#0000002a; }

/* =========================
   LAYOUT + CARDS
========================= */
main{ padding: 16px 0; }
.grid{ display:grid; gap: 15px; }
.g2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.full{ grid-column:1/-1; }
.span2{ grid-column: span 2; }
.span3{ grid-column: span 3; }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.card .title{ font-weight:600; font-size:1.05rem; }

/* Control: KPIs y rejilla adaptable */
.control-grid-xl{ display:grid; gap:16px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi-title{ font-size: .85rem; color:#6f6f6f; margin-bottom: 4px; }
.kpi{ font-weight:700; font-size: 24px; color: #ff5a67; }
.kpi.big{ font-size: 32px; }
.kpi.small{ font-size: 18px; }
.kpi-card{
  background: linear-gradient(180deg,#ffffff,#fff7f7);
  border:1px solid #f1d3d7; border-radius: 16px; padding:18px;
  box-shadow: 0 6px 22px rgba(178,33,47,.12);
}

/* =========================
   FORM / INPUTS / BUTTONS
========================= */
label span{ display:block; font-size:12px; color: var(--muted); margin-bottom: 4px; }
input,select,textarea{
  width:100%; padding:10px 12px;
  border-radius: 10px; border:1px solid var(--line); background:#fff; font-size:14px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:#d9b1b7; box-shadow: 0 0 0 3px rgba(178,33,47,.08); }

.btn{
  border:1px solid var(--brand); background: var(--brand); color:#fff;
  border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor:pointer; transition: .15s;
}
.btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.outline{ background:#fff; color: var(--brand); border-color:#d9b1b7; }
.btn.warn{ background:#fff; border-color:#f4b7bd; color:#7a0d0d; }

/* Pills */
.pill{ display:inline-block; min-width:42px; text-align:center; border-radius:999px; padding:3px 10px; font-size:11px; }
.pill.gray{ background:#f3f4f6; color:#374151; }
.pill.red{ background:#ffe7ea; color:#7a1022; }
.pill.green{ background:#e6fbf7; color:#0f5d55; }
.pill.amber{ background:#fff7e6; color:#6b5208; border:1px solid #f3d899; }

/* =========================
   TABLAS + LISTAS
========================= */
.table-scroll{ overflow:auto; max-height: 380px; }
.list-scroll{ overflow:auto; max-height: 300px; }

table{ width:100%; border-collapse: collapse; font-size:.95em; background:#fff; }
th, td{ padding:10px 12px; border-top:1px solid var(--line); text-align:left; vertical-align: top; }
th{
  background:#fff1f2; color:#7a1631; position: sticky; top: 0; z-index: 1;
}
#lowStockList .item{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px dashed #f0d6d6; }

/* =========================
   SECCIONES ESPECÍFICAS
========================= */
/* Ventas: cards de producto */
#gridSellProducts .card .title{ color: var(--brand); }
#gridSellProducts .card .muted{ color: #7b5a5a; }

/* Clientes: tarjetas estilizadas */
#cardHistCliente, #cardFiadoPend{ border-radius:18px; box-shadow: 0 6px 20px rgba(122,13,13,.08); }
#cardHistCliente .title::before{ content:"🗒 "; }
#cardFiadoPend .title::before{ content:"💳 "; }
#cardHistCliente table, #cardFiadoPend table{ border:1px solid #f6d6d6; border-radius:12px; overflow:hidden; }
#cardHistCliente tbody tr:nth-child(odd),
#cardFiadoPend tbody tr:nth-child(odd){ background:#fffdfd; }
#cardHistCliente tbody tr:hover,
#cardFiadoPend tbody tr:hover{ background:#fff5f5; }
#cardFiadoPend tfoot td{ background:#fff7f7; }
#cardFiadoPend tfoot tr:last-child td{
  background:#fee2e2; color:#7a0d0d; font-weight:800; font-size: 15px;
}
#btnImprimirEstado{
  border-radius:999px; padding:6px 14px;
  border:1px solid #e6b3b3; color:#7a0d0d; background:#fff; box-shadow: 0 1px 2px #0001;
}
#btnImprimirEstado:hover{ background:#fff1f1; }

/* =========================
   GRÁFICOS (Chart.js)
   -> requiere maintainAspectRatio:false en JS
========================= */
.card canvas{ width:100% !important; display:block; }
#salesChart{ height: 180px !important; max-height: 180px; }
#catChart, #stockCatChart{ height: 220px !important; max-height: 220px; }

/* =========================
   LOGIN SCREEN (overlay)
========================= */
.login-screen{
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, var(--brand), var(--brand-dark));
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
}
.login-card{
  background:#fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 360px;
  box-shadow: var(--shadow-md); text-align: center;
}
.login-brand img{
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border-radius: 50%;
  object-fit: contain;
  background-color: #fff;
}
.login-card h1{ font-size: 1.2rem; margin-bottom: 12px; color: var(--brand); }
.login-card form{ display:flex; flex-direction: column; gap: 12px; }
.login-card input{ padding: 10px; border:1px solid var(--line); border-radius: 10px; }
.login-card .btn{ margin-top: 6px; }

/* =========================
   FOOTER
========================= */
.footer{ padding: 0 0 20px; }
.footer .muted{ color:#8a8a8a; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px){
  .control-grid-xl{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){
  .header-row{ flex-direction: column; align-items: flex-start; }
  .brand-text h1{ font-size: 1.05rem; }
  .grid{ gap: 12px; }
  .g2, .g3, .g4{ grid-template-columns: 1fr; }
  .span2, .span3, .full{ grid-column: 1/-1; }

  /* Gráficos más bajitos en móvil */
  #salesChart{ height: 160px !important; }
  #catChart, #stockCatChart{ height: 200px !important; }

  .table-scroll{ max-height: 70vh; }
  .list-scroll{ max-height: 50vh; }
}

/* =========================
   PREFERENCIAS (ligero detalle)
========================= */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* =========================
   CLIENTES: Subpestañas y detalle
   Estas reglas estilizan las subtabs internas del panel de cliente. Se
   inspiran en las interfaces de punto de venta de grandes comercios,
   priorizando la simplicidad y el contraste.  
 */
.tabs-secundarias{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--line);
  padding-bottom:4px;
}
.tabs-secundarias .subtab{
  background:none;
  border:none;
  cursor:pointer;
  padding:6px 10px;
  font-size:0.95rem;
  color:var(--brand);
  border-bottom:3px solid transparent;
  transition:color 0.2s, border-color 0.2s;
}
.tabs-secundarias .subtab.active{
  font-weight:600;
  border-bottom-color: var(--brand);
}

/* Resaltado de elemento seleccionado en listados */
#listClientes .selected{
  background-color: #f4eeee;
  border-radius: 8px;
}

/* Cambia el cursor a puntero en las filas del listado de clientes para
   indicar que son seleccionables */
#listClientes [data-id]{
  cursor: pointer;
}

/* Botones pequeños para acciones dentro de tarjetas */
.btn.small{
  padding:4px 10px;
  font-size:0.8rem;
}