/* =========================================================
   AUTOCORE — Hoja de estilos principal
   Tema oscuro sobre Bootstrap 5.3 (data-bs-theme="dark").
   Aquí solo sobrescribimos colores y agregamos el layout
   (sidebar + contenido). Todo lo demás es Bootstrap.
   ========================================================= */

@import url('../vendor/fonts/fonts.css');

/* ---------- Variables de color de la marca ---------- */
:root,
[data-bs-theme="dark"] {
  --ac-bg: #050505;
  --ac-bg-2: #0a0a0c;
  --ac-surface: #111113;
  --ac-surface-2: #16161a;
  --ac-hover: #1b1b1f;
  --ac-line: #212125;
  --ac-primary: #4f5dfa;
  --ac-primary-2: #3d48e0;
  --ac-primary-soft: rgba(79, 93, 250, 0.12);
  --ac-primary-text: #7c8cff;
  --ac-green: #39d98a;
  --ac-amber: #f5a623;
  --ac-red: #f0553e;
  --ac-text: #f7f7f8;
  --ac-text-2: #c9c9ce;
  --ac-muted: #8a8a93;

  /* Variables de Bootstrap que reutilizamos */
  --bs-body-bg: var(--ac-bg);
  --bs-body-color: var(--ac-text);
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-border-color: var(--ac-line);
  --bs-secondary-color: var(--ac-muted);
  --bs-tertiary-bg: var(--ac-surface-2);
  --bs-primary: var(--ac-primary);
  --bs-primary-rgb: 79, 93, 250;
  --bs-link-color: var(--ac-primary-text);
  --bs-link-hover-color: #a5b0ff;
  --bs-success-rgb: 57, 217, 138;
  --bs-warning-rgb: 245, 166, 35;
  --bs-danger-rgb: 240, 85, 62;
}

body {
  background: var(--ac-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .font-display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-bg: var(--ac-primary);
  --bs-btn-border-color: var(--ac-primary);
  --bs-btn-hover-bg: var(--ac-primary-2);
  --bs-btn-hover-border-color: var(--ac-primary-2);
  --bs-btn-active-bg: var(--ac-primary-2);
  --bs-btn-active-border-color: var(--ac-primary-2);
  --bs-btn-disabled-bg: var(--ac-primary);
  --bs-btn-disabled-border-color: var(--ac-primary);
}
.btn-outline-light {
  --bs-btn-color: var(--ac-text-2);
  --bs-btn-border-color: var(--ac-line);
  --bs-btn-hover-bg: var(--ac-hover);
  --bs-btn-hover-color: var(--ac-text);
  --bs-btn-hover-border-color: #34343a;
  --bs-btn-active-bg: var(--ac-hover);
  --bs-btn-active-color: var(--ac-text);
}
.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Formularios ---------- */
.form-control,
.form-select {
  background-color: var(--ac-bg-2);
  border-color: var(--ac-line);
  color: var(--ac-text);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--ac-bg-2);
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 3px rgba(79, 93, 250, 0.2);
  color: var(--ac-text);
}
.form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ac-muted);
  margin-bottom: 0.35rem;
}
.form-control::placeholder { color: #55555c; }
.input-group-text {
  background: var(--ac-surface-2);
  border-color: var(--ac-line);
  color: var(--ac-muted);
}

/* ---------- Layout de la aplicación ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh; /* Safari iOS: descuenta la barra de direcciones */
}

.app-sidebar {
  width: 250px;
  background: var(--ac-bg-2);
  border-right: 1px solid var(--ac-line);
}
@media (min-width: 992px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    flex-shrink: 0;
  }
}
.app-sidebar .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ac-text);
  text-decoration: none;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ac-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.nav-group-title {
  font-size: 0.7rem;
  font-weight: 500;
  color: #6b6b74;
  padding: 0 0.75rem;
  margin: 1.1rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--ac-text-2);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}
