/* ============================================================================
   PERFUMERÍA AMALIA — BRAND / DESIGN-SYSTEM OVERRIDE LAYER
   ----------------------------------------------------------------------------
   Runtime source of truth for the brand palette (mirror of
   resources/assets/sass/_brand.scss, but as CSS custom properties).
   Load this file LAST (after style.css / responsive.css) from the layout so it
   can harmonise both the HTML template and Bootstrap 3 components.

   Palette:
     Primary #CD2D69 · Oz #00BDA5 · Thunderdome #6A78D1 · Candy Apple #F2545B
     Norman #F2547D · Sorbet #FF8F59 · Marigold #F5C26B
     Greys: Flat Earth #253342 · Pantera #2D3E50 · Obsidian #33475B
            Heffalump #425B76 · Slinky #516F90 · Eerie #7C98B6
            LG1 #808285 · LG2 #A7A9AC · LG3 #BCBEC0 · LG4 #D1D3D4 · LG5 #E6E7E8
   ========================================================================== */

/* ============================================================================
   MONTSERRAT — SELF-HOSTED (brand guideline: Montserrat is the only typeface)
   Files: public/asset/fonts/Montserrat/  (SIL OFL 1.1, see OFL.txt)
   ========================================================================== */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; font-display: swap; src: url('../fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; font-display: swap; src: url('../fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; font-display: swap; src: url('../fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/Montserrat/Montserrat-Black.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; font-display: swap; src: url('../fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype'); }

:root {
  --primary:            #CD2D69;
  --primary-dark:       #b11f56;
  --primary-darker:     #961a49;
  --primary-soft:       #fbe9f0;
  --primary-rgb:        205, 45, 105;

  --oz:                 #00BDA5;
  --oz-dark:            #009f8b;
  --oz-soft:            #e0f7f3;
  --thunderdome:        #6A78D1;
  --thunderdome-dark:   #5563c5;
  --thunderdome-soft:   #eceffb;
  --candy-apple:        #F2545B;
  --candy-apple-dark:   #d63f47;
  --candy-apple-soft:   #fde9ea;
  --norman:             #F2547D;
  --sorbet:             #FF8F59;
  --sorbet-dark:        #e07b45;
  --sorbet-soft:        #fff2e7;
  --marigold:           #F5C26B;
  --marigold-soft:      #fdf3dd;

  --flat-earth:         #253342;
  --pantera:            #2D3E50;
  --obsidian:           #33475B;
  --heffalump:          #425B76;
  --slinky:             #516F90;
  --eerie:              #7C98B6;

  --grey-1:             #808285;
  --grey-2:             #A7A9AC;
  --grey-3:             #BCBEC0;
  --grey-4:             #D1D3D4;
  --grey-5:             #E6E7E8;
  --white:              #FFFFFF;

  --bg-soft:            #f6f8fa;
  --text-color:         var(--pantera);
  --heading-color:      var(--flat-earth);
  --muted-color:        var(--eerie);
  --border-color:       var(--grey-4);
  --border-light:       var(--grey-5);

  --brand-radius:       6px;
  --brand-shadow:       0 1px 3px rgba(37, 51, 66, 0.08), 0 4px 14px rgba(37, 51, 66, 0.06);
}

/* ---------------------------------------------------------------------------
   1. Base · links (plain anchors get the brand colour; components keep theirs)
   ------------------------------------------------------------------------- */
a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-darker); }

/* ---------------------------------------------------------------------------
   2. Buttons — Bootstrap semantic colours -> brand palette
   ------------------------------------------------------------------------- */
.btn {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
              color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--primary-dark);
  border-color: var(--primary-darker);
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

.btn-info {
  background-color: var(--thunderdome);
  border-color: var(--thunderdome-dark);
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-color: var(--thunderdome-dark);
  border-color: #4552ab;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover {
  background-color: var(--thunderdome);
  border-color: var(--thunderdome-dark);
}

.btn-success {
  background-color: var(--oz);
  border-color: var(--oz-dark);
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-color: var(--oz-dark);
  border-color: #007f6f;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover {
  background-color: var(--oz);
  border-color: var(--oz-dark);
}

