/* ═══════════════════════════════════════════════════════
   JACS EXPRESS — Tema web claro (mismo que app Flutter)
   ═══════════════════════════════════════════════════════ */
:root {
  /* Curvas de easing. Las de CSS por defecto son flojas: no tienen carácter.
     --ease-out: para entradas y feedback (arranca rápido → se siente instantáneo).
     --ease-in-out: para cosas que se mueven en pantalla.
     Nunca usamos ease-in en UI: arranca lento y la interfaz se siente pesada. */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);

  --scaffold:      #F5F6FA;
  --surface:       #FFFFFF;
  --border:        #E4E6ED;
  --divider:       #EEEFF4;
  --text:          #111827;
  --text-2:        #6B7280;
  --text-muted:    #9CA3AF;
  --purple:        #5D2A8E;
  --purple-dark:   #4A2270;
  --purple-light:  #7A3FA6;
  --purple-bg:     #EDE7F6;
  --orange:        #FF6B00;
  --orange-dark:   #E55F00;
  --green:         #059669;
  --blue:          #0891B2;
  --yellow:        #D97706;
  --red:           #DC2626;
  --radius:        14px;
  --radius-sm:     8px;
  --radius-xs:     6px;
  --shadow:        0 2px 12px rgba(0,0,0,.06);
  --shadow-md:     0 4px 20px rgba(0,0,0,.09);
  --font:          "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: var(--scaffold);
  color: var(--text);
  line-height: 1.5;
  font-size: 15px;
}

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  /* Leaflet pone sus controles (zoom +/-) en z-index:1000 por defecto, así que
     el menú móvil desplegable (dentro de .topbar) necesita superarlo o los
     botones de zoom del mapa se ven encima del menú abierto (tracking.html). */
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .95rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; color: var(--purple); }

.topbar .brand {
  width: 180px;
  height: 58px;
  flex-shrink: 0;
  background: url("/assets/brand/rapigo-logo-tight.png") left center / contain no-repeat;
}
.topbar .brand > * {
  display: none !important;
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.app-brand {
  width: 180px;
  height: 58px;
  flex-shrink: 0;
  background: url("/assets/brand/rapigo-logo-tight.png") left center / contain no-repeat;
}
.app-brand > * {
  display: none !important;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.topbar-nav {
  display: flex;
  gap: .2rem;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 600;
  transition: background .12s, color .12s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { background: var(--scaffold); color: var(--text); text-decoration: none; }
.nav-link.active {
  background: var(--purple-bg);
  color: var(--purple);
  font-weight: 700;
}
.nav-ico { font-size: 1rem; line-height: 1; }

/* Hamburguesa (oculta en escritorio, visible en móvil vía media query) */
.topbar-burger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px; height: 40px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-burger span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--purple);
  transition: transform .2s, opacity .2s;
}
.topbar-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.topbar-burger.is-open span:nth-child(2) { opacity: 0; }
.topbar-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.topbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.role-pill {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--purple-bg);
  color: var(--purple);
  border: 1px solid rgba(93,42,142,.2);
}

.user-name {
  font-size: .8rem;
  color: var(--text-2);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Layout ──────────────────────────────────────────── */
.main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.main-narrow {
  max-width: 440px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.main-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 1rem; }

.card-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}

/* ── KPI grid ────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.kpi-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.kpi-body {}
.kpi-value {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.kpi-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-top: .15rem;
}

/* ── Role cards (hub) ────────────────────────────────── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .9rem;
  margin-top: .75rem;
}

.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
  display: block;
  text-decoration: none;
  color: var(--text);
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
  cursor: pointer;
}
/* Hover solo en dispositivos con mouse real: en táctiles se quedaba "pegado" al tocar. */
@media (hover: hover) and (pointer: fine) {
  .role-card:hover {
    transform: translateY(-2px);
    border-color: rgba(93,42,142,.35);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--text);
  }
}
/* Feedback al presionar: la tarjeta "escucha" al usuario. */
.role-card:active { transform: scale(.985); }

.role-card-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: .75rem;
}

.role-card h3 {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 800;
}
.role-card p {
  margin: 0;
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.4;
}

.home-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .75rem;
}
.home-action-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .home-action-card:hover {
    transform: translateY(-1px);
    border-color: rgba(93,42,142,.32);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--text);
  }
}
.home-action-card:active { transform: scale(.985); }
.home-action-card-primary {
  border-color: rgba(255,107,0,.35);
  background: linear-gradient(135deg, rgba(255,107,0,.12), var(--surface));
}
.home-action-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(93,42,142,.1);
  flex-shrink: 0;
  font-size: 1.15rem;
}
.home-action-card strong {
  display: block;
  font-size: .92rem;
  line-height: 1.2;
}
.home-action-card small {
  display: block;
  margin-top: .15rem;
  color: var(--text-2);
  font-size: .78rem;
}