.side-link:hover { background: var(--ac-hover); color: var(--ac-text); }
.side-link.active { background: var(--ac-primary-soft); color: var(--ac-primary-text); }
.side-link i { font-size: 1rem; }

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ac-line);
  background: rgba(5, 5, 5, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.app-topbar h1 { font-size: 1.2rem; margin: 0; font-weight: 600; }
.app-topbar .subtitle { font-size: 0.82rem; color: var(--ac-muted); margin: 0; }

.app-content { padding: 1.5rem; }
@media (min-width: 992px) {
  .app-content { padding: 2rem; }
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac-primary), #2f38b0);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ---------- Tarjetas y tablas ---------- */
.card-ac {
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
  border-radius: 16px;
}
.card-ac .card-header-ac {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ac-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* Si la tarjeta solo tiene encabezado (barras de filtros), sin línea abajo */
.card-ac .card-header-ac:last-child { border-bottom: 0; }
.card-ac .card-header-ac h2 { font-size: 1rem; margin: 0; font-weight: 600; }

.stat-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  height: 100%;
}
.stat-card .label { font-size: 0.82rem; color: var(--ac-muted); }
.stat-card .value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 0.4rem;
}
.stat-card i { color: #6b6b74; }

.table-ac {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--ac-hover);
  --bs-table-border-color: var(--ac-line);
  margin: 0;
  font-size: 0.88rem;
}
.table-ac thead th {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b6b74;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.75rem 1.25rem;
}
.table-ac td { padding: 0.75rem 1.25rem; vertical-align: middle; color: var(--ac-text-2); }
.table-ac td.strong { color: var(--ac-text); font-weight: 500; }
.table-ac td.strong:first-child { white-space: nowrap; } /* códigos como CLI-001 no se parten */
/* En tablet las celdas usan menos espacio lateral para que quepan todas las columnas */
@media (min-width: 576px) and (max-width: 991.98px) {
  .table-ac thead th,
  .table-ac td { padding-left: 0.75rem; padding-right: 0.75rem; }
}
.table-ac tbody tr:last-child td { border-bottom: 0; }

/* ---------- Tablas apiladas en celular (.table-stack) ----------
   En pantallas menores a 576 px cada fila se vuelve una tarjeta:
   el encabezado se oculta y cada celda muestra su título a la
   izquierda (data-label, lo pone etiquetarTablas() en layout.js).
   Así no hay que deslizar la tabla de lado y los botones se ven. */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack,
  .table-stack tbody { display: block; width: 100%; }
  .table-stack tr {
    display: block;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--ac-line);
  }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.28rem 0;
    border: 0;
    text-align: right;
    min-width: 0;
  }
  .table-stack td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b6b74;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  .table-stack td > * { min-width: 0; }
  /* Celdas sin título (acciones) y la fila de "sin resultados" */
  .table-stack td[data-label=""]::before,
  .table-stack td[colspan]::before { content: none; }
  .table-stack td[data-label=""] { justify-content: flex-end; padding-top: 0.6rem; }
  .table-stack td[colspan] { display: block; text-align: center; }
}

/* ---------- Badges de estado ---------- */
.badge-ac {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-ac::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-green { background: rgba(57, 217, 138, 0.14); color: var(--ac-green); }
.badge-amber { background: rgba(245, 166, 35, 0.14); color: var(--ac-amber); }
.badge-red { background: rgba(240, 85, 62, 0.14); color: var(--ac-red); }
.badge-blue { background: var(--ac-primary-soft); color: var(--ac-primary-text); }
.badge-gray { background: rgba(107, 107, 116, 0.18); color: var(--ac-text-2); }

/* ---------- Alertas ---------- */
.alert-stock {
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: #ffd38a;
  border-radius: 12px;
}

/* ---------- Estado vacío ---------- */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ac-muted);
}
.empty-state i { font-size: 2rem; color: #3a3a40; display: block; margin-bottom: 0.75rem; }

/* ---------- Punto de venta ---------- */
.item-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: var(--ac-bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  text-align: left;
  color: inherit;
}
.item-pick:hover { border-color: rgba(79, 93, 250, 0.5); background: var(--ac-hover); }
.item-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.item-pick .name { font-size: 0.88rem; color: var(--ac-text); }
.item-pick .meta { font-size: 0.75rem; color: var(--ac-muted); }
.item-pick .price { font-family: 'Space Grotesk', sans-serif; font-weight: 600; white-space: nowrap; }

.pick-list {
  max-height: 420px;
  overflow-y: auto;
  display: grid;
  gap: 0.5rem;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  overflow: hidden;
}
.qty-control button {
  background: transparent;
  border: 0;
  color: var(--ac-text-2);
  width: 28px;
  height: 28px;
}
.qty-control button:hover { background: var(--ac-hover); color: var(--ac-text); }
.qty-control input {
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--ac-text);
  text-align: center;
  font-size: 0.85rem;
}
.qty-control input:focus { outline: none; }

