/* TuArea travel portal. Shared presentation, compatible with Bootstrap 3. */
:root {
  --portal-accent: #007e88;
  --portal-deep: #005368;
  --portal-ink: #102d46;
  --portal-muted: #435f76;
  --portal-line: #d9edf1;
  --portal-soft: #e4f6f7;
  --portal-yellow: #ffc400;
  --portal-radius: 16px;
}
body {
  padding: 24px 0 40px;
  background: radial-gradient(ellipse at 50% 0, #e3f6fa, #f8fcfd 65%, #fff);
  color: var(--portal-ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
body > .container {
  width: calc(100% - 32px);
  max-width: 1240px;
  min-height: 0;
  padding: 18px 24px 24px !important;
  background: linear-gradient(135deg, #fff 35%, #f2fbfe);
  border: 1px solid #e1f0f4;
  border-radius: 28px;
  box-shadow: 0 8px 24px #006b8021, 0 1px 4px #006b800c;
}
a { color: var(--portal-accent); }
a:hover { color: var(--portal-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #efb400;
  outline-offset: 3px;
}
h1, h2, h3 { color: var(--portal-deep); font-weight: 750; letter-spacing: -.035em; line-height: 1.2; }
h1 { font-size: 30px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
.lead { font-size: 16px; line-height: 1.7; color: var(--portal-muted); }

/* A panoramic image is decoration; every agency retains its own logo and details. */
.portal-brand {
  display: flex;
  position: relative;
  align-items: center;
  gap: 22px;
  min-height: 98px;
  margin: -8px -12px 0;
  padding: 12px 24px 16px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(100deg, #fff 0%, #fff 39%, #edfafff5 51%, #e9f9ff00 72%), url('../img/portal-mediterraneo.jpg') right 56% / auto 280px no-repeat;
}
.portal-brand-logo-wrap { flex: 0 0 120px; padding-right: 20px; border-right: 1px solid #abcbd8; text-align: center; }
.portal-brand-logo { display: block; max-width: 100%; width: auto; height: auto; max-height: 70px; object-fit: contain; margin: auto; }
.portal-brand-details { min-width: 0; flex: 0 1 60%; }
.portal-agency-name { color: #004c64; font-size: 25px; font-weight: 800; letter-spacing: -.6px; overflow-wrap: anywhere; }
.portal-brand-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 0; margin-top: 6px; font-size: 12px; }
.portal-brand-contact > * { color: #13364f; padding: 0 12px; border-left: 1px solid #b2cfd9; overflow-wrap: anywhere; }
.portal-brand-contact > :first-child { padding-left: 0; border-left: 0; }
.portal-brand-contact .fa { color: #00858c; margin-right: 5px; }

/* Teal navigation with a white pill marking the current section. */
.masthead .navbar, .masthead .nav.nav-justified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-height: none;
  min-height: 48px;
  margin: 0 0 24px;
  padding: 5px 8px;
  background: linear-gradient(100deg, #00788a, #008e96 50%, #006779);
  border: 0;
  border-radius: 23px;
  box-shadow: 0 5px 10px #00a6b02a;
}
.masthead .navbar::before, .masthead .navbar::after,
.masthead .nav.nav-justified::before, .masthead .nav.nav-justified::after { display: none; }
.masthead .navbar-nav {
  display: flex; flex-wrap: wrap; align-items: center; float: none !important; margin: 0; gap: 4px; flex: 1 1 auto;
}
.masthead .navbar-right { flex: 0 1 auto; }
.masthead .navbar-nav > li, .masthead .nav.nav-justified > li {
  float: none; display: block; flex: 1 1 auto; min-width: 0; width: auto; padding-right: 0 !important;
}
.masthead .navbar-nav > li:empty, .masthead .nav.nav-justified > li:empty { display: none; }
.masthead .navbar-nav > li > a, .masthead .nav.nav-justified > li > a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 15px; margin: 0; min-height: 38px; border: 0; border-radius: 22px;
  background: none; background-image: none; box-shadow: none; color: #fff;
  font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.masthead .navbar-nav > li > a:hover, .masthead .navbar-nav > li > a:focus,
.masthead .nav.nav-justified > li > a:hover, .masthead .nav.nav-justified > li > a:focus { color: #fff; background: #ffffff1a; }
.masthead .navbar-default .navbar-nav > .active > a,
.masthead .navbar-default .navbar-nav > .active > a:hover,
.masthead .navbar-default .navbar-nav > .active > a:focus,
.masthead .nav.nav-justified > .active > a,
.masthead .nav.nav-justified > .active > a:hover,
.masthead .nav.nav-justified > .active > a:focus {
  background: linear-gradient(#fff, #dff7f8); color: #005b6b; border: 0; border-radius: 22px;
  box-shadow: 0 2px 7px #00384c2b; font-weight: 750;
}
.masthead .navbar .fa, .masthead .nav-justified .fa { font-size: 18px; flex: none; }
.masthead .nav.nav-justified > li:last-child:not(:first-child) { flex: 0 1 auto; margin-left: auto; }
.masthead .nav.nav-justified > li > img { max-height: 36px; width: auto; }

.portal-page-heading {
  position: relative;
  margin: 0 8px 26px;
  padding: 0 260px 0 16px;
  border-left: 4px solid var(--portal-yellow);
  min-height: 58px;
}
.portal-page-heading h1 { margin: 0 0 6px; font-size: 30px; }
.portal-page-heading p { margin: 0; font-size: 14px; color: var(--portal-ink); }
.portal-page-heading::after {
  content: ''; position: absolute; right: 10px; top: -14px; width: 240px; height: 90px;
  background: url('../img/portal-flight.svg') center / contain no-repeat; pointer-events: none;
}

/* Reservation rows retain all data, IDs and document actions. */
.portal-list {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid #ceeaf1; border-radius: var(--portal-radius);
  overflow: hidden; box-shadow: 0 4px 8px #00a0b314;
}
.portal-list tr { background: #fff; }
.portal-list tr:hover { background: #f2fbfc; }
.portal-list td, .portal-list th { padding: 13px 12px; vertical-align: middle; border-bottom: 1px solid #e0eef3; width: auto !important; }
.portal-list th { background: #e5f4f7; color: #142a4c; font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; }
.portal-list tr:last-child td { border-bottom: 0; }
.portal-list th:first-child { min-width: 100px; }
.portal-list td:nth-child(2), .portal-list td:nth-child(3), .portal-list td:nth-child(4) { font-size: 13px; font-variant-numeric: tabular-nums; }
.portal-list td:nth-child(5), .portal-list th:nth-child(5) { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.portal-list td:nth-child(5) { color: #006d79; font-size: 17px; font-weight: 800; }
.portal-list td:nth-child(6) { font-weight: 600; overflow-wrap: anywhere; }
.portal-list td:last-child, .portal-list th:last-child { text-align: center; }
.portal-list td:last-child, .portal-list th:last-child { width: 1% !important; min-width: 150px; white-space: nowrap; }
.portal-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; color: #007780; background: #e0f7f5; font-size: 12px; font-weight: 700; white-space: nowrap; }
.portal-status .fa { color: inherit !important; font-size: 14px !important; }
.portal-status--ok { color: #145e27; background: #e6f9dd; }
.portal-status--pending { color: #82570b; background: #fff1cd; }
.portal-list .portal-doc-stack { display: inline-flex; position: static; width: auto; height: auto; line-height: normal; vertical-align: middle; }
.portal-doc-stack > .fa-file-o { display: none; }
.portal-doc-link {
  display: inline-flex !important; position: static !important; align-items: center; justify-content: center; gap: 5px;
  width: auto !important; height: auto !important; min-height: 32px; line-height: 1.4 !important;
  padding: 5px 10px !important; border: 1px solid #3bb6c0; border-radius: 20px;
  color: #007783 !important; background: #faffff; font-size: 12px; font-weight: 650; white-space: nowrap;
}
.portal-doc-link:hover { text-decoration: none; background: #e0f7f7; }
.portal-doc-link .fa { font-size: 14px; }
.portal-no-docs { color: #24415b; font-size: 12px; }
.portal-mobile-label { display: none; }

.portal-profile-card {
  width: 100%; max-width: 590px; margin: 6px 0 26px; padding: 22px;
  background: linear-gradient(130deg, #fff, #f6fbff); border: 1px solid #d8edf5;
  border-radius: 20px; box-shadow: 0 5px 9px #00809f18;
}
.portal-profile-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.portal-profile-card-header h2 { margin: 0; font-size: 23px; }
.portal-profile-avatar { display: grid; place-items: center; width: 50px; height: 50px; flex: none; color: #fff; background: linear-gradient(145deg, #00d5cc, #00a5b7); border-radius: 50%; font-size: 25px; }
.portal-profile-card-header .portal-profile-action { margin-left: auto; border-radius: 20px; padding: 7px 11px; font-size: 12px; color: #007d83; border: 1px solid #4ebec3; background: #fff; }
.portal-data-table { width: 100%; table-layout: fixed; }
.portal-data-table td { padding: 11px 6px; border-bottom: 1px solid #e0edf4; overflow-wrap: anywhere; }
.portal-data-table tr:last-child td { border-bottom: 0; }
.portal-data-table td:first-child { width: 34%; color: #183754; }
.portal-data-table td:first-child .fa { color: #00878c; margin-right: 6px; font-size: 19px; }
.portal-data-table td:nth-child(2) { display: none; }

.portal-empty-state {
  display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden;
  padding: 20px 155px 20px 22px; margin: 0 0 24px;
  background: linear-gradient(110deg, #e8f6f4, #c9f2fa); border: 1px solid #ccebf0; border-radius: 15px;
}
.portal-empty-state::after { content: ''; position: absolute; width: 145px; height: 100%; bottom: 0; right: 0; background: url('../img/portal-island.svg') bottom right / contain no-repeat; }
.portal-empty-state > .fa { display: grid; place-items: center; flex: 0 0 58px; height: 58px; color: #eba600; background: #fff1bf; border-radius: 50%; font-size: 29px; }
.portal-empty-state h2 { margin: 0 0 6px; font-size: 21px; }
.portal-empty-state p { margin: 0; color: #17354c; font-size: 13px; }

.portal-banner {
  width: 100% !important; max-width: 100%; box-sizing: border-box; height: auto !important; min-height: 0 !important;
  margin: 26px 0 0 !important; padding: 16px !important;
  border: 1px solid #d5edf3; border-radius: 18px; background: #f1fbfd; color: var(--portal-ink); overflow-wrap: anywhere;
}
.portal-banner > * { max-width: 100% !important; box-sizing: border-box; }
.portal-banner img { display: block; max-width: 100% !important; height: auto !important; margin-left: auto; margin-right: auto; border-radius: 12px; }
.portal-banner table { width: 100% !important; table-layout: fixed; }
.portal-banner td { overflow-wrap: anywhere; }
.portal-banner iframe, .portal-banner video { max-width: 100%; }
.portal-banner p:last-child { margin-bottom: 0; }
.portal-inspiration {
  min-height: 185px; display: flex; align-items: center; margin-top: 26px; padding: 24px 46px;
  overflow: hidden; border-radius: 18px; color: #fff;
  background: linear-gradient(100deg, #005d77 0%, #00a5b5ec 33%, #00b8bf44 62%, #005d7700 80%), url('../img/portal-mediterraneo.jpg') center 58% / cover;
}
.portal-inspiration .portal-inspiration-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; }
.portal-inspiration h2 { font-size: 29px; color: #fff; margin: 5px 0 14px; max-width: 340px; line-height: 1.05; }
.portal-inspiration .portal-inspiration-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; padding: 7px 18px; border: 1px solid #fff; border-radius: 24px; background: #f47700; text-decoration: none; }
.portal-inspiration .portal-inspiration-link:hover { background: #b95400; }

.btn { padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 20px; white-space: normal; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-success, .btn-primary, .btn-info { background: linear-gradient(110deg, #00818d, #009ea5); border-color: #00818d; color: #fff; }
.btn-success:hover, .btn-primary:hover, .btn-info:hover, .btn-success:focus, .btn-primary:focus, .btn-info:focus { background: #006b7a; border-color: #006b7a; color: #fff; }
.btn-default { background: #fff; border-color: #c9e1e8; color: var(--portal-deep); }
.form-control { min-height: 44px; font-size: 15px; color: var(--portal-ink); padding: 10px 12px; border-radius: 9px; border-color: #bddae2; box-shadow: none; }
.form-control:focus { border-color: #008b97; box-shadow: 0 0 0 3px #008b9718; }
textarea.form-control { min-height: 130px; }
.input-group-addon { color: #00818d; background: #eff8fa; border-color: #bddae2; border-radius: 9px; }
.portal-field-label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.portal-login { max-width: 420px; margin: 28px auto; padding: 28px; border: 1px solid #d7eaf0; border-radius: 20px; background: linear-gradient(140deg, #fff, #f0faff); box-shadow: 0 5px 12px #007e8814; text-align: left; }
.portal-login > div { width: 100% !important; }
.portal-login .input-group { margin-bottom: 18px; }
.portal-login p { text-align: center; }
.portal-login .btn { width: 100%; }
.portal-login .btn-default { font-size: 13px; }
.portal-login .portal-field-label { margin-top: 12px; }
.portal-login > div > br { display: none; }
.portal-login .input-group .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.well { background: #eef8fa; border: 1px solid #dceef2; box-shadow: none; border-radius: 16px; padding: 24px; margin: 24px 0; }
.well h2 { font-size: 19px; }
.well p { color: var(--portal-muted); font-size: 14px; }
.well .glyphicon, .well .fa { color: #008795 !important; font-size: 30px !important; }
.alert { border-radius: 12px; }
.footer { margin-top: 32px; padding: 22px 0 0; border-top: 1px solid #d8edf0; font-size: 12px; }
.footer p, .footer .lnk3 { color: var(--portal-muted) !important; }
.CapaDocs { max-width: min(560px, calc(100vw - 32px)); padding: 20px; background: #fff; border: 1px solid #b6dce7; border-radius: 15px; box-shadow: 0 10px 30px #00536826; overflow-wrap: anywhere; font-size: 14px; line-height: 2; }
.CapaDocs a { display: inline-block; min-height: 36px; max-width: 100%; }
#dCapaDocs {
  width: 300px; max-width: calc(100vw - 32px); padding: 0;
  border: 1px solid #bde2e9; border-radius: 17px;
  box-shadow: 0 14px 42px #004f6929, 0 3px 8px #004f6912;
  line-height: 1.5;
}
.portal-doc-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #d9edf1; background: #f0f9fa; border-radius: 17px 17px 0 0; }
.portal-doc-header > .fa { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: #d7f1f2; color: #007e88; font-size: 19px; }
.portal-doc-heading { flex: 1; min-width: 0; }
.portal-doc-heading h2 { margin: 0; font-size: 14px; letter-spacing: 0; font-weight: 700; }
.portal-doc-heading p { margin: 0; color: #4e687b; font-size: 12px; }
.portal-doc-close { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #c9e5eb; border-radius: 50%; color: #326373; background: #fff; }
.portal-doc-close:hover { background: #dff2f5; }
.portal-document-list { display: grid; gap: 4px; margin: 0; padding: 8px; list-style: none; max-height: 330px; overflow-y: auto; }
#dCapaDocs .portal-document-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; color: #005a6e; background: #fff; border: 1px solid transparent; border-radius: 9px; text-decoration: none; overflow-wrap: anywhere; font-size: 13px; }
#dCapaDocs .portal-document-item:hover { background: #eaf7f9; border-color: #85cbd4; }
.portal-document-item > .fa { flex: none; color: #00828d; font-size: 21px; }
.portal-doc-message { padding: 22px; color: #526a7b; font-size: 13px; }
.portal-doc-message .fa { margin-right: 8px; font-size: 18px; color: #00828d; }
.BloqueOfertas, .BloqueOfertasIzq { width: calc(50% - 18px) !important; padding: 22px !important; margin: 8px; border: 1px solid #cde9ef !important; border-radius: 18px; box-shadow: 0 4px 9px #007e8812; background: #fff; vertical-align: top !important; }
.BloqueOfertas table, .BloqueOfertasIzq table { width: 100% !important; }
.BloqueOfertas img, .BloqueOfertasIzq img { max-width: 100%; height: auto; border-radius: 12px; }
.BloqueOfertas h1, .BloqueOfertasIzq h1 { font-size: 23px; }
.PrecioOfer2 { color: #007e88; font-size: 22px; font-weight: 750; }

@media (max-width: 1100px) {
  .portal-brand-details { flex-basis: 68%; }
  .masthead .navbar { border-radius: 20px; }
  .masthead .navbar-right { flex: 1 1 auto; }
  .masthead .navbar-nav > li > a { padding: 9px 12px; }
  .portal-list td, .portal-list th { padding: 12px 8px; }
}
@media (max-width: 900px) {
  .portal-brand { background-size: auto, auto 230px; padding: 16px; }
  .portal-brand-details { flex-basis: 75%; }
  .portal-agency-name { font-size: 22px; }
  .portal-brand-contact { font-size: 11px; }
  .portal-page-heading { padding-right: 160px; }
  .portal-page-heading::after { width: 150px; }
}
@media (max-width: 767px) {
  body { padding: 12px 0 24px; }
  body > .container { width: calc(100% - 20px); padding: 14px !important; border-radius: 20px; }
  .portal-brand { padding: 12px 10px 18px; gap: 14px; margin: -4px -4px 0; min-height: 110px; background: linear-gradient(100deg, #fffffff5 20%, #ffffffd9 60%, #ffffff9c), url('../img/portal-mediterraneo.jpg') right center / cover; }
  .portal-brand-logo-wrap { flex-basis: 82px; padding-right: 12px; }
  .portal-brand-logo { max-height: 58px; }
  .portal-brand-details { flex: 1; }
  .portal-agency-name { font-size: 19px; line-height: 1.2; }
  .portal-brand-contact { gap: 4px 8px; margin-top: 7px; }
  .portal-brand-contact > * { padding: 0; border: 0; }
  .masthead .navbar, .masthead .nav.nav-justified { margin-bottom: 22px; padding: 6px; border-radius: 16px; gap: 4px; }
  .masthead .navbar-nav { flex: 1 1 100%; gap: 4px; }
  .masthead .navbar-nav > li { flex: 1 1 auto; }
  .masthead .navbar-nav > li > a, .masthead .nav.nav-justified > li > a { min-height: 44px; padding: 9px 10px; font-size: 12px; gap: 7px; }
  .masthead .navbar .fa { font-size: 17px; }
  .portal-page-heading { margin: 0 0 22px; padding-left: 12px; padding-right: 0; min-height: 0; }
  .portal-page-heading h1 { font-size: 26px; }
  .portal-page-heading p { font-size: 13px; }
  .portal-page-heading::after { display: none; }
  .portal-list { display: block; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .portal-list tbody { display: grid; gap: 16px; }
  .portal-list tr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; border: 1px solid #cde9ef; border-radius: 16px; box-shadow: 0 3px 8px #007e8810; }
  .portal-list tr:first-child { display: none; }
  .portal-list td { display: block; padding: 0 !important; border: 0; min-width: 0; text-align: left !important; }
  .portal-list td:nth-child(6) { grid-column: 1 / -1; grid-row: 1; font-size: 17px; }
  .portal-list td:first-child { grid-column: 1 / -1; grid-row: 2; }
  .portal-list td:nth-child(5) { text-align: left !important; }
  .portal-list td:last-child { align-self: end; }
  .portal-list td:last-child { width: auto !important; min-width: 0; white-space: normal; }
  .portal-mobile-label { display: block; margin-bottom: 3px; color: var(--portal-muted); font-size: 11px; font-weight: 400; }
  .portal-doc-link { min-height: 40px; }
  .portal-profile-card { padding: 18px 14px; }
  .portal-profile-card-header { gap: 10px; }
  .portal-profile-card-header h2 { font-size: 21px; }
  .portal-profile-card-header .portal-profile-action { margin-left: 0; min-height: 40px; }
  .portal-data-table td:first-child { width: 38%; }
  .portal-data-table td { padding: 11px 4px; font-size: 13px; }
  .portal-data-table td:first-child .fa { margin-right: 2px; font-size: 16px; }
  .portal-empty-state { align-items: flex-start; padding: 18px; gap: 12px; }
  .portal-empty-state::after { display: none; }
  .portal-empty-state > .fa { flex-basis: 42px; height: 42px; font-size: 23px; }
  .portal-empty-state h2 { font-size: 19px; }
  .portal-banner { padding: 10px !important; }
  .portal-inspiration { min-height: 190px; padding: 24px; background-position: center, 65% center; }
  .portal-inspiration h2 { font-size: 25px; max-width: 260px; }
  .BloqueOfertas, .BloqueOfertasIzq { width: 100% !important; margin: 10px 0; }
  .CapaDocs { max-width: calc(100vw - 32px); }
  .CapaDocs table { width: 100% !important; }
  .CapaDocs .form-control { max-width: 100%; }
  .portal-login { padding: 20px; margin: 24px auto; }
  .well { padding: 18px; }
  .well .col-lg-1 { display: none; }
  .well .col-lg-5 { margin-bottom: 18px; }
  .well .col-lg-5:last-child { margin-bottom: 0; }
}