/* ============================================================
   FULL OF DREAMS / ENIX 3.0 — GLOBAL THEME
   ------------------------------------------------------------
   Drop this into the Blazor site as a single GLOBAL stylesheet
   (e.g. wwwroot/css/enix-theme.css, referenced from index.html
   / App.razor AFTER bootstrap.css so the override layer wins).

   Source of truth: the design tokens + component patterns from
   "Enix3Proto" prototype. Class names are kept identical to the
   prototype on purpose — see Enix-Style-Guide.md.

   Structure:
     1. TOKENS              (:root custom properties)
     2. BASE / TYPOGRAPHY   (helpers shared everywhere)
     3. CORE COMPONENTS     (buttons, inputs, cards, tables,
                             badges, toggles, pagination…)
     4. LEGACY OVERRIDE LAYER
                            (retargets old Bootstrap classes +
                             bespoke classes onto the tokens)
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* — Brand — */
  --navy:      #0d2240;   /* primary brand / headers / dark surfaces  */
  --navy2:     #1a3a5c;   /* gradient partner for navy                */
  --blue:      #1e5fa8;   /* primary action / links / focus           */
  --blue-hover:#1a52c7;   /* hover state for primary buttons          */
  --blue-lt:   #eff6ff;   /* tint background                          */
  --blue-md:   #dbeafe;   /* stronger tint (badges)                   */
  --accent:    #f97316;   /* ORANGE — secondary CTA / "passenger"     */
  --gold:      #f59e0b;   /* stars, highlights inside dark            */

  /* — Per-module accents (used by tabs / sections) — */
  --purple:    #7c3aed;   --purple-lt: #f5f3ff;   /* CRM            */
  --teal:      #0ea5e9;   /* Mis Links                              */
  --indigo:    #4f46e5;   --indigo-lt: #eef2ff;   /* Capacitaciones */
  --emerald:   #059669;   --emerald-lt:#d1fae5;   /* Pagos          */

  /* — Status / semantic — */
  --green:     #16a34a;   --green-lt:  #dcfce7;   /* confirmed / paid     */
  --amber:     #d97706;   --amber-lt:  #fef3c7;   /* pending / warning    */
  --yellow:    #854d0e;   --yellow-lt: #fef9c3;   /* on-request           */
  --red:       #dc2626;   --red-lt:    #fee2e2;   /* cancelled / overdue  */
  --rose:      #e11d48;   --rose-lt:   #fff1f2;

  /* — Neutrals — */
  --white:  #ffffff;
  --gray50: #f8fafc;   /* app background, thead, inset panels */
  --gray100:#f1f5f9;   /* hairline dividers, soft fills       */
  --gray200:#e2e8f0;   /* borders                             */
  --gray400:#94a3b8;   /* micro-labels, muted icons           */
  --gray500:#64748b;   /* secondary text                      */
  --gray600:#475569;   /* body text on light                  */
  --gray700:#334155;   /* strong body text                    */
  --gray800:#1e293b;   /* default text color                  */

  /* — Shape & elevation — */
  --r:     12px;                       /* default card radius      */
  --r-sm:  8px;                        /* buttons / inputs / chips */
  --r-pill:99px;
  --sh:    0 2px 12px rgba(0,0,0,.08); /* resting card hover       */
  --sh-lg: 0 8px 40px rgba(0,0,0,.16); /* elevated / floating      */

  /* — Type — */
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* — Legacy bridge: old hardcoded hex → token —
     (referenced by the override layer in section 4) */
  --legacy-azul:        var(--blue);   /* was #124c81 / .estiloAzul */
  --legacy-ink:         var(--gray700);/* was #404040               */
  --legacy-panel:       var(--blue-lt);/* was #e7edf2 grandtotal    */
  --legacy-card-border: var(--gray200);/* was #d7d7d7               */
  --legacy-brl-accent:  var(--accent); /* was #D24717               */
}

/* ============================================================
   2. BASE / TYPOGRAPHY
   ============================================================ */
.enix, .enix * , body.enix { box-sizing: border-box; }
body { font-family: var(--font); color: var(--gray800); background: var(--gray50); }

/* Type scale — use these instead of ad-hoc font-size inline styles */
.t-page    { font-size: 20px; font-weight: 800; color: var(--navy); }   /* page title  */
.t-section { font-size: 17px; font-weight: 700; color: var(--navy); }   /* section     */
.t-card    { font-size: 13.5px;font-weight: 700; color: var(--navy); }  /* card head   */
.t-body    { font-size: 13px; color: var(--gray700); }
.t-muted   { font-size: 12.5px;color: var(--gray500); }
.t-label   {                                  /* uppercase micro-label */
  font-size: 10.5px; font-weight: 700; color: var(--gray400);
  letter-spacing: .06em; text-transform: uppercase;
}

/* ============================================================
   3. CORE COMPONENTS
   ============================================================ */