.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  color: var(--ac-text-2);
}
.totals-row.total {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ac-text);
  border-top: 1px solid var(--ac-line);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
.discount-note {
  font-size: 0.78rem;
  color: var(--ac-green);
}

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh; /* Safari iOS: descuenta la barra de direcciones */
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(600px circle at 50% 0%, rgba(79, 93, 250, 0.18), transparent 60%),
    var(--ac-bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
}
.demo-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  background: var(--ac-bg-2);
  color: var(--ac-text-2);
  font-size: 0.82rem;
}
.demo-user:hover { border-color: rgba(79, 93, 250, 0.5); color: var(--ac-text); }

/* ---------- Modales ---------- */
.modal-content {
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
  border-radius: 16px;
}
.modal-header, .modal-footer { border-color: var(--ac-line); }

/* ---------- Factura ---------- */
.factura {
  background: #fff;
  color: #111;
  border-radius: 12px;
  padding: 1.75rem;
  font-size: 0.88rem;
}
.factura h3 { font-size: 1.2rem; margin: 0; }
.factura .muted { color: #666; }
.factura table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.factura th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
  border-bottom: 1px solid #ddd;
  padding: 0.5rem 0.4rem;
}
.factura td { padding: 0.5rem 0.4rem; border-bottom: 1px solid #eee; }
.factura .num { text-align: right; white-space: nowrap; }
.factura .tot-box { margin-left: auto; width: 100%; max-width: 280px; margin-top: 1rem; }
.factura .tot-box div { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.factura .tot-box .grand { font-weight: 700; font-size: 1.1rem; border-top: 2px solid #111; margin-top: 0.4rem; padding-top: 0.5rem; }

/* ---------- Toasts ---------- */
.toast {
  background: var(--ac-surface-2);
  border: 1px solid var(--ac-line);
  color: var(--ac-text);
}

/* ---------- Impresión: solo la factura / reporte ---------- */
@media print {
  body * { visibility: hidden !important; }
  .print-area, .print-area * { visibility: visible !important; }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .no-print { display: none !important; }
  body { background: #fff !important; }
  .modal { position: absolute !important; overflow: visible !important; }
  .modal-dialog { margin: 0 !important; max-width: 100% !important; }
  .print-area,
  .print-area .card-ac,
  .print-area .stat-card,
  .print-area td,
  .print-area th,
  .print-area .totals-row,
  .print-area .value,
  .print-area h2 {
    background: #fff !important;
    color: #111 !important;
    border-color: #ccc !important;
  }
}

/* utilidad: permite que el texto se recorte dentro de flex */
.min-w-0 { min-width: 0; }

/* Bootstrap oculta el encabezado del offcanvas en pantallas grandes; aquí lo mantenemos visible para el logo */
.app-sidebar .offcanvas-header { display: flex !important; }

/* Pestañas (nav-pills) con el color de la marca */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ac-primary);
  --bs-nav-link-color: var(--ac-text-2);
  --bs-nav-link-hover-color: var(--ac-text);
}

/* =========================================================
   Rejilla de tarjetas (vehículos e inventario)
   ========================================================= */
.grid-card {
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
@media (hover: hover) {
  .grid-card:hover { border-color: rgba(79, 93, 250, 0.45); transform: translateY(-2px); }
}

.grid-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0d0d11;
  overflow: hidden;
}
.grid-media img,
.grid-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grid-media .chip-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.chip-code {
  background: rgba(5, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ac-text);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}
.grid-media .badge-ac { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background-color: rgba(5, 5, 5, 0.72); }

.grid-body {
  padding: 0.9rem 1rem 0.4rem;
  flex-grow: 1;
}
.grid-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em; /* mantiene alineadas las tarjetas aunque el nombre sea corto */
}
.grid-meta { font-size: 0.8rem; color: var(--ac-muted); }
.grid-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.plate {
  display: inline-block;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: #f2f2f4;
  color: #111;
  border: 2px solid #c9c9ce;
}
.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}
.stock-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--ac-line);
  overflow: hidden;
}
.stock-bar span { display: block; height: 100%; border-radius: 999px; }