.btn-danger {
  background-color: var(--candy-apple);
  border-color: var(--candy-apple-dark);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-color: var(--candy-apple-dark);
  border-color: #bb3038;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover {
  background-color: var(--candy-apple);
  border-color: var(--candy-apple-dark);
}

.btn-warning {
  background-color: var(--sorbet);
  border-color: var(--sorbet-dark);
  color: var(--flat-earth);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-color: var(--sorbet-dark);
  border-color: #c96a37;
  color: var(--flat-earth);
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover {
  background-color: var(--sorbet);
  border-color: var(--sorbet-dark);
  color: var(--flat-earth);
}

.btn-default {
  background-color: var(--white);
  border-color: var(--grey-4);
  color: var(--heffalump);
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-color: var(--grey-5);
  border-color: var(--grey-3);
  color: var(--flat-earth);
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover {
  background-color: var(--white);
  border-color: var(--grey-4);
  color: var(--heffalump);
}

.btn-link { color: var(--primary); }
.btn-link:hover, .btn-link:focus { color: var(--primary-darker); }

/* Outline variants (brand helpers) */
.btn-outline-primary,
.btn-outline-primary:focus {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ---------------------------------------------------------------------------
   3. Alerts — brand tints + polished look
   ------------------------------------------------------------------------- */
.alert {
  border-radius: var(--brand-radius);
  border-width: 1px;
  padding: 14px 18px;
  position: relative;
}
.alert .close { opacity: 0.45; }

/* Bootstrap 3.4 coloca la «X» con "position: relative; right: -21px", contando
   con su padding de 15px. El alert de la marca usa 18px, así que la X quedaba
   ~3px FUERA del cuadro (se veía descolocada en todas las vistas). Se ancla
   dentro del padding y alineada con la primera línea de texto. */
.alert-dismissible,
.alert-dismissable {
  padding-right: 46px;
}

.alert-dismissible > .close,
.alert-dismissable > .close {
  color: inherit;
  line-height: 1;
  opacity: 0.45;
  padding: 13px 18px;
  position: absolute;
  right: 0;
  top: 0;
}

.alert-dismissible > .close:hover,
.alert-dismissible > .close:focus,
.alert-dismissable > .close:hover,
.alert-dismissable > .close:focus {
  opacity: 0.85;
}

.alert-success {
  background-color: var(--oz-soft);
  border-color: #b5ebe2;
  color: #0b7263;
}
.alert-success a { color: #0b5e53; font-weight: 600; }

.alert-info {
  background-color: var(--thunderdome-soft);
  border-color: #ccd3f2;
  color: #434f96;
}
.alert-info a { color: #3a4483; font-weight: 600; }

.alert-warning {
  background-color: var(--sorbet-soft);
  border-color: #ffd3ae;
  color: #a55a26;
}
.alert-warning a { color: #8f4d1e; font-weight: 600; }

.alert-danger {
  background-color: var(--candy-apple-soft);
  border-color: #f6c2c6;
  color: #a8323a;
}
.alert-danger a { color: #8f2a31; font-weight: 600; }

/* ---------------------------------------------------------------------------
   4. Tables
   ------------------------------------------------------------------------- */
.table > thead > tr > th {
  background-color: var(--bg-soft);
  border-bottom: 2px solid var(--border-color);
  color: var(--heading-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--grey-5);
  color: var(--text-color);
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f1f5f8;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f7f9fb;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--grey-5);
}

/* ---------------------------------------------------------------------------
   5. Forms
   ------------------------------------------------------------------------- */
.form-control {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: none;
  color: var(--pantera);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.form-control::placeholder { color: var(--grey-2); }

.form-group label,
.control-label {
  color: var(--heffalump);
  font-weight: 600;
}

.input-group-addon {
  background-color: var(--bg-soft);
  border-color: var(--border-color);
  color: var(--slinky);
}

.has-error .form-control,
.has-error .form-control:focus { border-color: var(--candy-apple); }
.has-error .control-label,
.has-error .help-block { color: var(--candy-apple); }

.has-success .form-control,
.has-success .form-control:focus { border-color: var(--oz); }
.has-success .control-label,
.has-success .help-block { color: var(--oz-dark); }

/* ---------------------------------------------------------------------------
   6. Panels / wells
   ------------------------------------------------------------------------- */
.panel {
  border-color: var(--grey-5);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow);
}

.panel-default > .panel-heading {
  background-color: var(--obsidian);
  border-color: var(--obsidian);
  color: var(--white);
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: var(--grey-5);
}

.panel-title { font-size: 15px; }
.panel-title a,
.panel-title a:hover { color: var(--white); }
.panel-title a i { color: var(--oz) !important; }

.well {
  background-color: var(--bg-soft);
  border: 1px solid var(--grey-5);
  border-radius: var(--brand-radius);
  box-shadow: none;
}

/* Sub-panel embebido (p. ej. “Ingresar nueva dirección” en el asistente de
   cliente externo de envíos): borde fino con los colores del sistema y aire
   interno, para que el formulario no quede pegado al marco. */
.app-subpanel {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--brand-radius);
  margin-top: 18px;
  padding: 18px 20px 6px;
}

/* ---------------------------------------------------------------------------
   7. Modals
   ------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--brand-radius);
  box-shadow: 0 10px 30px rgba(37, 51, 66, 0.18);
}

.modal-header {
  background-color: var(--pantera);
  border-bottom: 3px solid var(--primary);
  border-radius: var(--brand-radius) var(--brand-radius) 0 0;
  color: var(--white);
  padding: 14px 18px;
}

.modal-title {
  color: var(--white);
  font-weight: 600;
}

.modal-header .close {
  color: var(--white);
  opacity: 0.75;
  text-shadow: none;
}

.modal-header .close:hover { opacity: 1; }

.modal-footer {
  border-top: 1px solid var(--grey-5);
  padding: 12px 18px;
}

/* ---------------------------------------------------------------------------
   8. Progress
   ------------------------------------------------------------------------- */
.progress {
  background-color: var(--grey-5);
  border-radius: 20px;
  height: 8px;
}

.progress-bar {
  background-color: var(--oz);
}

/* ---------------------------------------------------------------------------
   9. Dropdowns (incl. the “Administración” menu in the navbar)
   ------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--white);
  border: 1px solid var(--grey-5);
  border-top: 3px solid var(--primary);
  border-radius: 0 0 var(--brand-radius) var(--brand-radius);
  box-shadow: 0 8px 20px rgba(37, 51, 66, 0.14);
}

.dropdown-menu > li > a,
.navbar-nav .dropdown-menu a {
  color: var(--obsidian);
  display: block;
  font-size: 14px;
  padding: 8px 18px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu a:hover,
.navbar-nav .dropdown-menu a:focus {
  background-color: var(--primary);
  color: var(--white);
}

.navbar-nav .dropdown-menu .glyphicon { margin-right: 8px; }
.navbar-nav .dropdown-menu p { margin: 0; }

/* ---------------------------------------------------------------------------
   10. App content area (internal CRUD pages share layout.blade.php)
   ------------------------------------------------------------------------- */
.app-content { padding-bottom: 48px; }

/* Consistent page titles for every internal view */
.app-content h1,
.app-content h1.page-title {
  border-bottom: 1px solid var(--grey-5);
  color: var(--heading-color);
  font-size: 22px;
  letter-spacing: 0.6px;
  margin: 0 0 26px;
  padding-bottom: 14px;
  position: relative;
}

.app-content h1::after,
.app-content h1.page-title::after {
  background: var(--primary);
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 54px;
}

.app-content h2 { color: var(--heading-color); }
.app-content h3,
.app-content h4,
.app-content h5,
.app-content h6 { color: var(--heffalump); }

.app-content a:not(.btn) { font-weight: 600; }

/* ---------------------------------------------------------------------------
   11. Navbar polish
   ------------------------------------------------------------------------- */
.navbar-top {
  background: var(--white);
  border-bottom: 1px solid var(--grey-5);
}

.navbar-default .navbar-nav > li > a {
  border-top: 3px solid transparent;
}

/* ---------------------------------------------------------------------------
   12. Footer / copyright (brand slate ramp)
   ------------------------------------------------------------------------- */
.footer-section {
  background: var(--flat-earth);
  border-bottom: 1px solid var(--pantera);
}

.footer-section .section-title { color: var(--white); }

.footer-section .section-heading-2 span::after,
.footer-section .section-heading-2 .section-title::after {
  background: var(--primary);
}

.footer-address ul li .fa { color: var(--oz); }
.footer-address ul li a { color: var(--grey-3); }
.footer-address ul li a:hover { color: var(--white); }

.copyright-section {
  background: var(--pantera);
  border-top: 1px solid var(--obsidian);
  color: var(--grey-3);
}

.copyright-section a { color: var(--eerie); }
.copyright-section a:hover { color: var(--white); }

/* ---------------------------------------------------------------------------
   13. Brand utility helpers
   ------------------------------------------------------------------------- */
.text-primary, .text-brand { color: var(--primary) !important; }
.text-oz { color: var(--oz) !important; }
.text-thunderdome { color: var(--thunderdome) !important; }
.text-candy { color: var(--candy-apple) !important; }
.text-sorbet { color: var(--sorbet) !important; }
.text-marigold { color: var(--marigold) !important; }
.text-slate { color: var(--obsidian) !important; }
.text-muted-brand { color: var(--eerie) !important; }

.bg-primary { background-color: var(--primary) !important; color: var(--white) !important; }
.bg-oz { background-color: var(--oz) !important; color: var(--white) !important; }
.bg-thunderdome { background-color: var(--thunderdome) !important; color: var(--white) !important; }
.bg-pantera { background-color: var(--pantera) !important; color: var(--white) !important; }
.bg-obsidian { background-color: var(--obsidian) !important; color: var(--white) !important; }

/* ---------------------------------------------------------------------------
   14. Small responsiveness helpers for internal pages
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .app-content h1,
  .app-content h1.page-title {
    font-size: 19px;
  }

  .table-responsive { border: none; }
}

/* ---------------------------------------------------------------------------
   15. Auth pages — centered brand cards (login / password request / reset)
   ------------------------------------------------------------------------- */
.auth-page {
  padding: 30px 0 10px;
}

.auth-card.panel {
  border: 1px solid var(--grey-5);
  border-radius: var(--brand-radius);
  box-shadow: 0 12px 40px rgba(37, 51, 66, 0.16);
  overflow: hidden;
}

.auth-card > .panel-heading.auth-heading {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
  border: none;
  color: var(--white);
  padding: 30px 24px 24px;
  text-align: center;
}

.auth-icon {
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: var(--white);
  display: block;
  font-size: 24px;
  height: 64px;
  line-height: 58px;
  margin: 0 auto 14px;
  text-align: center;
  width: 64px;
}

.auth-title {
  color: var(--white) !important;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  text-transform: none;
}

.auth-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin: 6px 0 0;
}

.auth-card .panel-body {
  padding: 30px;
}

.auth-card .form-control {
  height: 44px;
}

.auth-card .btn-lg {
  border-radius: 4px;
  font-size: 16px;
  letter-spacing: 0.5px;
  margin-top: 6px;
  padding: 12px 16px;
}

.auth-card .panel-footer {
  background: var(--white);
  border-top: 1px solid var(--grey-5);
  font-size: 13px;
  padding: 16px 24px;
  text-align: center;
}

.auth-card .alert ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

/* ---------------------------------------------------------------------------
   16. CRUD action bar helpers (shared patterns across module pages)
   ------------------------------------------------------------------------- */
/* “Nuevo / New” primary action (index pages) */
a#nuevo.btn {
  background-color: var(--primary);
  border-color: var(--primary-dark);
  color: var(--white);
}
a#nuevo.btn:hover,
a#nuevo.btn:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-darker);
  color: var(--white);
}

/* Breathing room below the "Nuevo …" action so it is not glued to the table
   or to the input/field that follows. */
a#nuevo.btn,
a#nuevoEnvio.btn {
  margin-bottom: 14px;
}

/* “Volver / Back” secondary action (forms) */
a#volver.btn {
  background-color: transparent;
  border-color: var(--grey-4);
  color: var(--heffalump);
}
a#volver.btn:hover,
a#volver.btn:focus {
  background-color: var(--grey-5);
  border-color: var(--grey-3);
  color: var(--flat-earth);
}