/* ── Hero banner ─────────────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.hero-banner::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}

.hero-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.hero-sub {
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  margin: 0 0 1.1rem;
  max-width: 50ch;
}

/* ── Inicio: bienvenida + dos pilares (Express / Market) ───────────────── */
.home-welcome {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1.5rem;
  background: linear-gradient(138deg, #3b0764 0%, var(--purple) 42%, #1e1b4b 100%);
  color: #fff;
  box-shadow: 0 12px 40px rgba(76, 29, 149, 0.28);
}
.home-welcome::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -35%;
  width: min(52vw, 320px);
  height: min(52vw, 320px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.home-welcome-inner { position: relative; z-index: 1; }
.home-welcome-kicker {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.home-welcome-title {
  margin: 0 0 .5rem;
  font-size: clamp(1.35rem, 3.8vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.18;
  max-width: 22ch;
}
.home-welcome-lead {
  margin: 0 0 1.15rem;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  max-width: 42rem;
}
.home-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
}
.home-pill {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.home-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 720px) {
  .home-dual { grid-template-columns: 1fr; }
}
.home-dual-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  transition: transform .15s, background .15s, border-color .15s;
  text-align: left;
}
.home-dual-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
}
.home-dual-card strong {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.home-dual-card span.desc {
  font-size: .8rem;
  line-height: 1.4;
  color: rgba(255,255,255,.78);
}
.home-dual-card .go {
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  opacity: .95;
}
.home-dual-card--market {
  border-color: rgba(14, 165, 233, 0.45);
  background: linear-gradient(160deg, rgba(14, 165, 233, 0.2), rgba(255,255,255,.06));
}
.home-dual-card--express .go::after { content: " →"; }
.home-dual-card--market .go::after { content: " →"; }
.home-welcome-foot {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.home-welcome-foot .muted-link {
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.home-welcome-foot .muted-link:hover {
  color: #fff;
  text-decoration: underline;
}

.brand-rapigo {
  flex-direction: row;
  align-items: center;
}
.brand-rapigo-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-rapigo-name {
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
}
.brand-rapigo-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 2px;
}
.brand-mark-split {
  background: linear-gradient(145deg, var(--purple) 0%, #0ea5e9 100%);
}
.login-logo-mark.brand-mark-split {
  background: linear-gradient(145deg, var(--purple) 0%, #0ea5e9 100%);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  /* Curva fuerte: arranca rápido, así el botón se siente instantáneo al presionar. */
  transition: filter .12s var(--ease-out), transform .16s var(--ease-out);
  white-space: nowrap;
}
/* El press es lo que hace que la interfaz "se sienta viva": responde al instante. */
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; filter: brightness(1.07); }
}

.btn-primary {
  background: var(--purple);
  color: #fff;
}
.btn-orange {
  background: var(--orange);
  color: #fff;
}
.btn-secondary {
  background: var(--scaffold);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--purple); filter: none; }
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--scaffold); border-color: var(--border); filter: none; }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* ── Forms ───────────────────────────────────────────── */
.field {
  display: block;
  margin-bottom: .85rem;
}
.field label,
.field-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: .35rem;
  letter-spacing: .01em;
}

input, select, textarea {
  width: 100%;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
  font-family: var(--font);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(93,42,142,.15);
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
}

@media (max-width: 600px) {
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .role-grid { grid-template-columns: 1fr 1fr; }
  .topbar { gap: .4rem; padding: .55rem .9rem; }
  .topbar .brand, .app-brand { width: 132px; height: 44px; }
  .topbar-burger { display: inline-flex; }
  /* El menú pasa a ser un panel desplegable bajo la barra. */
  .topbar-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .15rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    padding: .5rem .6rem .7rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .22s ease, opacity .18s ease;
  }
  .topbar-nav.is-open {
    max-height: 80vh;
    overflow: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .topbar-nav .nav-link {
    justify-content: flex-start;
    padding: .7rem .8rem;
    font-size: .95rem;
  }
  .topbar-end .user-name { display: none; }
}

/* ── Shipment cards ──────────────────────────────────── */
.shipment-list { display: flex; flex-direction: column; gap: .75rem; }

.shipment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

.shipment-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.shipment-id {
  font-weight: 800;
  font-size: .9rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-id-select {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  cursor: pointer;
}

.guide-select {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--purple);
}