.grid-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem 1rem;
  margin-top: auto; /* acciones siempre abajo, alineadas entre tarjetas */
}
.grid-actions .btn { flex: 1; }

.foto-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(79, 93, 250, 0.22), transparent 60%),
    linear-gradient(180deg, #1b1c24, #0d0d11);
  color: var(--ac-primary-text);
}
.foto-placeholder i { font-size: 2.6rem; }
.foto-placeholder span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/* Campo de foto en los formularios */
.foto-campo {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.foto-campo .foto-vista {
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ac-line);
  flex-shrink: 0;
  background: #0d0d11;
}
.foto-campo .foto-vista img,
.foto-campo .foto-vista svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-campo .foto-vista .foto-placeholder i { font-size: 1.6rem; }
.foto-campo .foto-vista .foto-placeholder span { display: none; }

/* Miniatura en la lista del punto de venta */
.item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--ac-line);
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb .foto-placeholder i { font-size: 1.2rem; }
.item-thumb .foto-placeholder span { display: none; }

/* =========================================================
   Fotos de recepción del vehículo (hasta 10)
   ========================================================= */
.grid-media .foto-diferida {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s;
}
.grid-media .foto-diferida.cargada { opacity: 1; }
.grid-media.con-fotos { cursor: zoom-in; }
.chip-fotos {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(5, 5, 5, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ac-text);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.fotos-seccion {
  border-top: 1px solid var(--ac-line);
  padding-top: 1rem;
}
.fotos-vacio {
  border: 1px dashed #34343a;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.fotos-ilustracion {
  width: 160px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}
.fotos-ilustracion svg { width: 100%; height: 100%; display: block; }
#fotos-agregar.disabled { opacity: 0.45; pointer-events: none; }

.foto-item-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ac-line);
  background: #0d0d11;
}
.foto-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(5, 5, 5, 0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.foto-quitar:hover { background: var(--ac-red); }
.foto-num {
  position: absolute;
  left: 6px;
  top: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.75);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.foto-fecha { font-size: 0.7rem; color: var(--ac-muted); margin-top: 0.2rem; }

/* Visor de fotos */
.galeria-foto {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(70vh, 640px);
  height: min(70dvh, 640px);
}
.galeria-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.galeria-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--ac-muted);
  border-top: 1px solid var(--ac-line);
}

/* =========================================================
   Compatibilidad con iPhone / iPad (Safari iOS)
   ========================================================= */
html {
  -webkit-text-size-adjust: 100%; /* no agranda el texto al girar el teléfono */
  text-size-adjust: 100%;
}
:root { color-scheme: dark; } /* selector de fecha y teclado en modo oscuro */
body { -webkit-tap-highlight-color: transparent; }