/* ---- Buttons ------------------------------------------------ */
.btn-primary,
.btn-orange,
.btn-quote,
.btn-sm {
  font-family: var(--font); cursor: pointer; border: none;
  font-weight: 700; transition: background .18s, opacity .18s, transform .1s;
}
.btn-primary {
  padding: 9px 18px; border-radius: var(--r-sm);
  background: var(--blue); color: #fff; font-size: 13px;
}
.btn-primary:hover { background: var(--blue-hover); }

.btn-orange {            /* secondary / "passenger view" / accent CTA */
  padding: 9px 18px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-size: 13px;
}
.btn-orange:hover { opacity: .88; }

.btn-quote {             /* outlined / tertiary */
  padding: 7px 14px; border-radius: var(--r-sm);
  background: none; color: var(--blue);
  border: 1.5px solid var(--blue); font-size: 12px; font-weight: 600;
}
.btn-quote:hover { background: var(--blue-lt); }

.btn-sm { padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; }
.btn-sm--blue    { background: var(--blue); color: #fff; }
.btn-sm--blue:hover { background: var(--blue-hover); }
.btn-sm--outline { background: none; border: 1.5px solid var(--gray200); color: var(--gray600); }
.btn-sm--outline:hover { border-color: var(--blue); color: var(--blue); }

/* ---- Inputs & selects -------------------------------------- */
.input {
  width: 100%; height: 42px;
  border: 1.5px solid var(--gray200); border-radius: 10px;
  padding: 0 12px; font-size: 13.5px; color: var(--gray800);
  background: var(--white); appearance: none; -webkit-appearance: none;
  font-family: var(--font); transition: border-color .18s, box-shadow .18s;
}
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,168,.1); }
.input::placeholder { color: var(--gray400); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 10.5px; font-weight: 700; color: var(--gray500); letter-spacing: .06em; text-transform: uppercase; }

/* ---- Cards -------------------------------------------------- */
.card { background: var(--white); border: 1px solid var(--gray200); border-radius: var(--r); overflow: hidden; }
.card__head { padding: 14px 18px 12px; border-bottom: 1px solid var(--gray100); display: flex; align-items: center; justify-content: space-between; }
.card__title { font-size: 13.5px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.card__body { padding: 14px 18px; }

/* ---- Tables ------------------------------------------------- */
.table-card { background: var(--white); border: 1px solid var(--gray200); border-radius: var(--r); overflow: hidden; }
.enix-table { width: 100%; border-collapse: collapse; }
.enix-table thead { background: var(--gray50); border-bottom: 1px solid var(--gray200); }
.enix-table th {
  padding: 10px 12px; font-size: 10px; font-weight: 700; color: var(--gray400);
  letter-spacing: .07em; text-transform: uppercase; text-align: left; white-space: nowrap;
}
.enix-table td { padding: 12px; font-size: 12.5px; color: var(--gray700); border-bottom: 1px solid var(--gray100); vertical-align: middle; }
.enix-table tr:last-child td { border-bottom: none; }
.enix-table tbody tr:hover { background: var(--gray50); }

/* ---- Status badges (pill) ---------------------------------- */
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.status-dot   { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.s-confirmed, .s-active, .s-paid       { background: var(--green-lt);  color: var(--green); }
.s-request,  .s-pending                { background: var(--yellow-lt); color: var(--yellow); }
.s-cancelled,.s-expired, .s-overdue    { background: var(--red-lt);    color: var(--red); }
.s-converted, .s-partial               { background: var(--blue-lt);   color: var(--blue); }

/* ---- Toggle switch ----------------------------------------- */
.toggle-sw { position: relative; width: 42px; height: 24px; flex-shrink: 0; display: inline-block; }
.toggle-sw input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--gray200); cursor: pointer; transition: background .2s; }
.toggle-track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.toggle-sw input:checked + .toggle-track { background: var(--blue); }
.toggle-sw input:checked + .toggle-track::before { transform: translateX(18px); }
.toggle-sw input:checked + .toggle-track.track--purple { background: var(--purple); }
.toggle-sw input:checked + .toggle-track.track--green  { background: var(--green); }

/* ---- Pagination -------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--gray100); flex-wrap: wrap; gap: 8px; }
.pg-btn { padding: 5px 10px; border-radius: 7px; border: 1.5px solid var(--gray200); background: var(--white); font-size: 12px; color: var(--gray600); cursor: pointer; transition: all .16s; }
.pg-btn:hover { border-color: var(--blue); color: var(--blue); }
.pg-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; }

/* ---- Page chrome helpers ----------------------------------- */
.page-title { font-size: 20px; font-weight: 800; color: var(--navy); padding: 24px 0 16px; display: flex; align-items: center; gap: 10px; }
.section-title { font-size: 17px; font-weight: 700; color: var(--navy); }
.section-sub   { font-size: 13px; color: var(--gray500); margin-top: 2px; }

/* ============================================================
   4. LEGACY OVERRIDE LAYER
   ------------------------------------------------------------
   Retargets the OLD vocabulary used across existing .razor
   files onto the new tokens. Wrap a page's root in
   class="enix" so these only touch migrated screens, OR drop
   the `.enix` prefix to theme the whole app at once.
   Bootstrap is loaded first, so a single class selector here
   already wins on later-loaded sheets; !important is only used
   where Bootstrap itself ships !important.
   ============================================================ */

