/* ===== CRISCAR — sistema de diseño "CCP Carnes" =====
   Misma identidad visual que Pedidos CCP (crema, gris pizarra, rojo carmesí,
   tinta) para que los dos sistemas del negocio se vean como uno solo.
   Los nombres de variables se mantienen de la versión anterior a propósito:
   varias pantallas los usan inline (var(--panel), var(--muted), etc.) — solo
   cambian los valores, de tema oscuro a tema claro. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Superficies */
  --bg: #F4F2EC;          /* crema del isologo */
  --panel: #FFFFFF;       /* tarjetas */
  --panel-2: #F4F2EC;     /* inputs y fondos sutiles */
  --border: #E2E5E9;

  /* Texto */
  --text: #1E1E24;        /* tinta */
  --muted: #4B5261;

  /* Acentos */
  --accent: #C41E3A;      /* rojo carmesí — acción principal */
  --accent-dark: #9E1730;
  --accent-light: #F7DCE1;
  --accent-2: #708090;    /* gris pizarra — secundario */
  --accent-2-dark: #5A6672;

  /* Semánticos */
  --ok: #16A34A;
  --ok-bg: #DCFCE7;
  --warn: #F59E0B;
  --warn-bg: #FEF3C7;
  --danger: #E8543D;
  --danger-bg: #FCE7E3;

  --radius: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(30,30,36,.08);
  --shadow-md: 0 4px 14px rgba(30,30,36,.10);
  --shadow-lg: 0 10px 26px rgba(30,30,36,.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: 0.01em;
}

.container { max-width: 480px; margin: 0 auto; padding: 16px; padding-bottom: 96px; }
.container.wide { max-width: 1300px; }

/* Encabezado crema con la línea carmesí/pizarra abajo, igual que Pedidos CCP */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: var(--panel);
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--accent), var(--accent-2)) 1;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 {
  font-size: 22px; margin: 0; font-weight: 800; letter-spacing: 0.02em;
  color: var(--accent);
}
.topbar .sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.topbar a.logout { color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: underline; }

button, .btn {
  font-family: inherit; font-size: 13px; padding: 13px 16px; border-radius: 8px;
  border: none; cursor: pointer; font-weight: 700; letter-spacing: 0.01em;
  background-color: var(--accent); color: #fff;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  box-shadow: 0 6px 16px rgba(196,30,58,.35);
  transition: background 0.15s ease, filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button:hover { transform: translateY(-1px); background-color: var(--accent-dark); }
button:active { transform: translateY(0); filter: brightness(0.96); }
button.secondary {
  background-color: var(--accent-2); color: #fff;
  box-shadow: 0 6px 16px rgba(112,128,144,.35);
}
button.secondary:hover { background-color: var(--accent-2-dark); }
button.danger {
  background-color: var(--danger); background-image: none; color: #fff;
  box-shadow: 0 6px 16px rgba(232,84,61,.30);
}
button.link {
  background: none; background-image: none; color: var(--accent); padding: 4px 6px;
  font-weight: 700; box-shadow: none; text-decoration: underline;
}
button.link:hover { background: none; color: var(--accent-dark); transform: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
button.block { width: 100%; }

input, select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 14px;
  margin-bottom: 12px; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light);
}
label {
  font-size: 12px; color: var(--text); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; display: block; margin-bottom: 5px;
}

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-md);
}
.card-title {
  font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 14px;
  border-bottom: 3px solid var(--accent); padding-bottom: 10px;
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.badge {
  display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--accent-2); color: #fff; box-shadow: var(--shadow-sm);
}
.badge.en_stock { background: var(--ok-bg); color: var(--ok); }
.badge.despostada { background: var(--accent-light); color: var(--accent-dark); }
.badge.habilitado { background: var(--ok-bg); color: var(--ok); }
.badge.inhabilitado { background: var(--warn-bg); color: #92400E; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--panel); border: 1px solid var(--border); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
}
.kpi .value { font-size: 24px; font-weight: 800; color: var(--text); }
.kpi .label {
  color: var(--muted); font-size: 11px; margin-top: 4px; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.03em;
}

tr.fila-activa td { color: var(--accent); font-weight: 800; }

/* Las tablas anchas van adentro de este contenedor: en pantallas chicas
   scrollea solo la tabla, no se desborda de la tarjeta. */
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* nowrap: sin esto una fecha o un nombre largo parte la celda en varias
   lineas y desalinea toda la fila. */
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
  background: var(--panel-2); color: var(--text); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Columnas numericas: alineadas a la derecha y con ancho de digito fijo,
   para poder comparar cifras de un vistazo. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--panel-2); }
tr:last-child td { border-bottom: none; }

#reader { width: 100%; border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }

.empty-state { text-align: center; color: var(--muted); padding: 24px 16px; font-size: 13px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 700;
  z-index: 100; max-width: 90%; text-align: center; box-shadow: var(--shadow-lg);
}
.toast.success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.toast.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a {
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
  padding: 9px 14px; border-radius: 8px; font-size: 12px; text-transform: uppercase;
  font-weight: 700; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.tabs a:hover { background: var(--panel-2); color: var(--text); }
.tabs a.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(196,30,58,.35);
}

.login-box { max-width: 380px; margin: 60px auto; }
.login-box h1 {
  text-align: center; margin-bottom: 24px; font-weight: 800;
  color: var(--accent); font-size: 34px; letter-spacing: 0.02em;
}

.opcional-tag { color: var(--muted); font-weight: 500; text-transform: none; font-size: 11px; }

.footer-actions {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel);
  border-top: 1px solid var(--border); padding: 12px 16px; display: flex; gap: 10px;
  z-index: 10; box-shadow: 0 -4px 14px rgba(30,30,36,.08);
}

@media (max-width: 600px) {
  .container { padding: 10px; padding-bottom: 96px; }
  .card { padding: 14px; }
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
}