/* ---------------------------------------------------------------------
   IMPORTANTE: el orden de carga de las hojas es significativo.
   Está declarado en src/Support/Assets.php (constante CSS) y no debe
   alterarse: varias reglas de los archivos finales afinan a propósito lo
   que definen los primeros.
   --------------------------------------------------------------------- */

/* =====================================================================
   Seguimiento y acceso — confirmación, consulta de folio e ingreso
   ===================================================================== */

/* Confirmation and tracking */
.confirmation-page { min-height: 100vh; display: grid; place-items: center; padding: 35px 18px; background: radial-gradient(circle at 50% 20%, #fff 0, #faf4ed 45%, #f7edef 100%); }
.confirmation-card { width: min(600px, 100%); background: white; border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 6vw, 50px); box-shadow: var(--shadow-lg); text-align: center; }
.success-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; background: #eaf7f0; color: var(--success); border: 8px solid #f4fbf7; }
.success-icon svg { width: 32px; height: 32px; stroke-width: 3; }
.confirmation-card h1 { color: var(--guinda-dark); font: 800 30px/1.15 Montserrat, Arial, sans-serif; letter-spacing: -.025em; margin: 10px 0; }
.confirmation-card > p { color: var(--muted); font-size: 12px; max-width: 490px; margin: 0 auto; }
.folio-box { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; background: var(--guinda-soft); border: 1px dashed #cda9b2; border-radius: 16px; padding: 18px 20px; margin: 25px 0 14px; text-align: left; }
.folio-box small { color: var(--muted); font-size: 9px; }
.folio-box strong { color: var(--guinda); font: 800 20px Montserrat, Arial, sans-serif; letter-spacing: .04em; }
.folio-box button { grid-row: span 2; align-self: center; border: 1px solid #d8c1c7; background: #fff; color: var(--guinda); border-radius: 8px; padding: 6px 9px; font-size: 9px; font-weight: 750; }
.folio-box > span { grid-column: 1/-1; height: 1px; background: #e2ced3; margin-block: 8px; }
.important-note { display: flex; align-items: flex-start; gap: 10px; background: #fff8e9; border: 1px solid #ead7ad; color: #9a661a; border-radius: 12px; padding: 12px; text-align: left; }
.important-note span { display: flex; flex-direction: column; font-size: 10px; color: #826b48; }
.important-note svg { width: 18px; flex-shrink: 0; }
.confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.confirmation-card .brand-strip { justify-content: center; margin: 25px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.confirmation-card .brand-strip img { max-width: 180px; height: 38px; }
.tracking-page { min-height: 100vh; }
.tracking-main { padding-block: 75px 100px; }
.tracking-heading { text-align: center; max-width: 670px; margin: 0 auto 30px; }
.tracking-heading h1 { color: var(--guinda-dark); font: 800 clamp(30px, 5vw, 44px)/1.1 Montserrat, Arial, sans-serif; letter-spacing: -.035em; margin: 12px 0 8px; }
.tracking-heading p { color: var(--muted); margin: 0; }
.tracking-search { width: min(760px, 100%); margin: auto; display: grid; grid-template-columns: 1.25fr .8fr auto; gap: 11px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.tracking-search label { display: flex; flex-direction: column; gap: 6px; }
.tracking-search label span { font-size: 10px; color: #564b4e; font-weight: 750; }
.tracking-search input { min-height: 44px; border: 1px solid #dcd2d0; border-radius: 10px; padding: 10px 12px; color: var(--guinda); font-weight: 750; letter-spacing: .04em; }
.tracking-search > small { grid-column: 1/-1; text-align: center; color: #9b8f92; font-size: 9px; }
.empty-result { text-align: center; width: min(600px,100%); margin: 30px auto; border: 1px solid var(--line); background: white; border-radius: 18px; padding: 40px; color: var(--muted); }
.empty-result svg { color: #c5b8bb; width: 40px; height: 40px; }
.empty-result h2 { color: var(--guinda-dark); font: 750 19px Montserrat, Arial, sans-serif; }
.tracking-result { width: min(940px, 100%); margin: 34px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden; }
.tracking-summary { display: flex; justify-content: space-between; align-items: center; padding: 23px 27px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #fff, var(--guinda-soft)); }
.tracking-summary > div { display: flex; flex-direction: column; }
.tracking-summary small, .tracking-summary span { color: var(--muted); font-size: 9px; }
.tracking-summary h2 { margin: 2px 0; color: var(--guinda); font: 800 22px Montserrat, Arial, sans-serif; }
.tracking-grid { display: grid; grid-template-columns: .9fr 1.1fr; }
.tracking-grid > article { padding: 28px; }
.tracking-grid > article + article { border-left: 1px solid var(--line); }
.tracking-grid h3 { margin: 0 0 20px; color: var(--guinda-dark); font: 750 16px Montserrat, Arial, sans-serif; }
.tracking-grid dl { display: grid; gap: 12px; margin: 0; }
.tracking-grid dl > div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 9px; border-bottom: 1px solid #f0ebea; }
.tracking-grid dt { color: var(--muted); font-size: 10px; }
.tracking-grid dd { color: #443a3d; font-size: 11px; font-weight: 700; text-align: right; margin: 0; }
.citizen-message { margin-top: 22px; display: flex; align-items: center; gap: 11px; padding: 13px; border-radius: 12px; background: #f3f9f6; color: var(--success); }
.citizen-message span { display: flex; flex-direction: column; font-size: 9px; color: #6b8177; }
.citizen-message strong { color: #2d644d; font-size: 10px; }

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: .92fr 1.08fr; background: #fff; }
.login-brand { position: relative; overflow: hidden; min-height: 100vh; padding: 35px clamp(30px, 6vw, 80px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: radial-gradient(circle at 15% 85%, #9a3a54 0, transparent 33%), linear-gradient(145deg, var(--guinda-deep), var(--guinda)); }
.login-brand::after { content: ""; position: absolute; width: 600px; height: 600px; border: 1px solid rgba(236,215,152,.12); border-radius: 50%; right: -300px; top: 5%; box-shadow: 0 0 0 80px rgba(236,215,152,.025), 0 0 0 160px rgba(236,215,152,.02); }
.login-brand > button { position: relative; z-index: 1; align-self: flex-start; display: flex; align-items: center; gap: 8px; color: #eadde1; border: 0; background: none; padding: 0; font-size: 12px; }
.login-brand > div:not(.brand-strip) { position: relative; z-index: 1; max-width: 500px; }
.login-brand > div > img { width: 180px; opacity: 1; }
.login-brand h1 { margin: 25px 0 15px; font: 800 clamp(45px, 6vw, 70px)/.95 Montserrat, Arial, sans-serif; letter-spacing: -.04em; }
.login-brand p { color: #decdd2; line-height: 1.75; max-width: 450px; }
.login-brand .brand-strip { position: relative; z-index: 1; margin: 0; justify-content: flex-start; }
.login-brand .brand-strip img { opacity: .95; }
.login-brand .brand-divider { background: rgba(255,255,255,.22); }
.login-panel { display: grid; place-items: center; padding: 40px; background: #fff; }
.login-panel form { width: min(410px, 100%); }
.login-lock { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--guinda-soft); color: var(--guinda); margin-bottom: 18px; }
.login-panel h2 { color: var(--guinda-dark); font: 800 34px/1.12 Montserrat, Arial, sans-serif; letter-spacing: -.03em; margin: 10px 0 8px; }
.login-panel form > p { color: var(--muted); font-size: 12px; margin: 0 0 22px; }
.login-panel .field { margin-bottom: 14px; }
.demo-access { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 18px; background: #faf7f3; border: 1px dashed #d6c5b4; border-radius: 12px; padding: 12px; }
.demo-access strong { color: var(--dorado-dark); font-size: 10px; text-transform: uppercase; }
.demo-access code { font-size: 11px; color: var(--guinda); }
.demo-access small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.login-help { display: flex; align-items: center; justify-content: center; gap: 7px; color: #95898c; margin-top: 18px; }