.shipment-card-body {
  font-size: .83rem;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.shipment-card-actions {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

/* ── Status badges ───────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-purple  { background: rgba(93,42,142,.1);  color: var(--purple); border: 1px solid rgba(93,42,142,.2); }
.badge-blue    { background: rgba(8,145,178,.1);   color: var(--blue);   border: 1px solid rgba(8,145,178,.2); }
.badge-green   { background: rgba(5,150,105,.1);   color: var(--green);  border: 1px solid rgba(5,150,105,.2); }
.badge-yellow  { background: rgba(217,119,6,.1);   color: var(--yellow); border: 1px solid rgba(217,119,6,.2); }
.badge-red     { background: rgba(220,38,38,.1);   color: var(--red);    border: 1px solid rgba(220,38,38,.2); }
.badge-orange  { background: rgba(255,107,0,.1);   color: var(--orange); border: 1px solid rgba(255,107,0,.2); }
.badge-gray    { background: rgba(156,163,175,.1); color: var(--text-2); border: 1px solid var(--border); }

/* ── Progress bar ────────────────────────────────────── */
.progress-bar {
  height: 7px;
  background: var(--scaffold);
  border-radius: 999px;
  overflow: hidden;
  margin-top: .3rem;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s;
}

/* ── Section header ──────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.section-title {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

/* ── Table ───────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
thead tr {
  background: var(--scaffold);
  border-bottom: 1px solid var(--border);
}
th {
  padding: .65rem .9rem;
  text-align: left;
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-2);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(93,42,142,.025); }

/* ── Toasts / Alerts ─────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; }
.toast-success { background: var(--green); color: #fff; }
.toast-error   { background: var(--red);   color: #fff; }
.toast-info    { background: var(--purple); color: #fff; }

/* ── Alert banner ────────────────────────────────────── */
.alert {
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  margin-bottom: .75rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.alert-green  { background: rgba(5,150,105,.07);  color: var(--green);  border: 1px solid rgba(5,150,105,.2); }
.alert-red    { background: rgba(220,38,38,.07);  color: var(--red);    border: 1px solid rgba(220,38,38,.2); }
.alert-yellow { background: rgba(217,119,6,.07);  color: var(--yellow); border: 1px solid rgba(217,119,6,.2); }
.alert-purple { background: rgba(93,42,142,.06);  color: var(--purple); border: 1px solid rgba(93,42,142,.2); }

/* ── Loading spinner ─────────────────────────────────── */
.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divider ─────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--divider); margin: 1rem 0; }

/* ── Login page ──────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--scaffold);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.login-logo {
  min-height: 76px;
  background: url("/assets/brand/rapigo-logo-tight.png") left center / contain no-repeat;
}
.login-logo > * {
  display: none !important;
}

.login-logo-mark {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.login-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.02em;
}
.login-sub {
  font-size: .8rem;
  color: var(--text-2);
  margin: .15rem 0 0;
}

.demo-box {
  background: rgba(93,42,142,.05);
  border: 1px solid rgba(93,42,142,.18);
  border-radius: var(--radius-sm);
  padding: .75rem;
  margin-bottom: 1.25rem;
  font-size: .8rem;
  color: var(--text-2);
  line-height: 1.45;
}
.demo-box strong { color: var(--purple); }

/* ── Misc ────────────────────────────────────────────── */
.muted { color: var(--text-2); font-size: .85rem; }
.text-muted { color: var(--text-muted); }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: .5rem; }
.gap-md { gap: .75rem; }
.mt-sm { margin-top: .5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-sm { margin-bottom: .5rem; }
.mb-md { margin-bottom: 1rem; }
.fw-bold { font-weight: 700; }
.fw-black { font-weight: 900; }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-purple { color: var(--purple); }
.text-orange { color: var(--orange); }
.text-blue   { color: var(--blue); }
.text-yellow { color: var(--yellow); }

code {
  font-family: ui-monospace, monospace;
  font-size: .82em;
  background: var(--scaffold);
  padding: .1em .35em;
  border-radius: 4px;
  color: var(--purple);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .83rem;
  color: var(--text-2);
}
.info-row + .info-row { margin-top: .2rem; }

/* Global toast helper */
#g-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  padding: .7rem 1.3rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  white-space: nowrap;
}
#g-toast.show { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   Accesibilidad: reducir movimiento.
   No es "quitar todas las animaciones": conservamos los
   cambios de opacidad y color (ayudan a entender lo que pasa)
   y eliminamos el MOVIMIENTO, que es lo que causa mareo.
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Sin desplazamientos ni escalados: solo se desvanece. */
  .role-card:hover,
  .home-action-card:hover,
  .home-dual-card:hover,
  .role-card:active,
  .home-action-card:active,
  .btn:active {
    transform: none !important;
  }
  .btn,
  .role-card,
  .home-action-card,
  .home-dual-card {
    transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease !important;
  }
}