/* Muesca (notch) y barra de inicio: el contenido no queda debajo */
.app-topbar {
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.app-content {
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 992px) {
  .app-content { padding: 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}
.app-sidebar .offcanvas-header { padding-top: max(1.5rem, env(safe-area-inset-top)) !important; }
.app-sidebar .offcanvas-body { padding-bottom: env(safe-area-inset-bottom); }
.login-wrap {
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Solo en Safari iOS: los campos con letra menor a 16 px hacen zoom al tocarlos */
@supports (-webkit-touch-callout: none) {
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm { font-size: 16px; }
}

/* Campo de fecha: Safari lo dibuja diferente, lo dejamos igual a los demás */
input[type="date"].form-control {
  -webkit-appearance: none;
  appearance: none;
  min-height: calc(1.5em + 0.75rem + 2px);
  min-width: 9.5rem;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* =========================================================
   Gráficas (js/graficas.js) — HTML + SVG, sin librerías
   ========================================================= */
.grafico {
  --g-1: #3987e5;      /* azul */
  --g-2: #d95926;      /* naranja */
  --g-3: #199e70;      /* aqua */
  --g-barra: rgba(79, 93, 250, 0.55);
  --g-barra-destacada: var(--ac-primary);
  position: relative;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ----- Barras verticales ----- */
.g-barras { display: flex; gap: 0.5rem; }
.g-eje-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  font-size: 0.7rem;
  color: var(--ac-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(-0.45em);
}
.g-area { flex: 1; min-width: 0; }
.g-plot {
  position: relative;
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid #34343a;
}
.g-linea {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--ac-line);
  pointer-events: none;
}
.g-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 6px 6px 0 0;
}
.g-col:focus-visible { outline: 2px solid var(--ac-primary-text); outline-offset: 2px; }
.g-col.activa { background: rgba(255, 255, 255, 0.04); }
.g-barra {
  display: block;
  width: 100%;
  max-width: 32px;
  border-radius: 4px 4px 0 0;
  background: var(--g-barra);
  transition: height 0.4s ease;
}
.g-col.destacada .g-barra { background: var(--g-barra-destacada); }
.g-col.activa .g-barra { background: var(--ac-primary-text); }
.g-etiquetas { display: flex; gap: 2px; margin-top: 0.4rem; }
.g-etiquetas span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ac-muted);
  white-space: nowrap;
  overflow: hidden;
}
.g-etiquetas span.destacada { color: var(--ac-text); font-weight: 600; }
.g-tip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 6px));
  background: #1f1f25;
  border: 1px solid #34343a;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  color: var(--ac-text-2);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
}
.g-tip strong { color: var(--ac-text); display: block; font-size: 0.85rem; }
.g-tip[hidden] { display: none; }

/* ----- Dona ----- */
.g-dona-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.g-dona { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.g-dona svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.g-dona circle.seg { transition: opacity 0.2s; cursor: pointer; }
.g-dona.enfocada circle.seg:not(.activo) { opacity: 0.3; }
.g-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.g-centro .v { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--ac-text); }
.g-centro .t { font-size: 0.7rem; color: var(--ac-muted); }
.g-leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; }
.g-leyenda li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  font-size: 0.85rem;
  color: var(--ac-text-2);
  border-radius: 6px;
  cursor: pointer;
}
.g-leyenda li.activo { background: var(--ac-hover); }
.g-leyenda .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.g-leyenda .n { flex: 1; min-width: 0; }
.g-leyenda .val { color: var(--ac-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.g-leyenda .pct { color: var(--ac-muted); font-size: 0.75rem; width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Barra fina dentro de la tabla "Más vendidos" */
.g-mini { height: 4px; border-radius: 2px; background: var(--ac-line); margin-top: 0.35rem; overflow: hidden; }
.g-mini span { display: block; height: 100%; border-radius: 2px; background: var(--ac-primary); }

.g-vacio { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ac-muted); font-size: 0.85rem; text-align: center; }
.g-vacio i { font-size: 1.8rem; color: #3a3a40; margin-bottom: 0.5rem; }

@media (max-width: 575.98px) {
  .g-eje-y, .g-plot, .g-vacio { height: 150px; }
  .g-dona { width: 130px; height: 130px; }
}

@media print {
  .grafico .g-eje-y, .grafico .g-etiquetas span, .grafico .g-leyenda li,
  .grafico .g-centro .t, .grafico .g-leyenda .pct { color: #444 !important; }
  .grafico .g-centro .v, .grafico .g-leyenda .val { color: #111 !important; }
  .grafico .g-plot { border-color: #999 !important; }
  .grafico .g-tip { display: none !important; }
  .card-ac { break-inside: avoid; }
}

/* Teléfonos muy angostos (320 px): la etiqueta de las tarjetas no choca con el ícono */
.stat-card > .d-flex { gap: 0.5rem; }
.stat-card .label { min-width: 0; }
@media (max-width: 359.98px) {
  .stat-card { padding: 0.9rem 1rem; }
  .stat-card .value { font-size: 1.35rem; }
  .stat-card > .d-flex > i { display: none; }
}