/* ---- Bootstrap buttons → token palette --------------------- */
.enix .btn { border-radius: var(--r-sm); font-weight: 700; transition: background .18s, opacity .18s; }
.enix .btn-primary   { background: var(--blue);   border-color: var(--blue); }
.enix .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.enix .btn-accent    { background: var(--accent); border-color: var(--accent); color: #fff; }   /* their custom CTA */
.enix .btn-accent:hover { opacity: .88; color: #fff; }
.enix .btn-warning   { background: var(--gold);   border-color: var(--gold);   color: #fff; }
.enix .btn-danger    { background: var(--red);    border-color: var(--red); }
.enix .btn-success   { background: var(--green);  border-color: var(--green); }
.enix .btn-secondary { background: #fff; border: 1.5px solid var(--gray200); color: var(--gray600); }
.enix .btn-secondary:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

/* ---- Bootstrap text-* / bespoke status text ---------------- */
.enix .text-success,   .enix .text-confirmed { color: var(--green)  !important; }
.enix .text-warning,   .enix .text-standby   { color: var(--amber)  !important; }
.enix .text-danger,    .enix .text-cancelled { color: var(--red)    !important; }
.enix .text-primary    { color: var(--blue)   !important; }
.enix .text-muted      { color: var(--gray500)!important; }

/* ---- Font-size aliases (fs-5 / fs-md / fs-sm) -------------- */
.enix .fs-5  { font-size: 17px !important; font-weight: 700; color: var(--navy); }
.enix .fs-md { font-size: 13.5px !important; }
.enix .fs-sm { font-size: 12.5px !important; }

/* ---- Bootstrap tables -------------------------------------- */
.enix .table { border-collapse: collapse; color: var(--gray700); }
.enix .table > :not(caption) > * > * { background: transparent; }   /* kill BS striping bg */
.enix .table thead tr,
.enix .table .table-primary,
.enix .table .table-primary > * {
  background: var(--gray50) !important; color: var(--gray400) !important;
  border-bottom: 1px solid var(--gray200);
}
.enix .table th { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 10px 12px; }
.enix .table td { font-size: 12.5px; padding: 12px; border-bottom: 1px solid var(--gray100); vertical-align: middle; }
.enix .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }
.enix .table-hover  > tbody > tr:hover > *            { background: var(--gray50) !important; }
.enix .table-secondary, .enix .table-light { --bs-table-bg: transparent; }

/* ---- card-body blocks (old inline #d7d7d7 borders) --------- */
.enix .card-body {
  background: var(--white);
  border: 1px solid var(--legacy-card-border);
  border-radius: 0 0 var(--r) var(--r);
}

/* ---- .grandtotal panel (old inline #e7edf2) ---------------- */
.enix .grandtotal { background: var(--legacy-panel) !important; border-radius: var(--r-sm); }
.enix .grandtotal .cost { color: var(--navy); }

/* ---- .estiloAzul / .paymentstatus header bar -------------- */
.enix .estiloAzul,
.enix .paymentstatus.estiloAzul {
  background: var(--navy); color: #fff;
  border: none; padding: 8px 14px;
  border-top-right-radius: var(--r-sm) !important;
}

/* ---- itinerary left menu → vertical nav -------------------- */
.enix .itinerary-menu { border: 1px solid var(--gray200); border-radius: var(--r); overflow: hidden; background: #fff; }
.enix .itinerary-menu-item { border-bottom: 1px solid var(--gray100); }

/* action rows: flex layout lives on <a> so it stretches full width */
.enix .itinerary-menu-item a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: var(--gray700); width: 100%; text-decoration: none;
}
/* hover fills the full row (background on <div>, not <a>) */
.enix .itinerary-menu-item:hover { background: var(--gray50); }
.enix .itinerary-menu-item:hover a { color: var(--navy); background: transparent; }

/* section headers (Servicios / Pagos) — navy background, white text */
.enix .itinerary-menu-section { background: var(--navy); }
.enix .itinerary-menu-section a { color: #fff !important; font-weight: 700; justify-content: flex-start; }
.enix .itinerary-menu-section:hover { background: var(--navy2); }
.enix .itinerary-menu-section:hover a { color: #fff !important; background: transparent; }

/* active */
.enix .itinerary-menu-item.active a { color: var(--blue); }

.enix .disabled-item, .enix .itinerary-menu-item.disabled a { opacity: .45; pointer-events: none; }

/* ---- product service card header (legacy fallback) --------- */
.enix .product .header { color: var(--gray700); }
.enix .product .name   { font-size: 15px; font-weight: 700; color: var(--navy); }
.enix .product .status { font-weight: 700; }
.enix .details p { margin-bottom: .3rem; font-size: 12.5px; color: var(--gray600); }
.enix .details label { font-weight: 700; color: var(--gray700); }

/* ---- breadcrumb navbar ------------------------------------- */
.enix .navbar-breadcrumbs { background: #fff; box-shadow: 0 1px 0 var(--gray200); }
.enix .breadcrumb { font-size: 14px; font-weight: 700; color: var(--navy); }