/* ============================================================
   THEME - Espacio Seguro Mercadazo
   Paleta institucional naranja + azul
   ============================================================ */

/* ---- Tipografía Inter (autohospedada) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter/Inter-Bold.woff2') format('woff2');
}

/* ============================================================
   1. VARIABLES DE MARCA
   ============================================================ */
:root {
  /* Naranja Mercadazo (acción, energía) */
  --mz-orange-50:  #FFF4ED;
  --mz-orange-100: #FFE5D2;
  --mz-orange-200: #FFCCA5;
  --mz-orange-300: #FFAA70;
  --mz-orange-400: #FF8B40;
  --mz-orange-500: #FF6B1A;   /* primario */
  --mz-orange-600: #E85710;
  --mz-orange-700: #BF430C;
  --mz-orange-800: #8C300A;

  /* Azul Mercadazo (institucional, confianza) */
  --mz-blue-50:  #E6F0F8;
  --mz-blue-100: #C2DAEC;
  --mz-blue-200: #8FBADC;
  --mz-blue-300: #5C9ACC;
  --mz-blue-400: #2E7FBF;
  --mz-blue-500: #0F4C81;     /* primario */
  --mz-blue-600: #0C3F6C;
  --mz-blue-700: #0A3357;
  --mz-blue-800: #062340;

  /* Neutros */
  --mz-gray-50:  #F8F9FA;
  --mz-gray-100: #F1F3F5;
  --mz-gray-200: #E9ECEF;
  --mz-gray-300: #DEE2E6;
  --mz-gray-400: #CED4DA;
  --mz-gray-500: #ADB5BD;
  --mz-gray-600: #6C757D;
  --mz-gray-700: #495057;
  --mz-gray-800: #343A40;
  --mz-gray-900: #212529;

  /* Estados */
  --mz-success: #1B9E5C;
  --mz-success-bg: #E3F5EC;
  --mz-warning: #E8A317;
  --mz-warning-bg: #FFF6DD;
  --mz-danger:  #D6392E;
  --mz-danger-bg: #FBE5E3;
  --mz-info:    #2E7FBF;
  --mz-info-bg: #E6F0F8;

  /* Tipografía base */
  --mz-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sombras */
  --mz-shadow-sm: 0 1px 2px rgba(15, 76, 129, 0.06);
  --mz-shadow:    0 2px 8px rgba(15, 76, 129, 0.08);
  --mz-shadow-md: 0 6px 20px rgba(15, 76, 129, 0.10);
  --mz-shadow-lg: 0 12px 40px rgba(15, 76, 129, 0.12);

  /* Radios */
  --mz-radius-sm: .375rem;
  --mz-radius:    .5rem;
  --mz-radius-lg: .75rem;
  --mz-radius-xl: 1rem;
}

/* ============================================================
   2. OVERRIDE DE VARIABLES BOOTSTRAP 5
   ============================================================ */
:root {
  /* Bootstrap mappings */
  --bs-primary:        var(--mz-blue-500);
  --bs-primary-rgb:    15, 76, 129;
  --bs-secondary:      var(--mz-orange-500);
  --bs-secondary-rgb:  255, 107, 26;

  --bs-success:        var(--mz-success);
  --bs-info:           var(--mz-info);
  --bs-warning:        var(--mz-warning);
  --bs-danger:         var(--mz-danger);

  --bs-light:          var(--mz-gray-50);
  --bs-dark:           var(--mz-blue-700);

  --bs-body-font-family: var(--mz-font-sans);
  --bs-body-color:       var(--mz-gray-800);
  --bs-body-bg:          #FFFFFF;

  --bs-link-color:        var(--mz-blue-500);
  --bs-link-hover-color:  var(--mz-blue-700);

  --bs-border-color:      var(--mz-gray-200);
  --bs-border-radius:     var(--mz-radius);
  --bs-border-radius-sm:  var(--mz-radius-sm);
  --bs-border-radius-lg:  var(--mz-radius-lg);
}

/* ============================================================
   3. RESET Y BASE
   ============================================================ */
