@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/instrument-sans/instrument-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/instrument-sans/instrument-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/instrument-sans/instrument-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/instrument-sans/instrument-sans-700.woff2') format('woff2');
}
:root {
  --portal-purple: #300e74;
  --portal-deep: #1a0845;
  --portal-indigo: #1e1a5e;
  --portal-cyan: #2b97d6;
  --portal-blue: #0065b8;
  --portal-yellow: #f2a20d;
  --portal-ink: #232635;
  --portal-muted: #626777;
  --portal-border: #dce1e9;
  --portal-surface: #f6f7fa;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body.portal-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--portal-surface);
  color: var(--portal-ink);
  font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}
.portal-page a { color: var(--portal-blue); text-decoration: none; }
.portal-page a:hover { text-decoration: underline; }
.portal-page button, .portal-page input, .portal-page select { font: inherit; }
.portal-page :focus-visible { outline: 3px solid var(--portal-yellow); outline-offset: 3px; }
.portal-container { width: calc(100% - 64px); max-width: 1280px; margin: 0 auto; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px; background: white; }
.skip-link:focus { top: 8px; }
.contact-bar { background: var(--portal-deep); color: #d8cfea; font-size: 12px; }
.contact-content { min-height: 36px; display: flex; gap: 24px; align-items: center; }
.contact-content a { color: #d8cfea; }
.contact-content i { color: var(--portal-yellow); margin-right: 5px; }
.contact-official { margin-left: auto; }
.brand-bar { background: linear-gradient(135deg, #300e74 0%, #1e1a5e 40%, #2b97d6 100%); border-bottom: 4px solid var(--portal-yellow); }
.brand-content { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.municipal-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.municipal-brand:hover { text-decoration: none !important; }
.brand-crest { flex: 0 0 64px; width: 64px; height: 68px; background: white; border-radius: 8px; display: flex; justify-content: center; align-items: center; }
.brand-crest img { object-fit: contain; }
.brand-text { display: flex; flex-direction: column; }
.brand-eyebrow { font-size: 11px; font-weight: 700; color: var(--portal-yellow); margin-bottom: 2px; }
.brand-name { color: white; font-size: 22px; font-weight: 700; line-height: 1.25; }
.brand-location { color: #c2c9e5; font-size: 13px; margin-top: 3px; }
.brand-hours { display: flex; flex-direction: column; text-align: right; color: white; flex-shrink: 0; }
.brand-hours span { font-size: 11px; color: #c3e2f4; }
.brand-hours strong { font-size: 14px; }
.portal-nav { background: #1a1c1e; }
.nav-content { min-height: 60px; display: flex; align-items: stretch; gap: 30px; }
.portal-nav a { color: #fff; font-size: 14px; }
.portal-nav a:hover { color: #fbc357; text-decoration: none; }
.portal-home, .nav-section, .account-link { display: flex; align-items: center; gap: 9px; padding: 17px 0; border-bottom: 3px solid transparent; }
.portal-home i { font-size: 12px; color: #b4b7c0; }
.nav-section { font-weight: 600; }
.portal-nav .is-active { border-bottom-color: var(--portal-yellow); }
.nav-caption { margin-left: auto; align-self: center; font-size: 13px; color: #c1c3cd; display: flex; align-items: center; gap: 8px; }
.account-nav { margin-left: auto; display: flex; gap: 24px; }
.account-link i { color: #95c8f1; }
.portal-main { flex: 1; padding-bottom: 48px; }
.portal-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--portal-muted); padding: 22px 0; }
.portal-breadcrumb i { font-size: 9px; }
.auth-heading { text-align: center; margin: 10px auto 26px; padding: 0 20px; }
.section-eyebrow { color: var(--portal-purple); font-size: 11px; font-weight: 700; text-transform: uppercase; margin: 0 0 8px; }
.auth-heading h1 { color: var(--portal-indigo); font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.auth-heading p:last-child { font-size: 15px; color: var(--portal-muted); margin: 0; }
.auth-form { max-width: 448px; width: calc(100% - 40px); margin: 0 auto; background: white; border: 1px solid var(--portal-border); border-top: 3px solid var(--portal-purple); border-radius: 8px; padding: 30px 32px; box-shadow: 0 8px 24px rgba(26, 8, 69, .05); }
.form-title { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.form-title > i { color: var(--portal-purple); font-size: 18px; }
.form-title h2 { font-size: 20px; font-weight: 600; margin: 0; }
.field { margin-bottom: 20px; min-width: 0; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.portal-page .form-control { min-height: 46px; height: auto; border: 1px solid #cbd2de; border-radius: 5px; color: var(--portal-ink); background: #fff; padding: 10px 12px; box-shadow: none; }
.portal-page .form-control::placeholder { color: #7a7e8c; opacity: 1; }
.portal-page .form-control:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 3px rgba(0, 101, 184, .12); }
.input-with-icon { position: relative; }
.input-with-icon > i { position: absolute; left: 14px; top: 16px; color: #7a7e8c; font-size: 14px; pointer-events: none; }
.input-with-icon .form-control { padding-left: 40px; }
.password-field .form-control { padding-right: 48px; }
.password-toggle { position: absolute; top: 1px; bottom: 1px; right: 1px; width: 44px; background: transparent; border: 0; border-radius: 4px; color: #626777; cursor: pointer; }
.password-toggle:hover { color: var(--portal-purple); background: #f2f0f7; }
.portal-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 46px; padding: 10px 18px; border: 1px solid var(--portal-blue); background: var(--portal-blue); color: white !important; border-radius: 5px; font-weight: 600 !important; font-size: 15px; line-height: 1.5; cursor: pointer; text-align: center; }
.portal-button:hover { background: #00549c; border-color: #00549c; text-decoration: none !important; }
.portal-button:disabled { cursor: wait; opacity: .65; }
.button-full { width: 100%; }
.button-outline { background: white; color: var(--portal-blue) !important; }
.button-outline:hover { background: #eef6fc; }
.auth-help { border-top: 1px solid var(--portal-border); padding-top: 22px; margin-top: 25px; display: flex; align-items: flex-start; gap: 12px; }
.auth-help > i { color: var(--portal-purple); margin-top: 4px; }
.auth-help strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.auth-help p { font-size: 13px; color: var(--portal-muted); margin: 0; }
.auth-return { display: block; text-align: center; margin-top: 20px; font-size: 14px; }
.portal-alert { font-size: 14px; padding: 12px 14px; border-radius: 5px; line-height: 1.5; margin-bottom: 20px; overflow-wrap: anywhere; }
.portal-alert-error { background: #fff0f0; color: #a1202e; border: 1px solid #f0c5ca; }
.auth-alert { display: flex; align-items: flex-start; gap: 10px; }
.auth-alert > i { flex-shrink: 0; margin-top: 3px; font-size: 17px; }
.auth-alert strong { display: block; font-weight: 600; margin-bottom: 4px; }
.auth-alert p { margin: 0; }
.auth-form .form-control[aria-invalid="true"] { border-color: #c8616d; }
.portal-alert-info { background: #edf5fc; color: #165480; border: 1px solid #c3def1; }
.portal-alert-warning { background: #fff9e7; color: #77510a; border: 1px solid #efda9b; }
.portal-alert:empty, #mensaje:empty, #aviso_clave:empty { display: none; }
.portal-footer { background: #fff; border-top: 1px solid var(--portal-border); padding: 24px 0; }
.footer-content { display: flex; align-items: center; gap: 28px; color: var(--portal-muted); font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #41465a; }
.footer-brand img { object-fit: contain; }
.footer-brand small { display: block; color: var(--portal-muted); font-size: 11px; font-weight: 400; }
.footer-content > a { margin-left: auto; }
.footer-content > a i { font-size: 10px; margin-left: 4px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 0 28px; }
.page-heading h1 { font-size: 30px; color: var(--portal-indigo); font-weight: 700; margin: 0; }
.employee-info { text-align: right; color: var(--portal-muted); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.employee-info strong { display: block; color: var(--portal-ink); font-size: 16px; }
.employee-info p { margin: 4px 0 0; }
.services-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; border-top: 1px solid var(--portal-border); padding-top: 28px; }
.receipts-section { min-width: 0; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.section-heading > i { color: var(--portal-purple); font-size: 21px; }
.section-heading h2 { margin: 0; font-size: 22px; font-weight: 600; }
.section-heading p { margin: 4px 0 0; font-size: 14px; color: var(--portal-muted); }
.receipt-filters { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px; align-items: end; margin-bottom: 26px; }
.receipt-filters .field { margin: 0; }
.receipts-section #tipo_liquidacion:not(:empty), .receipts-section #recibo:not(:empty) { margin-top: 24px; overflow-wrap: anywhere; }
.receipts-section .list-group-item { background: #fff; color: var(--portal-ink); border-color: var(--portal-border); }
.receipts-section .btn, .receipts-section input[type=button], .receipts-section input[type=submit] { white-space: normal; max-width: 100%; }
.receipts-section .btn-primary, .receipts-section .btn-info, .receipts-section button.bg-info { background: var(--portal-blue) !important; border-color: var(--portal-blue); color: white; }
.receipts-section .alert img { max-width: 40px; }
.receipt-empty { border-top: 1px solid var(--portal-border); border-bottom: 1px solid var(--portal-border); padding: 38px 20px; text-align: center; color: var(--portal-muted); }
.receipt-empty i { display: block; color: #9ba6bb; font-size: 30px; margin-bottom: 12px; }
.receipt-empty p { font-size: 14px; margin: 0; }
.services-aside { border-left: 1px solid var(--portal-border); padding-left: 28px; min-width: 0; }
.services-aside h2 { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.license-section { padding-bottom: 26px; border-bottom: 1px solid var(--portal-border); margin-bottom: 24px; }
.license-title { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.license-title i { color: var(--portal-purple); }
.license-title h3 { margin: 0; font-size: 16px; font-weight: 600; }
.license-section p { color: var(--portal-muted); font-size: 13px; margin-bottom: 16px; }
.license-section .portal-button { font-size: 14px; }
.service-link { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--portal-border); font-size: 14px; font-weight: 500; }
.service-link > i:first-child { width: 18px; color: var(--portal-purple); }
.service-link > i:last-child { margin-left: auto; font-size: 11px; flex-shrink: 0; }
.service-link span { min-width: 0; }
.account-note { font-size: 12px; color: var(--portal-muted); margin-top: 28px; }
[hidden] { display: none !important; }
@media (min-width: 1600px) { .portal-container { max-width: 1440px; } }
@media (max-width: 1000px) {
  .contact-address { display: none; }
  .services-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  .services-aside { padding-left: 22px; }
  .receipt-filters { grid-template-columns: 1fr 1fr; }
  .receipt-filters .portal-button { grid-column: 1 / -1; }
  .footer-copyright { display: none; }
}
@media (max-width: 700px) {
  .portal-container { width: calc(100% - 32px); }
  .contact-content { min-height: 32px; justify-content: space-between; gap: 10px; font-size: 11px; }
  .contact-hours { display: none; }
  .brand-content { min-height: 98px; }
  .brand-hours { display: none; }
  .municipal-brand { gap: 12px; }
  .brand-crest { width: 50px; height: 58px; flex-basis: 50px; }
  .brand-crest img { width: 34px; height: 47px; }
  .brand-name { font-size: 18px; }
  .brand-eyebrow { font-size: 10px; }
  .brand-location { font-size: 12px; }
  .nav-content { min-height: 53px; gap: 24px; flex-wrap: wrap; }
  .portal-nav a { font-size: 13px; }
  .portal-home, .nav-section { padding: 14px 0; }
  .nav-caption { display: none; }
  .account-nav { width: 100%; margin: -24px 0 0; border-top: 1px solid #393a41; gap: 24px; }
  .account-link { padding: 12px 0; }
  .portal-breadcrumb { padding: 18px 0; flex-wrap: wrap; }
  .auth-heading { margin: 12px auto 24px; }
  .auth-heading h1 { font-size: 26px; }
  .auth-heading p:last-child { font-size: 14px; }
  .auth-form { padding: 26px 24px; width: calc(100% - 32px); }
  .portal-main { padding-bottom: 36px; }
  .footer-content { gap: 16px; flex-wrap: wrap; }
  .footer-brand { font-size: 11px; }
  .footer-content > a { font-size: 11px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-heading h1 { font-size: 26px; }
  .employee-info { text-align: left; }
  .services-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .services-aside { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--portal-border); }
}
@media (max-width: 360px) {
  .brand-name { font-size: 16px; }
  .auth-heading h1 { font-size: 24px; }
  .auth-form { padding: 24px 20px; }
  .footer-content > a { margin-left: 34px; }
}