/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.form-control {
  border: 1px solid #d2d6da;
}

.form-control:focus {
  border-color: #555559;
  box-shadow: 0 0 0 0.2rem rgba(20, 39, 60, 0.25);
}

/* Contenedor general */
.dataTables_wrapper {
  font-family: sans-serif;
  font-size: 14px;
  color: #444;
}

/* Selector de cantidad (Mostrar registros) */
.dataTables_length label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #555;
}

.dataTables_length select.form-select-sm {
  padding: 4px 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_length select.form-select-sm:focus {
  border-color: #999;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  outline: none;
}

/* Filtro (Buscar) */
.dataTables_filter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 1em;
}

.dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dataTables_filter input.form-control-sm {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_filter input.form-control-sm:focus {
  border-color: #999;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  outline: none;
}

/* Info de paginación (Mostrando registros...) */
.dataTables_info {
  padding-top: 0.5em;
  color: #666;
}

/* Paginación */
.dataTables_paginate {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dataTables_paginate ul.pagination {
  margin: 0;
}

.dataTables_paginate .pagination .page-link {
  padding: 4px 10px;
  font-size: 14px;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dataTables_paginate .pagination .page-link:hover {
  background-color: #f1f1f1;
  color: #333;
}

.dataTables_paginate .pagination .active .page-link {
  background-color: #e0e0e0;
  color: #333;
  border-color: #ccc;
}

.dataTables_paginate .pagination .disabled .page-link {
  color: #bbb;
  cursor: not-allowed;
  background-color: #f9f9f9;
  border-color: #eee;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
}

.table thead {
  background-color: #f9f9f9;
}

.table th,
.table td {
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
  text-align: justify;
}

.table th {
  font-weight: 600;
  color: #555;
}

.table tr:hover {
  background-color: #f1f1f1;
}

.table td img {
  border-radius: 4px;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.dataTables_filter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
  font-family: sans-serif;
  font-size: 14px;
  color: #555;
}

.dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dataTables_filter .search-label {
  font-weight: 500;
}

.dataTables_filter input[type="search"] {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 400px;
}

.dataTables_filter input[type="search"]:focus {
  border-color: #999;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  outline: none;
}

/* ============================================================
   SISTEMA VISUAL UNIFICADO
   Los estilos administrativos y de tienda comparten tokens,
   pero permanecen aislados para evitar efectos cruzados.
   ============================================================ */
:root {
  --pv-primary: #1e3a8a;
  --pv-primary-hover: #1d4ed8;
  --pv-primary-soft: #eff6ff;
  --pv-success: #15803d;
  --pv-warning: #b45309;
  --pv-danger: #b42318;
  --pv-ink: #172033;
  --pv-muted: #667085;
  --pv-border: #e4e7ec;
  --pv-canvas: #f6f8fb;
  --pv-surface: #ffffff;
  --pv-radius-sm: 8px;
  --pv-radius: 12px;
  --pv-radius-lg: 16px;
  --pv-shadow: 0 2px 10px rgba(15, 23, 42, .055);
  --pv-shadow-raised: 0 12px 28px rgba(15, 23, 42, .09);
}

.app-admin,
.app-storefront {
  color: var(--pv-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-admin { background: var(--pv-canvas) !important; }

.app-admin .main-content {
  min-width: 0;
  padding-bottom: 2rem;
}

.app-admin .pv-page-header-slot:empty { display: none; }
.app-admin .pv-page-header-slot:not(:has(> *)) { display: none; }
.app-admin .pv-page-header-slot {
  padding: .9rem 1rem 0;
}
.app-admin .pv-page-header-slot > * {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
  min-height: 78px;
  padding: 1rem 1.15rem !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--pv-border) !important;
  border-radius: var(--pv-radius) !important;
  box-shadow: var(--pv-shadow);
}
.app-admin .pv-page-header-slot h1,
.app-admin .pv-page-header-slot h2,
.app-admin .pv-page-header-slot h3,
.app-admin .pv-page-header-slot h4 {
  margin-bottom: .2rem !important;
  color: var(--pv-ink) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}
.app-admin .pv-page-header-slot h1 i,
.app-admin .pv-page-header-slot h2 i,
.app-admin .pv-page-header-slot h3 i,
.app-admin .pv-page-header-slot h4 i,
.app-admin .pv-page-header-slot h1 span,
.app-admin .pv-page-header-slot h2 span {
  color: var(--pv-primary) !important;
}
.app-admin .pv-page-header-slot p {
  margin-bottom: 0 !important;
  color: var(--pv-muted) !important;
  font-size: .8rem !important;
}
.app-admin .pv-page-content {
  min-width: 0;
  padding: 1rem;
}
.app-admin .pv-page-content > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

/* Encabezados de página: funciona con los patrones existentes sin
   obligar a cambiar sus bloques de Django. */
.app-admin .main-content > .container-fluid > .d-flex:first-child,
.app-admin .main-content > .container-fluid > .row:first-child,
.app-admin [class*="content-header"] {
  border-color: var(--pv-border) !important;
}

.app-admin .content-header,
.app-admin .main-content > .container-fluid:first-of-type {
  color: var(--pv-ink);
}

.app-admin h1,
.app-admin h2,
.app-admin h3,
.app-admin h4,
.app-admin h5,
.app-admin h6 {
  color: var(--pv-ink);
  letter-spacing: -.015em;
}

.app-admin .text-secondary,
.app-admin .text-muted {
  color: var(--pv-muted) !important;
}

/* Superficies */
.app-admin .card {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border) !important;
  border-radius: var(--pv-radius) !important;
  box-shadow: var(--pv-shadow);
}
.app-admin .pv-page-content .card { box-shadow: var(--pv-shadow) !important; }

.app-admin .card-header {
  min-height: 52px;
  border-color: var(--pv-border) !important;
  border-radius: var(--pv-radius) var(--pv-radius) 0 0 !important;
}

.app-admin .card-header.bg-white,
.app-admin .card-header.bg-transparent,
.app-admin .card-header.bg-light {
  background: #fff !important;
}
.app-admin .card-header.bg-info,
.app-admin .card-header.bg-primary {
  color: #fff !important;
  background: var(--pv-primary) !important;
}

.app-admin .card-header[style*="linear-gradient"] {
  color: #fff !important;
  background: linear-gradient(135deg, #172554, var(--pv-primary)) !important;
}

.app-admin .card-header[style*="linear-gradient"] h1,
.app-admin .card-header[style*="linear-gradient"] h2,
.app-admin .card-header[style*="linear-gradient"] h3,
.app-admin .card-header[style*="linear-gradient"] h4,
.app-admin .card-header[style*="linear-gradient"] h5,
.app-admin .card-header[style*="linear-gradient"] h6,
.app-admin .card-header[style*="linear-gradient"] .text-dark,
.app-admin .card-header[style*="linear-gradient"] .text-secondary {
  color: #fff !important;
}

.app-admin .card-body { color: var(--pv-ink); }

/* Botones y acciones */
.app-admin .btn {
  min-height: 38px;
  border-radius: var(--pv-radius-sm);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: none;
}

.app-admin .btn-sm,
.app-admin .btn-xs { min-height: 34px; }

.app-admin .btn-primary {
  background: var(--pv-primary);
  border-color: var(--pv-primary);
}

.app-admin .btn-primary:hover,
.app-admin .btn-primary:focus {
  background: var(--pv-primary-hover);
  border-color: var(--pv-primary-hover);
}

.app-admin .btn-outline-primary {
  color: var(--pv-primary);
  border-color: #a9bce9;
}

.app-admin .btn-outline-primary:hover {
  color: #fff;
  background: var(--pv-primary);
  border-color: var(--pv-primary);
}

/* Formularios */
.app-admin .form-label,
.app-admin label:not(.form-check-label) {
  margin-bottom: .35rem;
  color: #475467;
  font-size: .78rem;
  font-weight: 650;
}

.app-admin .form-control,
.app-admin .form-select,
.app-admin .select2-container--default .select2-selection--single,
.app-admin .select2-container--default .select2-selection--multiple {
  min-height: 42px;
  color: var(--pv-ink);
  background-color: #fff;
  border: 1px solid #d0d5dd !important;
  border-radius: var(--pv-radius-sm) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.app-admin .form-control:focus,
.app-admin .form-select:focus {
  border-color: #84adff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11) !important;
}

.app-admin textarea.form-control { min-height: 96px; }
.app-admin .form-text { color: #98a2b3; font-size: .72rem; }

/* Tablas y DataTables */
.app-admin .table-responsive {
  border-radius: 0 0 var(--pv-radius) var(--pv-radius);
}

.app-admin .table {
  margin-bottom: 0;
  color: #344054;
  font-family: inherit;
  font-size: .8rem;
}

.app-admin .table > thead {
  background: #f8fafc;
}

.app-admin .table > thead > tr > th {
  padding: .72rem .85rem;
  color: #667085 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--pv-border) !important;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-admin #table-list thead th {
  color: #667085 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--pv-border) !important;
}
.app-admin #total-badge {
  color: var(--pv-primary) !important;
  background: var(--pv-primary-soft) !important;
  border-color: #bfdbfe !important;
}
.app-admin .stat-card {
  background: #fff !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: var(--pv-radius) !important;
  box-shadow: var(--pv-shadow) !important;
}
.app-admin .stat-card.stat-filter {
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.app-admin .stat-card.stat-filter:hover { transform: translateY(-1px); }
.app-admin .stat-card.stat-filter.active {
  border-color: var(--pv-primary) !important;
  box-shadow: 0 0 0 2px rgba(30,58,138,.1) !important;
}

/* Formularios extensos de producto: el mismo patrón se utiliza tanto para
   alta como para edición. */
.app-admin .product-form-shell {
  padding: 1rem;
  background: #f5f7fb;
  border: 1px solid #e5e9f2;
  border-radius: var(--pv-radius-lg);
}
.app-admin .product-form-section {
  display: block;
  padding: 1.25rem 1.25rem .45rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #e8ebf1;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(24, 39, 75, .035);
}
.app-admin .product-form-section:last-child { margin-bottom: 0; }
.app-admin .section-heading {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: .9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #eef1f5;
}
.app-admin .section-heading h6 { margin: 0 0 .15rem; font-size: .96rem; font-weight: 750; }
.app-admin .section-heading p { margin: 0; color: #7b8494; font-size: .78rem; line-height: 1.35; }
.app-admin .section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #2563eb;
  background: #eaf1ff;
  border-radius: 10px;
}
.app-admin .section-icon-green { color:#15803d; background:#eaf8ef; }
.app-admin .section-icon-orange { color:#c2410c; background:#fff1e8; }
.app-admin .section-icon-purple { color:#7e22ce; background:#f5eafe; }
.app-admin .section-icon-cyan { color:#0e7490; background:#e8f8fb; }
.app-admin .section-icon-red { color:#b91c1c; background:#feeeee; }
.app-admin .section-icon-slate { color:#475569; background:#eef2f6; }
.app-admin .save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  padding: .75rem;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  box-shadow: 0 8px 24px rgba(15,23,42,.1);
  backdrop-filter: blur(8px);
}

.app-admin .table > tbody > tr > td {
  padding: .78rem .85rem;
  border-color: #eef1f5;
  text-align: left;
  vertical-align: middle;
}

.app-admin .table > tbody > tr:hover > td { background: #fafcff; }

.app-admin .dataTables_wrapper { color: var(--pv-muted); font-family: inherit; }
.app-admin .dataTables_filter { justify-content: flex-end; }
.app-admin .dataTables_filter input[type="search"] {
  width: min(320px, 100%);
  min-height: 38px;
  border-color: #d0d5dd;
  border-radius: var(--pv-radius-sm);
}
.app-admin .dataTables_length select { min-height: 36px; border-radius: var(--pv-radius-sm) !important; }
.app-admin .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  background: var(--pv-primary) !important;
  border-color: var(--pv-primary) !important;
  border-radius: 7px !important;
}
.app-admin .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
  color: var(--pv-primary) !important;
  background: var(--pv-primary-soft) !important;
  border-color: transparent !important;
  border-radius: 7px !important;
}
.app-admin .page-link {
  color: var(--pv-primary);
  border-color: var(--pv-border);
  border-radius: 7px !important;
}
.app-admin .page-item.active .page-link {
  color: #fff;
  background: var(--pv-primary);
  border-color: var(--pv-primary);
}

/* Estados, alertas y navegación secundaria */
.app-admin .badge {
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 750;
}

.app-admin .alert {
  border: 1px solid;
  border-radius: var(--pv-radius);
  font-size: .82rem;
}

.app-admin .modal-content {
  overflow: hidden;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-raised);
}
.app-admin .modal-header,
.app-admin .modal-footer { border-color: var(--pv-border); }
.app-admin .modal-title { font-size: 1rem; font-weight: 800; }

.app-admin .empty-state,
.app-admin .blank-state {
  padding: 2.75rem 1.25rem;
  color: var(--pv-muted);
  text-align: center;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: var(--pv-radius);
}

.app-admin .dropdown-menu {
  padding: .4rem;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  box-shadow: var(--pv-shadow-raised);
}
.app-admin .dropdown-item {
  min-height: 36px;
  border-radius: 7px;
  font-size: .8rem;
}
.app-admin .dropdown-item:active,
.app-admin .dropdown-item.active {
  color: #fff;
  background: var(--pv-primary);
}

.app-admin .pv-page-content .filter-bar,
.app-admin .pv-page-content .toolbar {
  padding: .75rem .85rem;
  margin-bottom: .75rem;
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  box-shadow: var(--pv-shadow);
}
.app-admin .pv-page-content .toolbar {
  top: 8px;
  border-bottom: 1px solid var(--pv-border);
}
.app-admin #btn-thermal,
.app-admin #btn-print {
  min-height: 38px;
  border-radius: var(--pv-radius-sm) !important;
}
.app-admin #btn-thermal {
  background: var(--pv-primary) !important;
}
.app-admin #btn-print:not(:disabled) {
  background: #475467 !important;
}
.app-admin .products-table {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  box-shadow: var(--pv-shadow);
}
.app-admin .products-table thead th {
  color: #667085;
  background: #f8fafc;
  border-color: var(--pv-border);
}
.app-admin .products-table tbody tr.selected {
  background: var(--pv-primary-soft);
  outline-color: var(--pv-primary);
}
.app-admin .product-checkbox { accent-color: var(--pv-primary); }

.app-admin .nav-tabs,
.app-admin .nav-pills { gap: .25rem; }
.app-admin .nav-tabs .nav-link,
.app-admin .nav-pills .nav-link {
  min-height: 38px;
  border-radius: var(--pv-radius-sm);
  color: var(--pv-muted);
  font-size: .78rem;
  font-weight: 700;
}
.app-admin .nav-tabs .nav-link.active,
.app-admin .nav-pills .nav-link.active {
  color: var(--pv-primary);
  background: var(--pv-primary-soft);
}

/* Tienda: comparte controles, radios y superficies sin invadir el diseño
   editorial propio de catálogo, documentos o detalle de producto. */
.app-storefront .form-control,
.app-storefront .form-select {
  border-color: #d0d5dd;
  border-radius: var(--pv-radius-sm);
}
.app-storefront .form-control:focus,
.app-storefront .form-select:focus {
  border-color: #84adff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.app-storefront .btn { border-radius: var(--pv-radius-sm); font-weight: 700; }

@media (max-width: 767.98px) {
  .app-admin .main-content { padding-bottom: 1rem; }
  .app-admin .container-fluid { padding-right: .8rem; padding-left: .8rem; }
  .app-admin .pv-page-header-slot { padding: .65rem .75rem 0; }
  .app-admin .pv-page-header-slot > * {
    align-items: stretch !important;
    flex-direction: column;
    min-height: 0;
    padding: .9rem !important;
  }
  .app-admin .pv-page-header-slot > * > div:last-child:not(:first-child) {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .app-admin .pv-page-header-slot .btn { width: 100%; }
  .app-admin .pv-page-content { padding: .75rem; }
  .app-admin .content-header { padding: .85rem 0 !important; margin-bottom: .75rem !important; }
  .app-admin .content-header h1,
  .app-admin .content-header h2,
  .app-admin .content-header h3,
  .app-admin .content-header h4 { font-size: 1.25rem !important; }
  .app-admin .content-header > .container-fluid > .d-flex,
  .app-admin .content-header > .d-flex {
    align-items: stretch !important;
    flex-direction: column;
    gap: .75rem;
  }
  .app-admin .content-header .btn { width: 100%; }
  .app-admin .card { border-radius: 10px !important; }
  .app-admin .card-body { padding: .9rem; }
  .app-admin .dataTables_filter,
  .app-admin .dataTables_filter label { width: 100%; justify-content: stretch; }
  .app-admin .dataTables_filter input[type="search"] { width: 100%; }
  .app-admin .dataTables_length,
  .app-admin .dataTables_info,
  .app-admin .dataTables_paginate { font-size: .72rem; }
  .app-admin .table > thead > tr > th,
  .app-admin .table > tbody > tr > td { padding: .65rem .7rem; }
  .app-admin .product-form-shell { padding: .55rem; }
  .app-admin .product-form-section { padding: 1rem .85rem .35rem; }
  .app-admin .section-heading p { display: none; }
}