html, body {
  height: 100%;
}
body {
  font-family: var(--mz-font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mz-gray-800);
  background-color: var(--mz-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mz-font-sans);
  font-weight: 700;
  color: var(--mz-blue-700);
  letter-spacing: -.01em;
}
.lead { font-weight: 400; color: var(--mz-gray-700); }
strong, b { font-weight: 600; }

/* ============================================================
   4. BOTONES PERSONALIZADOS
   ============================================================ */
.btn {
  font-weight: 500;
  letter-spacing: .01em;
  transition: all .15s ease;
}
.btn-primary {
  --bs-btn-bg:        var(--mz-blue-500);
  --bs-btn-border-color: var(--mz-blue-500);
  --bs-btn-hover-bg:  var(--mz-blue-600);
  --bs-btn-hover-border-color: var(--mz-blue-600);
  --bs-btn-active-bg: var(--mz-blue-700);
  --bs-btn-active-border-color: var(--mz-blue-700);
  --bs-btn-disabled-bg: var(--mz-blue-300);
  --bs-btn-disabled-border-color: var(--mz-blue-300);
}
.btn-secondary,
.btn-orange {
  --bs-btn-color:     #fff;
  --bs-btn-bg:        var(--mz-orange-500);
  --bs-btn-border-color: var(--mz-orange-500);
  --bs-btn-hover-bg:  var(--mz-orange-600);
  --bs-btn-hover-border-color: var(--mz-orange-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mz-orange-700);
  --bs-btn-active-border-color: var(--mz-orange-700);
  --bs-btn-active-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color:        var(--mz-blue-500);
  --bs-btn-border-color: var(--mz-blue-500);
  --bs-btn-hover-bg:     var(--mz-blue-500);
  --bs-btn-hover-border-color: var(--mz-blue-500);
}
.btn-outline-orange {
  --bs-btn-color:        var(--mz-orange-600);
  --bs-btn-border-color: var(--mz-orange-500);
  --bs-btn-hover-bg:     var(--mz-orange-500);
  --bs-btn-hover-border-color: var(--mz-orange-500);
  --bs-btn-hover-color:  #fff;
}
.btn-lg {
  padding: .85rem 1.6rem;
  font-size: 1.05rem;
  border-radius: var(--mz-radius-lg);
}

/* ============================================================
   5. FORMULARIOS
   ============================================================ */
.form-control,
.form-select {
  border-color: var(--mz-gray-300);
  border-radius: var(--mz-radius);
  padding: .65rem .9rem;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mz-blue-400);
  box-shadow: 0 0 0 .2rem rgba(15, 76, 129, .15);
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--mz-danger);
}
.form-label {
  font-weight: 500;
  color: var(--mz-gray-700);
  margin-bottom: .35rem;
}

/* ============================================================
   5b. CHECKBOXES Y RADIO BUTTONS (más visibles + color marca)
   ============================================================ */
.form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: .2em;
  border: 2px solid var(--mz-gray-400);
  background-color: #fff;
  cursor: pointer;
  transition: all .15s ease;
}
.form-check-input:hover {
  border-color: var(--mz-orange-400);
}
.form-check-input:focus {
  border-color: var(--mz-orange-400);
  box-shadow: 0 0 0 .2rem rgba(255, 107, 26, .2);
}
.form-check-input:checked {
  background-color: var(--mz-orange-500);
  border-color: var(--mz-orange-500);
}
.form-check-input[type="radio"]:checked {
  background-color: var(--mz-orange-500);
  border-color: var(--mz-orange-500);
}
.form-check-label {
  cursor: pointer;
  user-select: none;
  padding-left: .15em;
}
.form-check {
  padding-left: 1.85em;
}
.form-check .form-check-input {
  margin-left: -1.85em;
}

/* ============================================================
   6. CARDS
   ============================================================ */
.card {
  border: 1px solid var(--mz-gray-200);
  border-radius: var(--mz-radius-lg);
  box-shadow: var(--mz-shadow-sm);
}
.card-header {
  background-color: var(--mz-gray-50);
  border-bottom: 1px solid var(--mz-gray-200);
  font-weight: 600;
}

/* ============================================================
   7. ALERTAS
   ============================================================ */