/* Submit/back bars that reuse .form-control + .btn keep their look but with
   correct brand text/border contrast */
.form-control.btn { box-shadow: none; }

.form-control.btn.btn-primary,
.form-control.btn.btn-primary:hover,
.form-control.btn.btn-primary:focus {
  border-color: var(--primary-dark);
  color: var(--white);
}

.form-control.btn.btn-info,
.form-control.btn.btn-info:hover,
.form-control.btn.btn-info:focus {
  border-color: var(--thunderdome-dark);
  color: var(--white);
}

.form-control.btn.btn-success,
.form-control.btn.btn-success:hover,
.form-control.btn.btn-success:focus {
  border-color: var(--oz-dark);
  color: var(--white);
}

.form-control.btn.btn-danger,
.form-control.btn.btn-danger:hover,
.form-control.btn.btn-danger:focus {
  border-color: var(--candy-apple-dark);
  color: var(--white);
}

.form-control.btn.btn-warning,
.form-control.btn.btn-warning:hover,
.form-control.btn.btn-warning:focus {
  border-color: var(--sorbet-dark);
  color: var(--flat-earth);
}

.form-control.btn.btn-default,
.form-control.btn.btn-default:hover,
.form-control.btn.btn-default:focus {
  border-color: var(--grey-4);
  color: var(--heffalump);
}

