:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #94a3b8;
  --line: #e7ecf3;
  --brand: #d61f69;
  --brand-dark: #a3144e;
  --brand-soft: #fce0ec;
  --verde: #2fa36b;
  --verde-soft: #d8f3e4;
  --ok: #059669;
  --ok-soft: #d1fae5;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ===== Layout con barra lateral ===== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #d61f69 0%, #a3144e 100%);
  color: #ffe6f0;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 16px;
}
.brand .logo {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.16);
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand .logo svg { width: 22px; height: 22px; }
.brand .name { font-weight: 700; font-size: 16px; line-height: 1.1; }
.brand .sub { font-size: 11px; color: #ffc2dd; letter-spacing: .04em; text-transform: uppercase; }

.menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 11px;
  color: #ffd9e8;
  text-decoration: none;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.menu a svg { width: 18px; height: 18px; opacity: .85; }
.menu a:hover { background: rgba(255,255,255,.10); color: #fff; }
.menu a.activo { background: #fff; color: var(--brand-dark); font-weight: 600; }
.menu a.activo svg { opacity: 1; }

.usuario-box {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 14px;
  margin-top: 8px;
}
.usuario-box .quien { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.usuario-box .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff;
}
.usuario-box .datos { line-height: 1.2; }
.usuario-box .datos b { font-size: 13px; }
.usuario-box .datos small { font-size: 11px; color: #ffc2dd; text-transform: capitalize; }
.usuario-box form { margin: 0; }
.btn-salir {
  width: 100%;
  background: rgba(255,255,255,.12);
  color: #fff; border: none;
  padding: 9px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: background .15s;
}
.btn-salir:hover { background: rgba(255,255,255,.22); }

/* ===== Contenido ===== */
.main { flex: 1; min-width: 0; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 32px;
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 20px; margin: 0; font-weight: 700; }
.topbar p { margin: 3px 0 0; color: var(--ink-soft); font-size: 13px; }
.content { padding: 26px 32px 60px; max-width: none; width: 100%; }

/* ===== Tarjetas de estadística ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
}
.stat .ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
}
.stat .ico svg { width: 22px; height: 22px; }
.stat .num { font-size: 24px; font-weight: 700; line-height: 1; }
.stat .lbl { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.ico.t-brand { background: var(--brand-soft); color: var(--brand-dark); }
.ico.t-ok { background: var(--ok-soft); color: var(--ok); }
.ico.t-warn { background: var(--warn-soft); color: var(--warn); }
.ico.t-danger { background: var(--danger-soft); color: var(--danger); }
.ico.t-money { background: #e0e7ff; color: #4338ca; }

/* ===== Tarjetas ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 16px; margin: 0; font-weight: 650; }
.card-head .sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.card-body { padding: 18px 20px; }
.card-body.tight { padding: 6px 8px; }

/* ===== Buscador ===== */
.buscador {
  position: relative; min-width: 240px;
}
.buscador svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted);
}
.buscador input { padding-left: 36px !important; width: 100%; }

/* ===== Formularios ===== */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
input[type=text], input[type=number], input[type=password], select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.form-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.divisor { flex-basis: 100%; height: 1px; background: var(--line); margin: 4px 0; }

button, .btn {
  background: var(--brand);
  color: #fff; border: none;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, transform .05s;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--brand-dark); }
button:active { transform: translateY(1px); }
button svg, .btn svg { width: 16px; height: 16px; }
.btn-ghost { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }
.btn-ghost:hover { background: #f8fafc; color: var(--ink); }
button.danger, .btn.danger { background: #fff; color: var(--danger); border: 1px solid var(--danger-soft); padding: 7px 11px; }
button.danger:hover { background: var(--danger-soft); }
button.mini { padding: 7px 11px; font-size: 13px; }

/* ===== Tablas ===== */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  position: sticky; top: 0;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: none; }
td.material { font-weight: 600; color: var(--ink); }
.principio { font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; font-style: italic; }
.chip-similar {
  background: #eef2ff; color: #4338ca; font-weight: 700; font-style: normal;
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: .3px; vertical-align: middle;
}

/* Para distinguir de un vistazo los productos GENÉRICOS (sin marca) del resto. */
.badge-generico {
  display: inline-flex; align-items: center;
  background: #f3e8ff; color: #7c3aed; font-weight: 700;
  font-size: 11.5px; letter-spacing: .2px; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
}
input[data-combo="labs"][value="GENERICO"] {
  background: #f3e8ff; color: #7c3aed; font-weight: 700;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.acciones { display: flex; gap: 7px; }
.fila-oculta { display: none; }
.fila-anulada { opacity: .55; }
.fila-anulada td.num b { text-decoration: line-through; }

/* ===== Badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-danger { background: var(--danger-soft); color: var(--danger); }
.b-neutral { background: #eef2f7; color: var(--ink-soft); }
.unidad-chip { background: #eef2f7; color: var(--ink-soft); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }

/* ===== Avisos ===== */
.alerta {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 11px;
  margin-bottom: 20px; font-size: 14px; font-weight: 500;
}
.alerta svg { width: 18px; height: 18px; flex-shrink: 0; }
.alerta-ok { background: var(--ok-soft); color: #065f46; }
.alerta-err { background: var(--danger-soft); color: #991b1b; }
.vacio { color: var(--muted); font-size: 14px; padding: 26px; text-align: center; }
.precio::before { content: "S/ "; color: var(--muted); font-weight: 400; }

/* ===== Login ===== */
.login-page {
  min-height: 100vh;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #d61f69 0%, #a3144e 55%, #5e0c2e 100%);
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
  width: 100%; max-width: 380px;
}
.login-card .brand-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-card .brand-top .logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: grid; place-items: center;
}
.login-card .brand-top .logo svg { width: 24px; height: 24px; }
.login-card h1 { font-size: 20px; margin: 0; }
.login-card .hint { color: var(--ink-soft); font-size: 13px; margin: 4px 0 22px; }
.login-card .campo { margin-bottom: 14px; }
.login-card button { width: 100%; justify-content: center; padding: 11px; margin-top: 6px; }

/* ===== Punto de venta ===== */
.pos { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.pos-cart-empty { color: var(--muted); text-align: center; padding: 30px 10px; font-size: 14px; }
.qty-input { width: 64px; text-align: center; padding: 6px; }
.precio-input { width: 84px; text-align: right; padding: 6px; }
.btn-quitar {
  background: var(--danger-soft); color: var(--danger); border: none;
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 16px;
  display: grid; place-items: center; padding: 0;
}
.btn-quitar:hover { background: #fbcaca; }
.resumen { position: sticky; top: 90px; }
.resumen .linea { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--ink-soft); }
.resumen .linea.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; font-size: 20px; font-weight: 700; color: var(--ink); }
.resumen .vuelto { color: var(--verde); font-weight: 700; }
.btn-cobrar {
  width: 100%; justify-content: center; padding: 13px; font-size: 16px; margin-top: 14px;
  background: var(--verde);
}
.btn-cobrar:hover { background: #268a59; }
.btn-cobrar:disabled { background: #cbd5e1; cursor: not-allowed; }
.add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.unidad-chip.verde { background: var(--verde-soft); color: #1c7a4d; }

/* Campo Material/Principio activo/Laboratorio que se abre por encima al hacer clic. */
input.expandido {
  z-index: 60; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Combobox propio para Laboratorio (cuadro blanco, reemplaza al datalist nativo). */
.combo { position: relative; display: inline-block; }
input[data-combo] { padding-right: 26px; }
.combo-arrow {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #64748b; font-size: 11px;
  border-left: 1px solid #e5e9f0; background: #fff; border-radius: 0 8px 8px 0;
  user-select: none;
}
.combo-arrow:hover { color: var(--brand, #d61f69); }
.combo-pop {
  position: fixed; z-index: 2000;
  background: #fff; color: #0f172a;
  border: 1px solid #e5e9f0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  max-height: 240px; overflow-y: auto; padding: 5px;
}
.combo-pop .opt {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 12px; border-radius: 7px; cursor: pointer;
  font-size: 14px; color: #0f172a; white-space: nowrap;
}
.combo-pop .opt:hover { background: #f1f5f9; }
.combo-pop .vacio-opt { padding: 8px 12px; color: #94a3b8; font-size: 13px; font-style: italic; }

.combo-pop .opt-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* Lápiz/✕ solo aparecen al pasar el mouse por la fila, para no ensuciar la lista. */
.combo-pop .opt-accion {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  display: none; align-items: center; justify-content: center;
  color: #94a3b8; cursor: pointer;
}
.combo-pop .opt-accion svg { width: 13px; height: 13px; }
.combo-pop .opt:hover .opt-accion { display: flex; }
.combo-pop .opt-editar:hover { background: var(--brand-soft); color: var(--brand-dark); }
.combo-pop .opt-eliminar:hover { background: var(--danger-soft); color: var(--danger); }
/* Mientras se edita, ✓/✕ quedan siempre visibles (no dependen del hover). */
.combo-pop .opt-confirmar, .combo-pop .opt-cancelar { display: flex; }
.combo-pop .opt-confirmar:hover { background: var(--ok-soft); color: var(--ok); }
.combo-pop .opt-cancelar:hover { background: var(--danger-soft); color: var(--danger); }
.combo-pop .opt-editar-input {
  flex: 1; min-width: 0; border: 1px solid var(--brand); border-radius: 6px;
  padding: 4px 7px; font-size: 13px; font-family: inherit; color: #0f172a;
}
.combo-pop .opt-editar-input:focus { outline: none; }

/* Cartelito flotante (toast) que aparece abajo a la derecha, avisa y se va solo. */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--verde);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: #c0392b; }
.toast svg { width: 20px; height: 20px; flex-shrink: 0; }

/* El CSS del aviso de inactividad (.inactivo-*) ahora lo inyecta el propio
   inactividad.js con valores fijos, para que el modal se vea bien también en
   páginas que NO cargan este style.css (ej. el ticket de venta). */

@media (max-width: 860px) { .pos { grid-template-columns: 1fr; } .resumen { position: static; } }
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 16px; }
  .brand { border: none; margin: 0; padding: 0 16px 0 0; }
  .brand .sub { display: none; }
  .menu { flex-direction: row; flex: 1; }
  .usuario-box { border: none; padding: 0; margin: 0; }
  .usuario-box .quien { display: none; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ===========================================================================
   ESQUEMA DE INGRESOS (hojas de ingreso con descarga por partes)
   Clases que usa la pantalla de hoja de ingreso. Todo toma los colores de las
   variables de arriba, así respeta la identidad del sistema.
   =========================================================================== */

/* "mini" también en enlaces (<a class="btn mini">), no solo en <button>. */
.btn.mini { padding: 7px 11px; font-size: 13px; }

/* Chip del número de hoja (Nº 12). */
.cod-chip {
  display: inline-block;
  background: var(--brand-soft); color: var(--brand-dark);
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* Línea ya descargada: se ve apagada y no se puede editar. */
.fila-descargada { background: #fafcfe; }
.fila-descargada .material { color: var(--ink-soft); }
.fila-descargada input { background: #f1f5f9; color: var(--muted); cursor: not-allowed; }

/* Cuadro entero desactivado (buscador cuando la hoja queda bloqueada). */
.bloqueado { opacity: .55; pointer-events: none; }

/* Mini recuadro redondeado para crear un medicamento nuevo. */
.recuadro-nuevo {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; background: var(--bg);
}

/* ===== Ventana emergente (reemplaza al alert()/confirm() del navegador) ===== */
.modal-fondo {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  display: none; place-items: center;
  z-index: 60; padding: 20px;
}
.modal-fondo.abierto { display: grid; }
.modal-card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 780px;
  max-height: 88vh; overflow: auto;
}
/* Editor de un medicamento (la ventanita que reemplazó a editar en la tabla). */
.modal-med-card { max-width: 620px; }
.modal-pie {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--surface); z-index: 2;
}
.mm-nota { font-weight: 400; color: var(--muted); }
.mm-aviso-stock {
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.mm-aviso-stock a { color: var(--brand-dark); font-weight: 600; }
/* El nombre y el principio activo son textarea: que se vean igual que los
   demás campos del cuadro. */
.area-nombre {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
  resize: none; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.area-nombre:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,148,136,.15); }

.aviso-card { width: auto; max-width: 380px; }
.aviso-body {
  padding: 22px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.aviso-icono {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger-soft); color: var(--danger);
  display: grid; place-items: center;
}
.aviso-icono svg { width: 22px; height: 22px; }
.aviso-texto { margin: 0; max-width: 300px; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; }
.aviso-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.aviso-btn { width: auto; min-width: 120px; justify-content: center; margin-top: 0; padding: 9px 16px; font-size: 14px; }