.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}
.alert-heading{color:inherit}
.alert-link{font-weight:700}
.alert-dismissible{padding-right:3rem}.alert-dismissible 
.btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}
.alert-primary{color:#084298;background-color:#cfe2ff;border-color:#b6d4fe}.alert-primary 
.alert-link{color:#06357a}
.alert-secondary{color:#41464b;background-color:#e2e3e5;border-color:#d3d6d8}.alert-secondary 
.alert-link{color:#34383c}
.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-success 
.alert-link{color:#0c4128}.alert-info{color:#055160;background-color:#cff4fc;border-color:#b6effb}.alert-info 
.alert-link{color:#04414d}.alert-warning{color:#664d03;background-color:#fff3cd;border-color:#ffecb5}.alert-warning 
.alert-link{color:#523e02}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert-danger 
.alert-link{color:#6a1a21}.alert-light{color:#636464;background-color:#fefefe;border-color:#fdfdfe}.alert-light 
.alert-link{color:#4f5050}.alert-dark{color:#141619;background-color:#d3d3d4;border-color:#bcbebf}.alert-dark
/* Cart page "Actualizar Carrito" feedback (owner's request) - a small
   "Actualizado" note fades in then out under each quantity input.
   Defined here (not inline in cart_page_items.html) so it isn't
   re-injected on every htmx OOB swap of that fragment. */
@keyframes cart-qty-updated-fade{0%,70%{opacity:1}100%{opacity:0}}
.qty-updated-flash{animation:cart-qty-updated-fade 3s ease-out forwards}

/* Tasks Planning #142 (Bootstrap migration) - flowbite.min.css (CDN) ships
   Tailwind v4-style utility classes that set individual transform axes via
   custom properties (e.g. .translate-x-full only sets --tw-translate-x,
   then reads `translate: var(--tw-translate-x) var(--tw-translate-y)`),
   but that build doesn't include the base/reset layer a real project
   Tailwind build would auto-generate to initialize those properties to 0.
   Using only one axis (the common case - a drawer sliding on one direction)
   left the other var() undefined, making the whole `translate` declaration
   invalid and silently applying no transform at all. This restores the
   same defaults a normal Tailwind build ships, fixing every translate-x,
   translate-y, rotate and scale utility from flowbite.min.css at once,
   not just one component. (Careful editing this comment: a literal "*"
   followed by "/" anywhere in this text closes the CSS comment early,
   which is exactly the bug this note used to have.) */
*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

/* Mega-menu category links (owner's request, 2026-08-27) - replaces a
   repeated inline Tailwind-class string ("block py-0.5 text-sm
   text-gray-700 hover:text-blue-600") used 161 times across 7
   mega_menu_*.html files. 2 of its 5 intents (py-0.5, hover:text-blue-600)
   were silently missing from the compiled theme.min.css bundle - real CSS
   here instead, defined once so it can be tuned in one place. */
.mega-menu-link {
  display: block;
  padding: 0.125rem 0;
  font-size: 0.75rem;
  color: rgb(61 79 88);
  transition: color 150ms ease;
}
.mega-menu-link:hover {
  color: #16a34a;
}
/* The "Todas Las Categorias" / "see all" link in each mega-menu column -
   was "font-semibold text-blue-600" (also dead, same missing-class issue),
   meant to stand out permanently rather than only change color on hover. */
.mega-menu-link-all {
  display: block;
  padding: 0.125rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #16a34a;
}
/* One outlier link (brand logo + text, mega_menu_marcas.html) already uses
   real "flex items-center gap-1 text-sm text-gray-700" utility classes -
   this only replaces its two dead ones (py-0.5, hover:text-blue-600),
   composed alongside those rather than a full block-display replacement. */
.mega-menu-link-icon {
  padding: 0.125rem 0;
  transition: color 150ms ease;
}
.mega-menu-link-icon:hover {
  color: #16a34a;
}

/* PENDING_TASKS.md #189 (2026-09-07) - Bootstrap-component-shaped classes
   still used in live templates but never actually defined by either
   theme.min.css or this file, since the real Bootstrap CSS itself has
   been commented out sitewide since before this file existed. Every
   class below was confirmed absent (grep against the real compiled
   theme.min.css, exact word-boundary match, not a substring) before
   writing anything - values are Bootstrap 5's own well-known standard
   definitions, not guessed. Real gap this fixed: without .sr-only, six
   templates' "hidden" label text (checkout note, wishlist checkboxes,
   a section-select label) rendered fully visible - looked like stray/
   duplicate text next to its real sibling content, not a pure
   accessibility no-op. .pagination/.list-group were investigated too -
   both false positives (.pagination is a vestigial class name only,
   every real pagination link already has full real Tailwind utility
   styling of its own; the 3 other "pagination" hits are actually
   .swiper-pagination, an unrelated Swiper-library class, already
   styled) - not added here, no real gap to fix. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  appearance: none;
}
.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* table.table (not bare .table) - deliberately, since theme.min.css's
   own Tailwind ".table{display:table}" utility already occupies that
   exact class name for an unrelated purpose (a real coincidental
   collision, not a Bootstrap remnant - confirmed live). The extra
   element-type selector raises specificity just enough to guarantee
   these real Bootstrap table properties always apply regardless of
   stylesheet load order, without touching or overriding the existing
   Tailwind rule for anyone else still relying on bare .table. Used by
   brand_list.html and product_page_volume_discount.html - both
   currently render as a bare, borderless, unpadded HTML table without
   this. */
table.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
}
table.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
}
table.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
table.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}
table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Owner's ask (2026-09-14) - shared mobile treatment for the account-
   section data tables (Mis Pedidos, Empleados, Facturas, etc.): a fixed
   per-column width so text wraps onto multiple lines instead of forcing
   the column (and the whole table) wider - the old whitespace-nowrap
   cells were exactly why only ~2-3 columns fit before scrolling, since
   one long unwrapped value could eat most of the visible width. With
   table-layout:fixed and every column pinned to the same width, roughly
   4 columns fit in a 375-428px phone viewport before the table's own
   existing overflow-x-auto wrapper kicks in for the rest - scrolling
   sideways to reach column 5+ instead of every column being squeezed.
   Add class="account-table" to the <table> itself; add
   account-table-col-wide to a <th>/<td> that genuinely needs more room
   (a product name, say) - it still wraps, just within a wider column
   that itself now counts toward using up the "4 visible" budget faster.
   Desktop (lg:+) is untouched - these are real, already-compiled
   Tailwind classes doing the desktop layout (w-full etc.), this only
   overrides them below the same lg: breakpoint used everywhere else in
   the responsive pass. */
@media (max-width: 1023.98px) {
  .account-table {
    table-layout: fixed;
    /* A block-level table's "width:auto" fills its container like any
       other block box - table-layout:fixed only controls how that
       allotted width is divided among columns, it does NOT make the
       table grow past its container to its intrinsic (sum-of-columns)
       width. Without forcing that intrinsic width here, every column
       above just gets proportionally squeezed to fit - so the intended
       "4 columns visible, rest via horizontal scroll" never actually
       triggers a scrollbar; columns are visible but far narrower than
       their max-width. max-content forces the table to its real
       preferred width (which does exceed the viewport once there are
       more than ~4 columns), handing overflow to the existing
       overflow-x-auto wrapper; max(100%, ...) keeps it at least full
       width for the rare table with few enough columns to fit anyway. */
    width: max(100%, max-content);
  }
  .account-table th,
  .account-table td {
    width: 6.5rem;
    max-width: 6.5rem;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 0.5rem 0.5rem !important;
  }
  .account-table th.account-table-col-narrow,
  .account-table td.account-table-col-narrow {
    width: 2.5rem;
    max-width: 2.5rem;
  }
  /* A narrow column holding a product thumbnail (wishlist tables) needs
     the image itself capped too - the inline max-height/width:100px style
     on those <img> tags would otherwise force the cell wider than 2.5rem. */
  .account-table td.account-table-col-narrow img {
    max-width: 2rem !important;
    max-height: 2rem !important;
  }
  .account-table th.account-table-col-wide,
  .account-table td.account-table-col-wide {
    /* Was 33% - but the table's own width is now max(100%, max-content)
       (see .account-table above), and a percentage width can't resolve
       sanely against a max-content-sized ancestor: browsers fall back to
       shrinking the column to its content minimum instead, which for
       wrapped text is close to 0 (confirmed live: "Producto" rendered
       one character per line at ~40px). A fixed width sidesteps that -
       roughly 3x the default column width, comfortable for a product name. */
    width: 12rem;
    max-width: 12rem;
  }
  .account-table.account-table-left th,
  .account-table.account-table-left td {
    text-align: left !important;
    padding-left: 0.5rem !important;
  }
  .account-table-col-hide-mobile {
    display: none !important;
  }
  /* Wishlist (owner's ask, 2026-09-14) - "reduce margin/paddings" around
     the table's own card wrapper, on top of the general account-table
     cell-padding reduction above. */
  .account-table-compact-section {
    padding: 0.5rem !important;
  }
}