.alert {
  border: 0;
  border-radius: var(--mz-radius);
  padding: 1rem 1.15rem;
  font-size: .95rem;
}
.alert-success { background: var(--mz-success-bg); color: #0E5C36; }
.alert-warning { background: var(--mz-warning-bg); color: #7A5A0F; }
.alert-danger  { background: var(--mz-danger-bg);  color: #8A1B14; }
.alert-info    { background: var(--mz-info-bg);    color: var(--mz-blue-700); }

/* ============================================================
   8. BADGES DE ESTATUS (para denuncias / dudas)
   ============================================================ */
.badge-status {
  display: inline-block;
  padding: .35em .7em;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge-pending     { background: var(--mz-warning-bg); color: #7A5A0F; }
.badge-in-review   { background: var(--mz-info-bg);    color: var(--mz-blue-700); }
.badge-in-progress { background: #E6E1FF;              color: #4A37A8; }
.badge-resolved    { background: var(--mz-success-bg); color: #0E5C36; }
.badge-rejected    { background: var(--mz-danger-bg);  color: #8A1B14; }

/* ============================================================
   9. NAVBAR INSTITUCIONAL
   ============================================================ */
.navbar-mz {
  background: var(--mz-blue-500);
  box-shadow: var(--mz-shadow);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.navbar-mz .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.navbar-mz .navbar-brand img {
  height: 36px;
  width: auto;
}
.navbar-mz .nav-link {
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  padding: .5rem 1rem !important;
  border-radius: var(--mz-radius-sm);
  transition: background .15s;
}
.navbar-mz .nav-link:hover,
.navbar-mz .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.navbar-mz .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
/* Ícono escudo solo (visitantes) */
.navbar-mz .nav-shield-only {
  font-size: 1.15rem;
  padding: .5rem .75rem !important;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.navbar-mz .nav-shield-only:hover {
  background: rgba(255,255,255,.15);
}
.navbar-mz .navbar-toggler {
  border-color: rgba(255, 255, 255, .3);
}
.navbar-mz .navbar-toggler-icon {
  filter: invert(1);
}
.navbar-mz .dropdown-menu {
  border: 0;
  box-shadow: var(--mz-shadow-md);
  border-radius: var(--mz-radius);
  padding: .35rem;
}
.navbar-mz .dropdown-item {
  border-radius: var(--mz-radius-sm);
  padding: .5rem .85rem;
  font-size: .92rem;
}
.navbar-mz .dropdown-item:hover {
  background: var(--mz-blue-50);
  color: var(--mz-blue-700);
}

/* Banda decorativa naranja inferior del navbar */
.navbar-mz-band {
  height: 4px;
  background: linear-gradient(90deg, var(--mz-orange-500) 0%, var(--mz-orange-400) 100%);
}

/* ============================================================
   10. FOOTER
   ============================================================ */
.footer-mz {
  background: var(--mz-blue-700);
  color: rgba(255, 255, 255, .85);
  padding: 2rem 0 1.25rem;
  margin-top: 3rem;
}
.footer-mz a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer-mz a:hover { color: #fff; }
.footer-mz .footer-tagline {
  font-weight: 600;
  color: #fff;
}
.footer-mz .footer-divider {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin: 1.25rem 0 .85rem;
}
.footer-mz .small-muted {
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
}

/* ============================================================
   11. UTILIDADES MZ
   ============================================================ */
.text-orange   { color: var(--mz-orange-500) !important; }
.text-mz-blue  { color: var(--mz-blue-500) !important; }
.bg-orange     { background-color: var(--mz-orange-500) !important; color: #fff; }
.bg-orange-soft{ background-color: var(--mz-orange-50)  !important; }
.bg-blue       { background-color: var(--mz-blue-500)   !important; color: #fff; }
.bg-blue-soft  { background-color: var(--mz-blue-50)    !important; }
.bg-gray-soft  { background-color: var(--mz-gray-50)    !important; }

.shadow-mz     { box-shadow: var(--mz-shadow) !important; }
.shadow-mz-md  { box-shadow: var(--mz-shadow-md) !important; }
.shadow-mz-lg  { box-shadow: var(--mz-shadow-lg) !important; }

.rounded-mz    { border-radius: var(--mz-radius) !important; }
.rounded-mz-lg { border-radius: var(--mz-radius-lg) !important; }
.rounded-mz-xl { border-radius: var(--mz-radius-xl) !important; }