/* Visas Direct - theme on top of Bootstrap 5.3.8
   Palette: Deep Teal primary, Amber accent, Warm Sand canvas (see spec.md section 5). */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --va-teal: #0F766E;
  --va-teal-dark: #115E59;
  --va-teal-soft: #E6F4F1;
  --va-amber: #F59E0B;
  --va-amber-soft: #FEF3C7;
  --va-ink: #1F2937;
  --va-muted: #6B7280;
  --va-sand: #FAF7F2;
  --va-border: #E7E2D9;
  --va-blue: #1D4ED8;
  --va-green: #15803D;
  --va-orange: #B45309;
  --va-red: #B91C1C;
  --va-shadow: 0 1px 2px rgba(31, 41, 55, .06), 0 6px 18px rgba(31, 41, 55, .07);
  --va-shadow-lg: 0 2px 4px rgba(31, 41, 55, .06), 0 16px 40px rgba(31, 41, 55, .12);

  --bs-primary: #0F766E;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0F766E;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #115E59;
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1F2937;
  --bs-body-color-rgb: 31, 41, 55;
  --bs-body-bg: #FAF7F2;
  --bs-body-bg-rgb: 250, 247, 242;
  --bs-secondary-color: #6B7280;
  --bs-border-color: #E7E2D9;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-focus-ring-color: rgba(245, 158, 11, .45);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  letter-spacing: -.015em;
  color: var(--va-ink);
}
h1, .h1 { font-weight: 800; }
h2, .h2, h3, .h3 { font-weight: 700; }
.lead { color: var(--va-muted); }

/* Accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 3px solid var(--va-amber);
  outline-offset: 2px;
  box-shadow: none;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--va-ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 .75rem 0; }
.skip-link:focus { left: 0; color: #fff; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Buttons: pills with teal / amber */
.btn { border-radius: 50rem; font-weight: 600; padding: .6rem 1.35rem; }
.btn-lg { padding: .8rem 1.75rem; }
.btn-sm { padding: .35rem .9rem; }
.btn-primary {
  --bs-btn-bg: var(--va-teal); --bs-btn-border-color: var(--va-teal);
  --bs-btn-hover-bg: var(--va-teal-dark); --bs-btn-hover-border-color: var(--va-teal-dark);
  --bs-btn-active-bg: var(--va-teal-dark); --bs-btn-active-border-color: var(--va-teal-dark);
  --bs-btn-disabled-bg: var(--va-teal); --bs-btn-disabled-border-color: var(--va-teal);
}
.btn-outline-primary {
  --bs-btn-color: var(--va-teal); --bs-btn-border-color: var(--va-teal);
  --bs-btn-hover-bg: var(--va-teal); --bs-btn-hover-border-color: var(--va-teal);
  --bs-btn-active-bg: var(--va-teal-dark); --bs-btn-active-border-color: var(--va-teal-dark);
}
.btn-accent {
  --bs-btn-color: #1F2937; --bs-btn-bg: var(--va-amber); --bs-btn-border-color: var(--va-amber);
  --bs-btn-hover-color: #1F2937; --bs-btn-hover-bg: #D98E04; --bs-btn-hover-border-color: #D98E04;
  --bs-btn-active-color: #1F2937; --bs-btn-active-bg: #D98E04; --bs-btn-active-border-color: #D98E04;
}
.btn-sso { background: #fff; border: 1px solid var(--va-border); color: var(--va-ink); display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; padding: .8rem 1.25rem; box-shadow: var(--va-shadow); }
.btn-sso:hover { background: #fff; border-color: var(--va-teal); color: var(--va-ink); transform: translateY(-1px); }
.btn-sso svg { width: 20px; height: 20px; }

/* Header */
.site-header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--va-border); }
.navbar-brand { font-weight: 800; color: var(--va-teal) !important; display: inline-flex; align-items: center; gap: .5rem; font-size: 1.25rem; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; background: var(--va-teal); color: #fff; display: inline-grid; place-items: center; font-size: 1.1rem; box-shadow: inset 0 -3px 0 var(--va-amber); }
.navbar .nav-link { font-weight: 500; color: var(--va-ink); border-radius: 50rem; padding: .45rem .9rem !important; }
.navbar .nav-link:hover { background: var(--va-teal-soft); }
.navbar .nav-link.active { color: var(--va-teal); background: var(--va-teal-soft); font-weight: 600; }
.topbar { background: var(--va-ink); color: #E5E7EB; font-size: .85rem; }
.topbar a { color: #E5E7EB; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--va-amber-soft); color: var(--va-orange); display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; }
.role-pill { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }

/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #0F766E 0%, #115E59 55%, #134E4A 100%); color: #fff; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; }
.hero h1, .hero .lead { color: #fff; }
.hero .lead { opacity: .9; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(245, 158, 11, .35), transparent 65%); }
.hero::after { width: 380px; height: 380px; left: -120px; bottom: -200px; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%); }
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50rem; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; }
.quick-card { background: #fff; color: var(--va-ink); border-radius: 1.5rem; box-shadow: var(--va-shadow-lg); padding: 1.75rem; }
.quick-card h2 { font-size: 1.2rem; }

/* Sections */
.section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.section-sm { padding-top: 3rem; padding-bottom: 3rem; }
.section-title { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.section-title .eyebrow, .eyebrow { color: var(--va-teal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.bg-surface { background: #fff; }

/* Cards */
.card { border-color: var(--va-border); border-radius: var(--bs-border-radius-lg); }
.card-soft { background: #fff; border: 1px solid var(--va-border); border-radius: 1rem; box-shadow: var(--va-shadow); }
.hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--va-shadow-lg); }

/* Visa type cards: coloured status strip on the left instead of image-first cards */
.type-card { position: relative; background: #fff; border: 1px solid var(--va-border); border-left: 6px solid var(--cat, var(--va-teal)); border-radius: 1rem; box-shadow: var(--va-shadow); height: 100%; display: flex; flex-direction: column; }
.type-card .code { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--cat, var(--va-teal)); line-height: 1; }
.type-card ul { padding-left: 1.1rem; margin-bottom: 0; color: var(--va-muted); font-size: .92rem; }
.type-card .card-body { flex: 1; }
.cat-trabajo { --cat: #0F766E; }
.cat-transferencia { --cat: #1D4ED8; }
.cat-habilidades { --cat: #B45309; }
.cat-residencia { --cat: #15803D; }
.cat-badge { background: color-mix(in srgb, var(--cat) 12%, white); color: var(--cat); font-weight: 600; border-radius: 50rem; padding: .25rem .7rem; font-size: .75rem; }

.feature-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--va-teal-soft); color: var(--va-teal); display: grid; place-items: center; font-size: 1.5rem; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--va-amber); color: var(--va-ink); font-weight: 800; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; }
.steps-line { position: relative; }
@media (min-width: 992px) { .steps-line::before { content: ""; position: absolute; top: 22px; left: 12%; right: 12%; border-top: 2px dashed var(--va-border); z-index: 0; } .steps-line > div { position: relative; z-index: 1; } }

.cta-band { background: var(--va-teal-soft); border: 1px solid #CFE8E3; border-radius: 1.5rem; }

/* Forms */
.form-control, .form-select { border-color: var(--va-border); border-radius: .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--va-teal); box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .15); }
.form-floating > label { color: var(--va-muted); }
.form-section { background: #fff; border: 1px solid var(--va-border); border-radius: 1.25rem; box-shadow: var(--va-shadow); }
.form-section > .section-head { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--va-border); display: flex; align-items: center; gap: .75rem; }
.form-section > .section-head .num { width: 30px; height: 30px; border-radius: 50%; background: var(--va-teal-soft); color: var(--va-teal); font-weight: 700; display: grid; place-items: center; font-size: .85rem; }
.form-section > .section-body { padding: 1.5rem; }
.form-section h2 { font-size: 1.1rem; margin: 0; }
[data-group][hidden] { display: none !important; }
.side-sticky { position: sticky; top: 92px; }
.doc-check li { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0; font-size: .92rem; }
.doc-check i { color: var(--va-muted); margin-top: .15rem; }
.doc-check li.done i { color: var(--va-green); }
.doc-check .req { color: var(--va-red); font-weight: 600; font-size: .75rem; }

.dropzone { border: 2px dashed #C9C2B4; border-radius: 1rem; background: var(--va-sand); padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--va-teal); background: var(--va-teal-soft); }
.dropzone i { font-size: 2rem; color: var(--va-teal); }
.file-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--va-border); border-radius: .75rem; background: #fff; }
.file-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item.error { border-color: #F3B6B6; background: #FEF2F2; }

/* Status badges */
.status { display: inline-flex; align-items: center; gap: .35rem; border-radius: 50rem; padding: .25rem .7rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.status-borrador { background: #F3F4F6; color: #4B5563; }
.status-enviada { background: #DBEAFE; color: #1D4ED8; }
.status-revision { background: #FEF3C7; color: #92400E; }
.status-pendientes { background: #FFEDD5; color: #B45309; }
.status-aprobada { background: #DCFCE7; color: #15803D; }
.status-rechazada { background: #FEE2E2; color: #B91C1C; }
.status-cancelada { background: #E5E7EB; color: #374151; }

/* Tables: desktop table, mobile cards */
.table-visa { --bs-table-bg: transparent; margin-bottom: 0; }
.table-visa thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--va-muted); border-bottom: 1px solid var(--va-border); white-space: nowrap; }
.table-visa td { vertical-align: middle; }
@media (max-width: 767.98px) {
  .table-visa thead { display: none; }
  .table-visa, .table-visa tbody, .table-visa tr, .table-visa td { display: block; width: 100%; }
  .table-visa tr { background: #fff; border: 1px solid var(--va-border); border-left: 6px solid var(--va-teal); border-radius: 1rem; margin-bottom: .85rem; padding: .5rem .25rem; box-shadow: var(--va-shadow); }
  .table-visa td { border: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .85rem; text-align: right; }
  .table-visa td::before { content: attr(data-label); font-weight: 600; color: var(--va-muted); text-align: left; }
  .table-visa td.actions { justify-content: flex-end; }
  .table-visa td.actions::before { content: none; }
}

/* Timeline */
.timeline { list-style: none; padding-left: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; border-left: 2px solid var(--va-border); }
.timeline li { position: relative; padding-left: 3rem; padding-bottom: 1.25rem; }
.timeline .dot { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--va-teal); color: var(--va-teal); font-size: .9rem; }
.timeline .internal .dot { border-color: var(--va-amber); color: var(--va-orange); }

.dl-grid dt { color: var(--va-muted); font-weight: 500; font-size: .85rem; }
.dl-grid dd { margin-bottom: .85rem; font-weight: 500; }

/* Footer */
.site-footer { background: #0B3B37; color: #CBD5D1; }
.site-footer a { color: #CBD5D1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h3 { color: #fff; font-size: 1rem; }
.site-footer .brand-mark { box-shadow: inset 0 -3px 0 var(--va-amber); background: var(--va-teal); }
.site-footer small { color: #9DB3AE; }

/* Login */
.login-wrap { min-height: calc(100vh - 220px); display: grid; place-items: center; padding: 3rem 0; }
.login-card { max-width: 440px; width: 100%; border-radius: 1.5rem; box-shadow: var(--va-shadow-lg); background: #fff; border: 1px solid var(--va-border); }
.divider { display: flex; align-items: center; gap: 1rem; color: var(--va-muted); font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--va-border); }

.error-code { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: clamp(5rem, 18vw, 9rem); line-height: 1; color: var(--va-teal); }

/* Pagination in brand colours */
.pagination {
  --bs-pagination-color: var(--va-teal); --bs-pagination-hover-color: var(--va-teal-dark);
  --bs-pagination-active-bg: var(--va-teal); --bs-pagination-active-border-color: var(--va-teal);
  --bs-pagination-focus-color: var(--va-teal-dark); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .35);
  --bs-pagination-border-color: var(--va-border); --bs-pagination-border-radius: .75rem;
}
.form-check-input:checked { background-color: var(--va-teal); border-color: var(--va-teal); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--va-muted); }

/* Brand lockup: logo mark + two-line text */
.navbar-brand { gap: .65rem; padding-top: .15rem; padding-bottom: .15rem; }
.brand-logo, .footer-brand img { border-radius: 12px; flex: none; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand-text small { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: .72rem; color: var(--va-muted); letter-spacing: .02em; margin-top: .2rem; }
.footer-brand { text-decoration: none !important; }
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .brand-text small { color: #9DB3AE; }
@media (max-width: 380px) { .brand-text small { display: none; } }