/*
 * Estilos de la aplicación. Enfoque mobile-first: los estilos base son para teléfono y se amplían
 * con min-width. Objetivos táctiles de al menos 44 px (uso con guantes y tablets en planta).
 */

/*
 * Paleta PACKORA (tomada del logo):
 *   --app-primary  #5b36d4  morado de la cara del cubo (configurable por empresa en Configuración)
 *   --app-deep     #281878  base del cubo (degradados)          --app-ink  #0b1f46  azul marino del nombre (títulos)
 */
:root {
    --app-primary: #5b36d4;
    --app-deep: #281878;
    --app-ink: #0b1f46;
    --app-sidebar-width: 260px;
    --app-topbar-height: 56px;
    --app-radius: .75rem;
    --app-bg: #f5f4fa;
    --app-touch: 44px;
    --bs-link-color-rgb: 91, 54, 212;
}
h1, h2, h3, .h1, .h2, .h3, .page-header h1 { color: var(--app-ink); }

/* Color corporativo configurable por empresa */
.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-primary) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-primary) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-primary) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-primary) 75%, #000);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
}
a { color: var(--app-primary); }
/* Utilidades "primary" de Bootstrap con el color de la marca/empresa */
.text-bg-primary, .bg-primary { background-color: var(--app-primary) !important; color: #fff !important; }
.text-primary { color: var(--app-primary) !important; }
.border-primary { border-color: var(--app-primary) !important; }
.spinner-border.text-primary { color: var(--app-primary) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); --bs-nav-link-color: var(--app-primary); --bs-nav-link-hover-color: color-mix(in srgb, var(--app-primary) 80%, #000); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: color-mix(in srgb, var(--app-primary) 60%, #fff);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--app-primary) 25%, transparent);
}
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.page-link { color: var(--app-primary); }
.active > .page-link, .page-link.active { background-color: var(--app-primary); border-color: var(--app-primary); }

body { background: var(--app-bg); min-height: 100vh; }
.min-w-0 { min-width: 0; }

/* Objetivos táctiles */
.btn, .form-control, .form-select { min-height: var(--app-touch); }
.btn-sm { min-height: 36px; }
.form-check-input { width: 1.35em; height: 1.35em; }
.form-check { min-height: var(--app-touch); display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.form-check .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.btn-icon { width: var(--app-touch); height: var(--app-touch); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
/* Evita el zoom automático de iOS al enfocar campos */
input, select, textarea { font-size: 16px !important; }

/* Barra superior (solo móvil/tablet) */
.app-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: calc(var(--app-topbar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) .25rem 0;
    display: flex; align-items: center; gap: .25rem;
    background: linear-gradient(120deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 55%, var(--app-deep))); color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.app-topbar-title { flex: 1; font-weight: 600; font-size: 1.05rem; }

/* Barra lateral */
.app-sidebar { --bs-offcanvas-width: min(85vw, var(--app-sidebar-width)); background: #fff; display: flex; flex-direction: column; }
.app-brand { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem .75rem; min-width: 0; }
.app-brand-wordmark { height: 30px; width: auto; }
.app-tenant { display: flex; align-items: center; gap: .65rem; margin: 0 .75rem .5rem; padding: .6rem .75rem; min-width: 0;
    border-radius: .6rem; background: color-mix(in srgb, var(--app-primary) 7%, #fff); border: 1px solid color-mix(in srgb, var(--app-primary) 15%, #fff); }
.app-brand-text { min-width: 0; line-height: 1.2; }
.app-brand-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: .4rem; }
.app-brand-icon {
    width: 40px; height: 40px; border-radius: .6rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--app-primary); color: #fff; font-size: 1.4rem;
}
.app-brand-icon-lg { width: 64px; height: 64px; font-size: 2rem; border-radius: 1rem; }
.app-switcher { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); background: #fff8e1; }
.app-nav { flex: 1; overflow-y: auto; padding: .5rem; }
.app-nav-section { padding: 1rem .75rem .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.app-nav-link {
    display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .75rem;
    border-radius: .5rem; color: var(--bs-body-color); text-decoration: none; font-weight: 500;
}
.app-nav-link i { font-size: 1.2rem; width: 1.5rem; text-align: center; }
.app-nav-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.app-nav-link.active { background: color-mix(in srgb, var(--app-primary) 12%, #fff); color: var(--app-primary); }
.app-user { border-top: 1px solid var(--bs-border-color); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); display: grid; gap: .5rem; }
.app-user-info { display: flex; align-items: center; gap: .6rem; color: var(--bs-body-color); text-decoration: none; min-width: 0; }

/* Contenido */
.app-main { padding: 1rem .75rem calc(5rem + env(safe-area-inset-bottom)); min-width: 0; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.35rem; margin: 0; }
.card { border: 0; border-radius: var(--app-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }

/* Botón principal fijo en la parte inferior en móvil (crear / guardar) */
.mobile-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
    padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--bs-border-color);
    display: flex; gap: .5rem;
}
.mobile-action-bar > * { flex: 1; }

/* Filtros */
.filters { display: grid; gap: .5rem; grid-template-columns: 1fr; }

/*
 * Tablas apilables: en pantallas pequeñas cada fila se muestra como tarjeta y cada celda
 * con su etiqueta (atributo data-label). Una sola estructura HTML para todos los tamaños.
 */
.table-stack { margin: 0; }
.table-stack thead { display: none; }
.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
.table-stack tr { background: #fff; border-radius: var(--app-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); margin-bottom: .75rem; padding: .5rem .75rem; }
.table-stack td { border: 0; padding: .35rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; background: transparent !important; }
.table-stack td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; flex-shrink: 0; }
.table-stack td.cell-title { font-size: 1.05rem; font-weight: 600; text-align: left; display: block; }
.table-stack td.cell-title::before, .table-stack td.cell-actions::before { content: none; }
.table-stack td.cell-actions { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--bs-border-color-translucent); margin-top: .35rem; padding-top: .6rem; }
.table-stack-card { background: transparent; box-shadow: none; }

/* Tablet en adelante */
@media (min-width: 576px) {
    .app-main { padding: 1.25rem 1.25rem 5.5rem; }
    .filters { grid-template-columns: 2fr 1fr auto; align-items: end; }
}

@media (min-width: 768px) {
    .table-stack { display: table; }
    .table-stack thead { display: table-header-group; }
    .table-stack tbody { display: table-row-group; }
    .table-stack tr { display: table-row; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
    .table-stack td { display: table-cell; width: auto; text-align: left; padding: .75rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
    .table-stack td::before { content: none; }
    .table-stack td.cell-title { font-size: 1rem; display: table-cell; }
    .table-stack td.cell-actions { border-top: 0; margin: 0; text-align: right; white-space: nowrap; }
    .table-stack-card { background: #fff; border-radius: var(--app-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); overflow: hidden; }
    .mobile-action-bar { position: static; background: transparent; border: 0; padding: 0; justify-content: flex-end; }
    .mobile-action-bar > * { flex: 0 0 auto; }
    .app-main { padding-bottom: 2rem; }
}

/* Escritorio: barra lateral fija */
@media (min-width: 992px) {
    .app-shell { display: grid; grid-template-columns: var(--app-sidebar-width) 1fr; min-height: 100vh; }
    .app-sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--bs-border-color); }
    .app-main { padding: 2rem; max-width: 1400px; width: 100%; }
    .page-header h1 { font-size: 1.6rem; }
}

/* Inicio de sesión */
.app-guest { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem;
    background: radial-gradient(120% 90% at 85% 0%, #7a55e6 0%, transparent 55%), linear-gradient(160deg, #3b2398 0%, var(--app-deep) 60%, #120b3d 100%); }
.app-guest-card { width: 100%; max-width: 420px; background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; box-shadow: 0 16px 40px rgba(10, 6, 40, .45); }
.app-guest-logo { width: min(240px, 70%); height: auto; }
.app-guest-footer { color: rgba(255, 255, 255, .7); font-size: .8rem; text-align: center; }
.app-guest-link { color: #fff; font-weight: 600; text-decoration: none; }
.app-guest-link:hover { color: #fff; text-decoration: underline; }

/* Vista previa de logo */
.logo-preview { width: 160px; height: 160px; object-fit: contain; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 50% / 16px 16px; border-radius: .5rem; border: 1px solid var(--bs-border-color); }

.list-logo { width: 36px; height: 36px; object-fit: contain; border-radius: .4rem; border: 1px solid var(--bs-border-color); background: #fff; flex-shrink: 0; }
.list-logo-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
/* Producción */
.current-shift:hover { border-color: var(--app-primary) !important; }
.qty-main { font-size: 1.75rem !important; font-weight: 700; text-align: right; }
.qty-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.qty-summary > div { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .5rem .75rem; }
.qty-summary dt { font-weight: 500; font-size: .8rem; color: var(--bs-secondary-color); }
.qty-summary dd { margin: 0; font-size: 1.5rem; font-weight: 700; }

/* Gráficos (una serie; color de datos fijo y validado, independiente del color corporativo) */
:root { --chart-bar: #5b36d4; --chart-axis: #c3c2b7; --chart-hover: rgba(91, 54, 212, .08); }
.chart-bar { fill: var(--chart-bar); }
.chart-axis { stroke: var(--chart-axis); stroke-width: .3; vector-effect: non-scaling-stroke; }
.chart-hit { fill: transparent; }
.chart-row:hover .chart-hit { fill: var(--chart-hover); }
.chart-row:hover .chart-bar, .hbar-row:hover .chart-bar { fill: #3b2398; }
.chart { display: block; }
.hbar-list { display: grid; gap: .35rem; }
.hbar-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; align-items: center; gap: .5rem; min-height: 28px; }
.hbar-label { font-size: .875rem; color: var(--bs-secondary-color); }
.hbar-track { width: 100%; height: 14px; display: block; }
.hbar-value { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 4.5rem; }
.chart-axis-labels { font-variant-numeric: tabular-nums; }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.kpi-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.kpi-breakdown > div { display: flex; justify-content: space-between; gap: .5rem; }
.kpi-breakdown dt { font-weight: 400; color: var(--bs-secondary-color); }
.kpi-breakdown dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.table-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Impresión de reportes: solo el contenido */
@media print {
    .app-sidebar, .app-topbar, .app-help-fab, .mobile-action-bar, .no-print, .alert-warning { display: none !important; }
    .app-shell { display: block; }
    .app-main { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    body { background: #fff; }
}

/* Ayuda */
.app-help-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1025; border-radius: 2rem; padding: .5rem 1rem; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.help-list dt { margin-top: .75rem; }
.help-list dt:first-child { margin-top: 0; }
.help-list dd { margin-bottom: 0; color: var(--bs-secondary-color); }

/* Primeros pasos */
.onboarding-step { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; min-height: 56px; border: 1px solid var(--bs-border-color); border-radius: .6rem; color: var(--bs-body-color); text-decoration: none; background: #fff; }
.onboarding-step:hover { border-color: var(--app-primary); color: var(--bs-body-color); }
.onboarding-check { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border: 2px solid var(--app-primary); color: var(--app-primary); }
.onboarding-step.is-done .onboarding-check { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.onboarding-step.is-done .fw-semibold { text-decoration: line-through; color: var(--bs-secondary-color); }
.progress-bar { background-color: var(--app-primary); }
.onboarding-progress-0 { width: 0; } .onboarding-progress-10 { width: 10%; } .onboarding-progress-20 { width: 20%; }
.onboarding-progress-30 { width: 30%; } .onboarding-progress-40 { width: 40%; } .onboarding-progress-50 { width: 50%; }
.onboarding-progress-60 { width: 60%; } .onboarding-progress-70 { width: 70%; } .onboarding-progress-80 { width: 80%; }
.onboarding-progress-90 { width: 90%; } .onboarding-progress-100 { width: 100%; }

.design-preview { max-height: 260px; object-fit: contain; background: #fff; }

.json-diff { font-size: .8rem; white-space: pre-wrap; word-break: break-word; margin: 0; max-width: 32rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}