/* ==========================================================================
   MATERIAL · Capa base de Saborator (reemplaza a Bootstrap)
   --------------------------------------------------------------------------
   · Reset mínimo, rejilla de 12 columnas y utilidades que usan las vistas.
   · Componentes de Material Design 3: campos, alertas, modales, spinner.
   · Todos los colores salen de los tokens de theme.css / tokens.css.
   Se carga ANTES de site/theme/app para que el CSS propio pueda sobrescribirla.
   ========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: 1.5; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid currentColor; opacity: .2; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 1rem; }
ol, ul { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
b, strong { font-weight: bolder; }
small { font-size: .875em; }
a { color: var(--ink, #6B4226); text-decoration: underline; }
a:hover { filter: brightness(.9); }
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; text-align: -webkit-match-parent; }
label { display: inline-block; }
button { border-radius: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
button:not(:disabled), [role="button"] { cursor: pointer; }
textarea { resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

/* ── Contenedor y rejilla (12 columnas) ────────────────────────────────── */
.container, .container-fluid { width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row { --gx: 1.5rem; --gy: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--gy)); margin-right: calc(-.5 * var(--gx)); margin-left: calc(-.5 * var(--gx)); }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--gx) * .5); padding-left: calc(var(--gx) * .5); margin-top: var(--gy); }
.g-2 { --gx: .5rem; --gy: .5rem; }
.g-3 { --gx: 1rem; --gy: 1rem; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
  .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
}
@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

/* ── Utilidades ────────────────────────────────────────────────────────── */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
@media (min-width: 992px) { .justify-content-lg-end { justify-content: flex-end !important; } }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; }
.mt-auto { margin-top: auto !important; }
.ms-1 { margin-left: .25rem !important; }
.p-2 { padding: .5rem !important; } .p-4 { padding: 1.5rem !important; }
.px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-3 { padding-top: 1rem !important; } .pb-3 { padding-bottom: 1rem !important; }
@media (min-width: 768px) { .pt-md-4 { padding-top: 1.5rem !important; } }
.text-center { text-align: center !important; }
.text-danger { color: var(--danger, #D6453D) !important; }
.small { font-size: .875em; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.rounded-3 { border-radius: .5rem !important; }
.border-bottom { border-bottom: 1px solid var(--line, #E8DFD0) !important; }

/* ── Formularios (campos tipo MD3) ─────────────────────────────────────── */
.form-label { margin-bottom: .5rem; }
.form-control, .form-select {
  display: block; width: 100%; padding: .5rem .85rem; font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: var(--text); background-color: var(--surface); background-clip: padding-box;
  border: 1px solid var(--line-2, #D9C197); border-radius: 12px; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--faint); opacity: 1; }
.form-control:focus, .form-select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(244, 201, 93, .35); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-2); opacity: 1; }
.form-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B5A52' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}
.form-control-sm, .form-select-sm { padding: .25rem .6rem; font-size: .875rem; border-radius: 10px; }
.form-check-input { width: 1.1em; height: 1.1em; margin-top: .2em; vertical-align: top; accent-color: var(--brand); }
.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-text { display: flex; align-items: center; padding: .5rem .85rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2, #D9C197); }
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── Botones base ──────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .5rem 1.1rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); user-select: none;
  transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:disabled, .btn.disabled { pointer-events: none; opacity: .55; }
.btn-sm { padding: .3rem .8rem; font-size: .875rem; }
.btn-primary { color: var(--on-brand, #fff); background-color: var(--brand); }
.btn-primary:hover { background-color: var(--brand-hover); }
.btn-danger { color: #fff; background-color: var(--danger); }
.btn-danger:hover { filter: brightness(.92); }

/* ── Alertas ───────────────────────────────────────────────────────────── */
.alert { position: relative; padding: .9rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 12px; }
.alert-success { color: var(--success); background: var(--success-bg); border-color: rgba(42, 115, 72, .25); }
.alert-danger { color: var(--danger-ink); background: var(--danger-bg); border-color: rgba(214, 69, 61, .25); }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.1rem 1rem; }
.btn-close {
  box-sizing: content-box; width: 1em; height: 1em; padding: .25em; color: inherit; border: 0; border-radius: 50%; opacity: .6;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e") center / 1em no-repeat content-box;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e") center / 1em no-repeat content-box;
}
.btn-close:hover { opacity: 1; }
.btn-close:focus-visible { outline: 3px solid rgba(244, 201, 93, .6); opacity: 1; }
.badge { display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 999px; }

/* ── Spinner ───────────────────────────────────────────────────────────── */
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: md-spin .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes md-spin { to { transform: rotate(360deg); } }

/* ── Diálogos modales (MD3: esquinas grandes y scrim) ──────────────────── */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.modal { position: fixed; inset: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal.show { display: block; }
.modal-dialog { position: relative; width: auto; max-width: 500px; margin: 1.75rem auto; pointer-events: none; }
.modal.fade .modal-dialog { transform: translateY(24px) scale(.97); transition: transform .25s cubic-bezier(.2, .9, .3, 1.1); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); outline: 0; overflow: hidden; }
.modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.modal-title { margin: 0; line-height: 1.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.2rem 1.4rem; }
.modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: .5rem; padding: .85rem 1.4rem; border-top: 1px solid var(--line); }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: var(--overlay, rgba(24, 16, 18, .55)); }
.modal-backdrop.fade { transition: opacity .15s linear; }
html.modal-open { overflow: hidden; }

/* ── Utilidades adicionales (paneles de Fidelización y Mi panel) ─────────── */
.d-block { display: block !important; }
.text-decoration-none, .text-decoration-none:hover { text-decoration: none !important; }
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
}
@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
}