/* ---------------------------------------------------------------------------
   17. Navbar · menú desplegable "Administración"
   Toggler vanilla (js) que alterna la clase .open en el <li>; aquí solo lo
   mostramos. Independiente de jQuery/Bootstrap para que nunca se quede "pegado".
   ------------------------------------------------------------------------- */
.navbar-nav > li.nav-link {
  position: relative;
}
.navbar-nav > li.nav-link.open > .dropdown-menu {
  display: block;
  visibility: visible;
  opacity: 1;
}
.navbar-nav > li.nav-link > .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  z-index: 1000;
  display: none;
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 8px 0;
  background: var(--white);
  border: 1px solid var(--grey-4);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(37, 51, 66, 0.18);
  transition: opacity 0.12s ease-in-out;
}
.navbar-nav > li.nav-link > .dropdown-menu .dropdown-item {
  color: var(--pantera);
  display: block;
  padding: 6px 16px;
  text-decoration: none;
}
.navbar-nav > li.nav-link > .dropdown-menu .dropdown-item:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* ---------------------------------------------------------------------------
   18. Base typography — Montserrat (brand guideline: only typeface)
   ------------------------------------------------------------------------- */
body {
  background-color: var(--bg-soft);
  color: var(--text-color);
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.app-content h1,
.app-content h1.page-title {
  font-size: 24px;
  font-weight: 700;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.active,
.navbar-default .navbar-nav > li:hover > a {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.btn,
.form-control,
.input-group-addon,
.dropdown-menu,
.panel,
.modal-content {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

::selection {
  background-color: var(--primary);
  color: var(--white);
}

/* ---------------------------------------------------------------------------
   19. Navbar · brand logo image (replaces the old “Amalia” text)
   ------------------------------------------------------------------------- */
.navbar-top {
  min-height: 68px;
  padding-left: 24px;               /* clear space between the logo and the viewport edge */
}

a.navbar-brand,
.navbar-brand.brand-logo {
  font-family: inherit;             /* neutralise the template's Kaushan Script */
  color: var(--primary) !important;
  font-size: inherit;               /* unused now (image logo), but neutralise */
  padding: 13px 16px 13px 0;        /* clear space at the right of the wordmark */
}

.brand-logo {
  align-items: center;
  display: flex;
}

.brand-logo__img {
  display: block;
  height: 42px;
  width: auto;
}

/* ---------------------------------------------------------------------------
   20. Navbar · nav link polish
   ------------------------------------------------------------------------- */
.navbar-default .navbar-nav > li > a {
  color: var(--obsidian);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a.active {
  background-color: var(--primary-soft);
  border-top-color: var(--primary);
  color: var(--primary-dark);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: var(--primary-soft);
  color: var(--primary-dark);
}

/* Mobile toggle */
.navbar-toggle,
.navbar-default .navbar-toggle {
  background-color: transparent;
  border: none;
}
.navbar-toggle:hover,
.navbar-toggle:focus,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--primary-soft);
}
/* Bootstrap bars use .icon-bar spans; this template uses <i class="fa fa-bars">.
   Only paint a background on the bars, and a colour on the icon glyph, so the
   hamburger does not turn into a solid square. */
.navbar-toggle .icon-bar {
  background-color: var(--primary);
}
.navbar-toggle .fa,
.navbar-toggle .glyphicon {
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
   21. Hero / banner (public landing pages)
   ------------------------------------------------------------------------- */
.banner {
  background-color: var(--pantera);
}
.banner .overlay {
  background: linear-gradient(135deg, rgba(205, 45, 105, 0.92) 0%, rgba(150, 26, 73, 0.95) 100%);
}
.banner .intro-text h1,
.banner .intro-text h1 span,
.banner .intro-text p {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.banner .intro-text h1 {
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   22. Bootstrap utility surfaces -> brand palette
   ------------------------------------------------------------------------- */
.label { border-radius: 3px; }
.label-default { background-color: var(--grey-4); color: var(--flat-earth); }
.label-primary { background-color: var(--primary); }
.label-success { background-color: var(--oz); }
.label-info    { background-color: var(--thunderdome); }
.label-warning { background-color: var(--sorbet); }
.label-danger  { background-color: var(--candy-apple); }

.badge { background-color: var(--primary); }
.badge a { color: var(--white); }

.breadcrumb {
  background-color: transparent;
  border-bottom: 1px solid var(--grey-5);
}
.breadcrumb > li + li::before { color: var(--grey-3); }
.breadcrumb > .active { color: var(--eerie); }
.breadcrumb a { color: var(--primary); }

.pagination > li > a,
.pagination > li > span {
  color: var(--obsidian);
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.nav-tabs { border-bottom-color: var(--grey-4); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top: 2px solid var(--primary);
  color: var(--primary-dark);
}

/* ---------------------------------------------------------------------------
   23. Focus / interaction polish
   ------------------------------------------------------------------------- */
.btn:focus,
.btn:active,
a:focus,
a:focus-visible,
.navbar-default .navbar-nav > li > a:focus {
  outline: 3px solid rgba(var(--primary-rgb), 0.25);
  outline-offset: 1px;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* ---------------------------------------------------------------------------
   24. Responsive layer — phones & tablets
   ------------------------------------------------------------------------- */

/* Phones and portrait tablets (<= 991px) ------------------------------------
   The template nests ".container col-md-*" as layout rows. Below the md
   breakpoint those columns are inactive, and the fixed .container width would
   overflow, so we neutralise the nested containers and stack every column. */
@media (max-width: 991px) {
  .container .container {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }

  /* Stack only the md-only grid columns (the template's ".container col-md-*"
     form rows). Elements that also declare col-sm keep their tablet (sm)
     behaviour, so pages already using col-sm (e.g. the login card) are safe. */
  .app-content [class*="col-md-"]:not([class*="col-sm-"]) {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Form action buttons (Guardar / Volver): full width, stacked with space,
     so they never overlap or jump lines. */
  .app-content .btn.form-control {
    display: block;
    margin-bottom: 8px;
    width: 100%;
  }

  /* Table action buttons: keep them on a single row, aligned, without the
     uneven gap that a bottom margin caused when they wrapped. */
  .app-content td .btn {
    margin: 0 4px 0 0;
    vertical-align: middle;
    white-space: nowrap;
  }
  .app-content td form {
    display: inline-block;
    margin: 0 4px 0 0;
    vertical-align: middle;
  }
  .app-content td:has(.btn) { white-space: nowrap; }
}

/* Collapsed navigation — tablets & phones (<= 991px) ----------------------- */
@media (max-width: 991px) {
  /* The menu can carry up to 7 items, so it is collapsed up to the md
     breakpoint instead of only on phones. */
  .navbar-header { float: none; }
  .navbar-right,
  .navbar-nav,
  .navbar-nav > li { float: none !important; }
  .navbar-toggle { display: block; }
  .navbar-collapse.collapse { display: none !important; }
  .navbar-collapse.collapse.in { display: block !important; }
  .collapsing { overflow: hidden !important; }

  .navbar-top {
    min-height: 64px;
    padding-left: 16px;
    padding-right: 16px;
  }
  a.navbar-brand,
  .navbar-brand.brand-logo { padding: 12px 10px 12px 0; }
  .brand-logo__img { height: 34px; }

  .navbar-toggle {
    margin-top: 9px;
    margin-bottom: 9px;
    margin-right: 0;
    padding: 8px 12px;
  }

  /* Collapsed menu panel */
  .navbar-collapse {
    background: var(--white);
    border-top: 1px solid var(--grey-5);
    box-shadow: 0 10px 18px rgba(37, 51, 66, 0.10);
    margin-left: -16px;
    margin-right: -16px;
    margin-top: 8px;
    padding: 6px 16px 14px;
  }

  .navbar-default .navbar-nav { margin: 0 !important; }

  .navbar-default .navbar-nav > li > a {
    border-left: 3px solid transparent;
    border-top: none !important;
    border-radius: 4px;
    padding: 12px 14px;
  }

  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > li > a.active {
    background-color: var(--primary-soft);
    border-left-color: var(--primary);
    border-top-color: transparent;
  }

  /* The "Administración" dropdown flows inside the collapsed menu */
  .navbar-nav > li.nav-link > .dropdown-menu {
    background: var(--bg-soft);
    border: none;
    border-left: 3px solid var(--grey-5);
    border-radius: 0;
    box-shadow: none;
    float: none;
    padding-left: 10px;
    position: static;
    width: auto;
  }
}

/* Phones (<= 767px) -------------------------------------------------------- */
@media (max-width: 767px) {
  /* Inside forms, right-floated actions stack instead of overlapping the
     primary action. */
  .app-content form .pull-right { float: none !important; }

  /* Compact table actions on phones: icon only. The label is kept in the DOM
     (font-size:0) so screen readers still announce it. A fixed line-height is
     required because a 0 font-size would otherwise collapse the line box and
     hide the glyph. */
  .app-content td .btn {
    font-size: 0;
    line-height: 18px;
    padding: 6px 9px;
  }
  .app-content td .btn .glyphicon,
  .app-content td .btn .fa {
    font-size: 14px;
  }

  .navbar-top { min-height: 54px; }
  .brand-logo__img { height: 30px; }
}

/* ---------------------------------------------------------------------------
   25. Clear floats before data tables
   ---------------------------------------------------------------------------
   The action bars ("Nuevo …", the search box, etc.) are floated Bootstrap
   columns. A table wrapped in .table-responsive is a Block Formatting Context
   (overflow-x:auto) and therefore AVOIDS those floats, shrinking to the tiny
   leftover space beside them — which makes the table look as if it had
   disappeared. Clearing the wrapper (and the bare table) keeps tables
   full-width and below the action bar on every viewport.
   ------------------------------------------------------------------------- */
.app-content .table-responsive,
.app-content .table {
  clear: both;
}

/* ---------------------------------------------------------------------------
   26. Page action bar ("Nuevo …", "Guardar / Volver")
   ---------------------------------------------------------------------------
   Right-aligned on every breakpoint (phone / tablet / desktop), with natural
   button widths and consistent spacing before the table or the form fields.
   ------------------------------------------------------------------------- */
.app-content .page-actions {
  margin: 0 0 16px;
  text-align: right;
}

.app-content .page-actions .btn,
.app-content .page-actions a#nuevo.btn,
.app-content .page-actions a#nuevoEnvio.btn {
  display: inline-block;
  margin: 0 0 6px 6px;
  width: auto;
}

/* Los formularios de una sola acción (p. ej. “Confirmar Cliente”) se alinean en
   la misma fila de botones en lugar de caer cada uno en su propia línea. */
.app-content .page-actions form {
  display: inline-block;
  vertical-align: top;
}

/* Grupo de radios del asistente de envíos (.form-check es una clase de Bootstrap
   4, así que no aportaba espaciado): separarlo de los campos que controla. */
.app-content .form-check {
  margin-bottom: 16px;
}

/* Legacy action bars (Bootstrap columns that hold #nuevo / #nuevoEnvio /
   #enviar / #volver): keep them right-aligned instead of full-width/left on
   phones and tablets. */
@media (max-width: 991px) {
  .app-content [class*="col-md-"]:has(> #nuevo),
  .app-content [class*="col-md-"]:has(> #nuevoEnvio),
  .app-content [class*="col-md-"]:has(> #enviar),
  .app-content [class*="col-md-"]:has(> #volver) {
    text-align: right;
  }

  /* Action buttons keep their natural width so they can sit on the right. */
  .app-content .btn.form-control {
    display: inline-block;
    margin-bottom: 6px;
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   27. Button size normalisation + table helpers
   ---------------------------------------------------------------------------
   The template theme sets ".btn-primary { font-size:16px; padding:8px 15px }",
   which makes primary buttons bigger than the rest. Normalise it inside the app
   so every button shares the same Bootstrap size.
   ------------------------------------------------------------------------- */
.app-content .btn-primary {
  font-size: 14px;
  padding: 6px 12px;
}
.app-content .btn-primary.btn-lg { font-size: 18px; padding: 10px 16px; }
.app-content .btn-primary.btn-sm { font-size: 12px; padding: 5px 10px; }
.app-content .btn-primary.btn-xs { font-size: 12px; padding: 1px 5px; }

/* Action columns shrink to their buttons instead of stretching across the
   table (that is what made the "Acciones" column look oversized). */
.app-content .table td:last-child:has(.btn) {
  white-space: nowrap;
  width: 1%;
}

/* Record count shown under each data table. */
.app-content .table-count {
  color: var(--eerie);
  font-size: 13px;
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
   28. Table toolbar — search field + primary action on a single row
   ---------------------------------------------------------------------------
   Used by the views that carry a search box (objetos). Keeps the page to two
   bands above the table (title, toolbar) instead of stacking title / button /
   search as three separate rows, and separates the toolbar from the table.
   ------------------------------------------------------------------------- */
.app-content .table-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.app-content .table-toolbar .table-toolbar-search {
  flex: 1 1 260px;
  margin: 0;
  max-width: 480px;
}

/* Push the action to the right edge, also when the toolbar wraps on phones. */
.app-content .table-toolbar .page-actions {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

.app-content .table-toolbar .page-actions .btn,
.app-content .table-toolbar .page-actions a#nuevo.btn,
.app-content .table-toolbar .page-actions a#volver.btn {
  margin: 0;
}

@media (max-width: 767px) {
  .app-content .table-toolbar .table-toolbar-search {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   29. Asistente de cliente externo (envíos · origen/destino externo)
   ---------------------------------------------------------------------------
   Estas pantallas usan h3 como subtítulo de sección y columnas .col-md-12 como
   filas. El template deja todos los títulos con margen 0, por lo que el
   contenido quedaba apretado: aquí se recupera el aire entre secciones y se
   contiene el flotado (las columnas del asistente son floats).
   ------------------------------------------------------------------------- */
.app-content .envio-externo {
  overflow: hidden;                    /* contiene los floats de las columnas */
}

.app-content .envio-externo h3 {
  font-size: 17px;
  letter-spacing: 0.4px;
  margin: 28px 0 12px;
}

/* El primer subtítulo va justo bajo el h1 (que ya aporta su propio margen). */
.app-content .envio-externo > div:first-child > h3,
.app-content .envio-externo > form:first-child > h3,
.app-content .envio-externo > h3:first-child {
  margin-top: 0;
}

/* Filas del asistente (columnas usadas como bloques). */
.app-content .envio-externo > div,
.app-content .envio-externo > form {
  margin-bottom: 22px;
}

/* Glosa + dato en la misma línea de cada columna: la glosa en tono suave y sin
   negrita, el dato en negrita, para distinguirlos a simple vista. */
.app-content .envio-externo .row > [class*="col-"] label {
  color: var(--slinky);
  font-weight: 400;
  margin-right: 6px;
}

/* Pie de acciones de cada paso del asistente de envíos: “Volver” queda a la
   izquierda y la acción de avance a la derecha (antes iban juntas en un costado).
   Se usa tanto en los pasos de radios como en los externos. */
.app-content .envio-paso-acciones {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* El partial de dirección trae su propio .col-md-6 de recorte: al vivir dentro
   del panel el formulario aprovecha todo el ancho disponible. */
.app-content .envio-externo #divNuevaDireccion .col-md-12 > div > .col-md-6 {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   30. Envío · resumen de datos (setObjeto)
   ---------------------------------------------------------------------------
   El bloque de datos se separa del listado de productos. Antes lo separaba un
   <p> con padding que el navegador descartaba (un <p> no puede contener un
   <form> ni un <div>), dejando un hueco vacío de ~106px en medio de la pantalla.
   ------------------------------------------------------------------------- */
.app-content .envio-resumen {
  margin-bottom: 28px;
}