/* Shared catalogue and service navigation. */
:root {
  --guide-ink: #103654; --guide-muted: #4d6a7e; --guide-blue: #096586;
  --guide-page: #f4f9fc; --guide-tint: #e7f3fa; --guide-line: #cedfe9;
  --guide-sun: #ffda47; --guide-card: #fff; --guide-radius: 18px;
  --guide-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --guide-width: 1160px;
}
html:has(.guide-page) { color-scheme: light; }
body.guide-page { margin: 0; color: var(--guide-ink); background: var(--guide-page); font-family: var(--guide-font); }
.guide-page *, .guide-page *::before, .guide-page *::after { box-sizing: border-box; }
.guide-page :where(a,button,select,input,summary):focus-visible { outline: 3px solid #08739a; outline-offset: 3px; }
.guide-page [hidden] { display: none !important; }
.guide-page .guide-bar {
  position: relative; z-index: 15; width: 100%; max-width: none; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--guide-line); background: #fff;
}
.guide-bar-inner { width: min(calc(100% - 48px),var(--guide-width)); min-height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.guide-page .guide-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--guide-ink); text-decoration: none; font: 750 20px/1.05 var(--guide-font); letter-spacing: -.8px; white-space: nowrap; }
.guide-brand img { display: block; width: 40px; height: 40px; border-radius: 12px; }
.guide-brand small { display: block; margin-top: 4px; color: var(--guide-muted); font-size: 10px; line-height: 1.2; font-weight: 650; text-transform: uppercase; letter-spacing: 1.1px; }
.guide-bar .guide-nav, .guide-bar .guide-menu nav { display: flex; gap: 2px; width: auto; padding: 0; margin: 0; background: transparent; border: 0; }
.guide-bar nav a { min-height: 42px; display: flex; align-items: center; padding: 8px 12px; border-radius: 22px; color: var(--guide-muted); text-decoration: none; font: 620 13px/1.25 var(--guide-font); }
.guide-bar nav a:hover, .guide-bar nav a:focus-visible { color: var(--guide-ink); background: #eef6fa; }
.guide-bar nav a[aria-current=page] { background: var(--guide-tint); color: var(--guide-ink); }
.guide-bar .guide-download, .business-invite a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; gap: 10px; white-space: nowrap; border-radius: 24px; background: var(--guide-sun); color: var(--guide-ink); text-decoration: none; font: 700 13px/1.2 var(--guide-font); }
.guide-bar .guide-download:hover, .business-invite a:hover { background: #ffcf23; text-decoration: none; }
.guide-bar .guide-menu { display: none; }
.guide-menu summary { min-height: 40px; padding: 9px 14px; align-items: center; gap: 8px; border: 1px solid var(--guide-line); border-radius: 25px; cursor: pointer; list-style: none; font: 650 13px var(--guide-font); }
.guide-menu summary::-webkit-details-marker { display: none; }
.guide-menu summary i { display: block; width: 13px; height: 8px; border-block: 2px solid currentColor; }
.guide-menu[open] summary { background: var(--guide-tint); }
.guide-bar .guide-menu nav { position: absolute; right: 15px; top: calc(100% - 3px); width: min(275px,90vw); padding: 9px; display: grid; background: #fff; border: 1px solid var(--guide-line); border-radius: 15px; box-shadow: 0 12px 35px #14334d29; }
.guide-menu:not([open]) nav { visibility: hidden; }
.guide-page .wrap, .guide-page .shell, .guide-page .ferry-wrap, .view-catalog main, .view-catalog footer, .ferry-footer { width: min(calc(100% - 48px),var(--guide-width)); max-width: none; padding-inline: 0; margin-inline: auto; }
.guide-page .guide-hero { margin: 24px 0; display: flex; justify-content: space-between; overflow: hidden; background: #e3f3fb; border: 1px solid var(--guide-line); border-radius: var(--guide-radius); }
.guide-hero-copy { align-self: center; min-width: 0; padding: 21px clamp(20px,3vw,38px) 25px; }
.guide-page .guide-back { display: inline-flex; align-items: center; min-height: 29px; color: #265a74; font: 650 13px/1.4 var(--guide-font); text-decoration: none; }
.guide-back:hover { text-decoration: underline; }
.guide-page .guide-hero h1, .view-catalog .intro h1 { color: var(--guide-ink); font: 750 clamp(32px,4.1vw,52px)/1.02 var(--guide-font); letter-spacing: -.055em; margin: 7px 0 10px; text-wrap: balance; }
.guide-page .guide-hero p, .view-catalog .lead { margin: 0; max-width: 57ch; color: var(--guide-muted); font: 450 15px/1.55 var(--guide-font); }
.guide-hero-art { flex: 0 0 min(29%,280px); min-height: 148px; align-self: stretch; background-size: 200% auto; background-position: right center; position: relative; }
.guide-hero-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#e3f3fb,transparent 28%); }
.art-guaguas { background-image: url('/assets/guaguas.webp'); }
.art-gasolineras { background-image: url('/assets/gasolineras.webp'); }
.art-radar { background-image: url('/assets/radar.webp'); }
.art-ferries { background-image: url('/assets/ferries.webp'); }
.guide-page :where(main,aside,dialog) :is(h2,h3) { color: var(--guide-ink); font-family: var(--guide-font); letter-spacing: -.037em; }
.view-catalog .intro { padding: clamp(26px,3.5vw,48px) 0 22px; }
.view-catalog .intro h1 { margin-top: 0; }
.catalog-filter, .island-switch { display: flex; align-items: center; gap: 12px; }
.catalog-filter { margin-bottom: 22px; flex-wrap: wrap; }
.catalog-filter label, .island-switch label { font: 700 14px var(--guide-font); }
.catalog-filter select, .island-switch select { border: 1px solid #a9c3d4; border-radius: 12px; background: #fff; color: var(--guide-ink); padding: 9px 12px; min-height: 44px; font: 650 15px var(--guide-font); }
.view-catalog .services { gap: 22px; }
.view-catalog .card { border-color: var(--guide-line); border-radius: var(--guide-radius); box-shadow: 0 3px 12px #12364c08; }
.view-catalog .caption { padding: 16px 19px; font-size: 15px; }
.view-catalog .caption small { color: var(--guide-muted); font-size: 12px; }
.view-catalog .caption b,.view-ferries .operator i { background: #e9f4f9; color: #205874; }
.business-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 30px 0 12px; padding: 24px clamp(18px,3vw,32px); background: #e7f3fa; border: 1px solid var(--guide-line); border-radius: var(--guide-radius); }
.business-invite h2 { margin: 0 0 5px; font-size: 22px; }
.business-invite p { margin: 0; color: var(--guide-muted); font: 14px/1.5 var(--guide-font); }
.view-catalog footer, .ferry-footer { color: var(--guide-muted); padding-block: 20px 25px; }
.guaguas-local-card { display: flex; min-height: 150px; aspect-ratio: 1705/922; align-items: center; gap: 4%; padding: 7%; background: linear-gradient(125deg,#d1f0fa,#a5d9ec 62%,#dce9c2); }
.guaguas-local-card strong { font: 750 clamp(24px,3vw,38px)/1.07 var(--guide-font); letter-spacing: -.045em; }
.guaguas-local-card img { width: 34%!important; height: auto; aspect-ratio: 1!important; }
@media (max-width: 940px) {
  .guide-bar .guide-nav { display: none; }
  .guide-bar .guide-menu,.guide-menu summary { display: flex; }
  .guide-bar .guide-download { margin-left: auto; background: transparent; padding-inline: 4px; }
}
@media (max-width: 650px) {
  .guide-bar-inner { width: calc(100% - 28px); min-height: 56px; gap: 12px; }
  .guide-bar .guide-brand { font-size: 17px; gap: 8px; }
  .guide-brand img { width: 33px; height: 33px; }
  .guide-brand small { font-size: 9px; margin-top: 2px; }
  .guide-bar .guide-download { display: none; }
  .guide-page .wrap,.guide-page .shell,.guide-page .ferry-wrap,.view-catalog main,.view-catalog footer,.ferry-footer { width: calc(100% - 28px); }
  .guide-page .guide-hero { margin: 14px 0; border-radius: 15px; }
  .guide-hero-copy { padding: 12px 14px 16px; }
  .guide-page .guide-hero h1 { font-size: clamp(24px,6.8vw,36px); margin: 4px 0 6px; }
  .guide-page .guide-hero p { font-size: 13px; line-height: 1.4; }
  .guide-hero-art { flex-basis: 26%; min-height: 102px; background-size: auto 120%; }
  .view-catalog .services { gap: 14px; }
  .view-catalog .caption { padding: 12px 14px; font-size: 14px; }
  .view-catalog .intro { padding: 26px 0 16px; }
  .catalog-filter { margin-bottom: 16px; }
  .business-invite { padding: 18px; }
}
/* Buses and departure boards */
.view-guaguas .island-switch { position: sticky; top: 0; z-index: 4; width: fit-content; margin: 0 0 16px; padding: 5px 6px 5px 15px; background: #fff; border: 1px solid var(--guide-line); border-radius: 14px; box-shadow: 0 3px 9px #1036540c; }
.view-guaguas .island-switch select { min-height: 38px; background: var(--guide-tint); border: 0; }
.view-guaguas #choices { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.view-guaguas .choice { position: relative; gap: 12px; padding: 18px; border: 1px solid var(--guide-line); border-radius: 16px; background: white; color: var(--guide-ink); }
.view-guaguas .choice:hover { border-color: #7ba4ba; background: #fbfdff; }
.view-guaguas .choice strong { font-size: 19px; line-height: 1.2; letter-spacing: -.045em; }
.view-guaguas .choice small { color: var(--guide-muted); }
.view-guaguas .choice b { color: var(--guide-blue); font-weight: 550; }
.view-guaguas .island-icon { width: 39px; height: 39px; padding: 3px; flex: none; }
.view-guaguas .choice > span { flex: 1; }
.view-guaguas .card { border: 1px solid var(--guide-line); border-radius: var(--guide-radius); background: var(--guide-card); }
.view-guaguas .finder h2,.view-guaguas .sheet h2,.view-guaguas .lineFinder h2 { font-size: clamp(21px,2vw,27px); font-weight: 720; }
.view-guaguas .boardHead { background: #e3f2fa; border-color: var(--guide-line); }
.view-guaguas .boardHead h2 { font-size: clamp(23px,2.5vw,32px); }
.view-guaguas #stopCode { color: #365d73; font: 700 11px/1.4 var(--guide-font); letter-spacing: 1.2px; }
.view-guaguas .near { color: var(--guide-ink); background: var(--guide-sun); border-radius: 12px; min-height: 43px; }
.view-guaguas .search,.view-guaguas .lineFinder input { border: 1px solid #aac4d3; border-radius: 12px; color: var(--guide-ink); }
.view-guaguas .finder label,.view-guaguas #geo,.view-guaguas .source,.view-guaguas .sheet p,.view-guaguas .boardFoot { color: var(--guide-muted); }
.view-guaguas .stopBtn,.view-guaguas .route { min-height: 44px; border-color: var(--guide-line); color: var(--guide-ink); }
.view-guaguas .route { font-size: 14px; padding: 10px; }
.view-guaguas .route strong,.view-guaguas .line { border-radius: 7px; background: #104868; color: white; font-weight: 720; }
.view-guaguas .route strong { padding: 3px 7px; min-width: 34px; text-align: center; }
.view-guaguas .route[aria-current=true],.view-guaguas .stopBtn[aria-current=true],.view-guaguas .stopBtn:hover,.view-guaguas .route:hover { background: var(--guide-tint); }
.view-guaguas .stopBtn { padding-inline: 8px; }
.view-guaguas .stopBtn small,.view-guaguas .trip time small { color: #45667c; }
.view-guaguas .tag,.view-guaguas .times li { background: var(--guide-tint); color: var(--guide-ink); }
.view-guaguas .tag { border-radius: 20px; }
.view-guaguas .trip,.view-guaguas .boardFoot,.view-guaguas .sheet td { border-color: var(--guide-line); }
.view-guaguas #networks a[aria-current=page] { background: #134766; color: #fff; }
.view-guaguas #networks a { min-height: 42px; border-color: var(--guide-line); }
.view-guaguas .boardFoot a,.view-guaguas .source a,.view-guaguas .sheet a { color: var(--guide-blue); }
.view-guaguas footer { border-color: var(--guide-line); color: var(--guide-muted); font-size: 12px; }
.view-guaguas .board { min-width: 0; scroll-margin-top: 64px; }
.view-guaguas .sheet { min-width: 0; scroll-margin-top: 64px; }
@media (max-width: 900px) { .view-guaguas #choices { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) {
  .view-guaguas .island-switch { margin-bottom: 11px; }
  .view-guaguas #choices { gap: 9px; }
  .view-guaguas .choice { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px; padding: 14px; }
  .view-guaguas .choice>span { grid-column: 1/-1; grid-row: 2; }
  .view-guaguas .choice .island-icon { width: 34px; height: 34px; }
  .view-guaguas .choice b { grid-column: 2; grid-row: 1; }
  .view-guaguas .choice strong { font-size: 17px; }
  .view-guaguas .choice small { line-height: 1.4; font-size: 12px; }
}
/* Fuel prices */
.view-gasolineras { --ink: var(--guide-ink); --muted: var(--guide-muted); --line: var(--guide-line); --ocean: var(--guide-blue); --foam: var(--guide-tint); --sun: var(--guide-sun); }
.view-gasolineras .filters { padding: 18px 22px; border-radius: var(--guide-radius); }
.view-gasolineras .fuel,.view-gasolineras select,.view-gasolineras #locate { border-radius: 12px; }
.view-gasolineras .list-head h2 { font-size: clamp(23px,2.4vw,31px); }
.view-gasolineras #list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.view-gasolineras #list>.notice { grid-column: 1/-1; }
.view-gasolineras .card { padding: 18px; margin: 0; border-radius: 16px; min-width: 0; }
.view-gasolineras .card h3 { line-height: 1.3; }
.view-gasolineras .card .place { color: var(--guide-blue); }
.view-gasolineras .route,.view-gasolineras #locate,.view-gasolineras #more { color: #174863; background: #eaf4fa; border-color: var(--guide-line); }
.view-gasolineras .price { color: var(--guide-ink); }
.view-gasolineras #geo-message { margin: 12px 2px; }
.view-gasolineras #directions { background: #fff; border-color: var(--guide-line); }
@media (max-width: 760px) { .view-gasolineras #list { grid-template-columns: 1fr; } .view-gasolineras .filters,.view-gasolineras .card { padding: 14px; } }
/* Air traffic. The map retains its dark nautical base for aircraft contrast. */
.view-radar .regionBar { padding: 0 0 13px; }
.view-radar .clock,.view-radar .clock time,.view-radar .clock span,.view-radar .regionBar [role=status] { color: var(--guide-muted); }
.view-radar .clock { margin-left: 0; }
.view-radar .clockIcon { border-color: #56758a; }
.view-radar .mapCard,.view-radar aside,.view-radar #flightDialog { border-color: var(--guide-line); border-radius: var(--guide-radius); background: #fff; color: var(--guide-ink); }
.view-radar .refreshNow { border: 0; border-radius: 22px; background: var(--guide-sun); color: var(--guide-ink); }
.view-radar .mapStage { height: clamp(350px,52vh,580px); background-color: #182b35; }
.view-radar .mapHead,.view-radar .mapFoot,.view-radar .asideTitle,.view-radar .dialogHead { background: #fff; border-color: var(--guide-line); color: var(--guide-ink); }
.view-radar .mapHead b { font-size: 16px; }
.view-radar .mapHead i { color: var(--guide-blue); }
.view-radar .status { border-radius: 22px; color: #476478; border-color: #b2cad7; }
.view-radar .status.live { background: #e7f4ef; border-color: #bdd8ca; color: #236345; }
.view-radar .status.live::before { background: #287a59; }
.view-radar .status.old { color: #735316; border-color: #d6bd80; background: #fff6db; }
.view-radar .asideHeading h2 { font-size: 24px; font-weight: 720; }
.view-radar .asideHeading { margin: 0; }
.view-radar #count,.view-radar .planeBox { color: var(--guide-ink); border-color: #f3dfa1; background: #fff1bc; border-radius: 9px; }
.view-radar .fRow { color: var(--guide-ink); border-color: var(--guide-line); }
.view-radar .fRow:hover,.view-radar .fRow.sel { background: var(--guide-tint); }
.view-radar .record small,.view-radar .flightInfo,.view-radar .empty,.view-radar footer,.view-radar .mapFoot,.view-radar .detail,.view-radar .detail small,.view-radar .airportLine span,.view-radar #refreshNote { color: var(--guide-muted); }
.view-radar .mapFoot a,.view-radar footer a { color: var(--guide-blue); }
.view-radar .aptDot { border-color: #428170; }
.view-radar .miniPlane { color: #b0831b; }
.view-radar #refreshNote { background: #edf6fa; border-color: var(--guide-line); }
.view-radar .dialogHead { background: #e9f4fa; }
.view-radar .dialogHead button { background: white; border-color: var(--guide-line); color: var(--guide-ink); }
.view-radar .dialogHead h2 { color: var(--guide-ink); font-size: 30px; font-weight: 730; }
.view-radar .dialogHead .kicker,.view-radar .detail strong { color: var(--guide-ink); }
.view-radar .routeField { border-color: var(--guide-line); }
.view-radar .signalNote { color: #775310; }
.view-radar #traffic { max-height: 54vh; }
@media(max-width:690px) {
 .view-radar .mapHead b { font-size: 14px; }
 .view-radar .mapStage { height: clamp(255px,44svh,390px); }
 .view-radar .regionBar { gap: 6px; }
 .view-radar .clock { gap: 4px; }
 .view-radar .refreshNow { font-size: 12px; padding-inline: 10px; }
}
/* Ferries */
.view-ferries .ferry-list { padding: 4px 0 16px; }
.view-ferries .ferry-list h2 { margin: 0 0 15px; font: 700 clamp(22px,2.3vw,29px)/1.2 var(--guide-font); }
.ferry-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: 14px; }
.view-ferries .operator { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 24px; border: 1px solid var(--guide-line); border-radius: var(--guide-radius); }
.view-ferries .operator strong { color: var(--guide-ink); font-size: 23px; letter-spacing: -.8px; }
.view-ferries .operator span { color: var(--guide-muted); margin: 0; }
.view-ferries .operator b { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--guide-blue); font: 700 14px var(--guide-font); margin-top: 17px; }
.view-ferries .operator i { display: grid; place-items: center; border-radius: 50%; width: 32px; height: 32px; font-style: normal; }
.view-ferries .operator:hover { border-color: #7ba4ba; }
.ferry-footer { border-top: 1px solid var(--guide-line); margin-top: 16px; }
/* Road map */
body.view-carreteras { display: flex; flex-direction: column; height: 100dvh; min-height: 0; --ink:var(--guide-ink); --line:var(--guide-line); --sun:var(--guide-sun); --paper:#fff; }
.view-carreteras .guide-bar { flex: none; }
.view-carreteras #app { width: 100%; height: auto; min-height: 0; flex: 1; }
.view-carreteras #app:fullscreen { height: 100%; }
.map-page-title { position: absolute; top: 14px; left: 16px; z-index: 2; margin: 0; max-width: calc(100% - 42px); background: #fff; color: var(--guide-ink); border: 1px solid #c4d8e4; border-radius: 14px; padding: 10px 15px; font: 740 clamp(16px,2vw,23px)/1.15 var(--guide-font); letter-spacing: -.04em; box-shadow: 0 3px 12px #133c5417; pointer-events: none; }
.view-carreteras .dock,.view-carreteras #sheet,.view-carreteras .map-tools { background: #fff; border-color: #b8ceda; }
.view-carreteras .dock button { background: #fff; color: var(--guide-ink); }
.view-carreteras .dock button[aria-pressed=true] { background: var(--guide-sun); }
.view-carreteras #sheet .sheet-head { border-bottom: 1px solid var(--guide-line); padding-block: 8px; }
.view-carreteras #sheet .action,.view-carreteras #retry-cic { color: #174863; background: #edf6fb; border-color: var(--guide-line); }
@media(max-width:650px) { .map-page-title { left: 10px; top: 8px; padding: 7px 12px; font-size: 16px; } }

/* Island selection and the permanent island catalogs */
.guide-page .guide-actions { display: flex; align-items:center; gap: 12px; margin-left:auto; }
.guide-page .change-island { display:inline-flex; align-items:center; gap:8px; min-height:42px; white-space:nowrap; padding:9px 15px; font:650 14px/1.2 var(--guide-font); color:var(--guide-ink); text-decoration:none; background:#fff; border:1px solid #b9cfdb; border-radius:24px; }
.guide-page .change-island:hover { background:var(--guide-tint); }
.island-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.island-tile { display:flex; flex-direction:column; min-width:0; border-radius:var(--guide-radius); overflow:hidden; border:1px solid var(--guide-line); background:white; box-shadow:0 3px 12px #133c5408; transition:transform .18s,border-color .18s; }
.island-tile img { width:100%; aspect-ratio:1.95; height:auto; object-fit:cover; display:block; }
.island-tile>span { display:flex; padding:13px 16px; gap:6px; align-items:center; justify-content:space-between; color:var(--guide-ink); font:710 clamp(17px,1.55vw,22px)/1.2 var(--guide-font); letter-spacing:-.04em; }
.island-tile i { width:28px; height:28px; display:grid; place-items:center; background:var(--guide-tint); color:#23566d; font:500 17px var(--guide-font); border-radius:50%; flex:none; }
.island-tile:hover { transform:translateY(-2px); border-color:#72a6bb; }
.local-bus-art { display:flex; align-items:center; background-position:center; background-size:cover; aspect-ratio:1705/922; padding:8%; color:white; }
.local-bus-art span { display:flex; flex-direction:column; gap:9px; }
.local-bus-art small { font:650 13px var(--guide-font); }
.local-bus-art strong { font:760 clamp(27px,3.6vw,48px)/1.03 var(--guide-font); max-width:10ch; letter-spacing:-.045em; }
.view-carreteras .map-page-title { z-index:4; }
.map-page-title .guide-back { min-height:26px; pointer-events:auto; }
.map-page-title h1 { font:inherit; margin:0; }
@media (max-width:800px){.island-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}}
@media (max-width:500px){.island-tile{border-radius:15px}.island-tile>span{font-size:16px;padding:11px}.island-tile i{width:23px;height:23px;font-size:14px}.island-tile img{aspect-ratio:1.85}.guide-page .change-island{font-size:13px;min-height:40px;padding:8px 12px}.view-catalog:has(.island-grid) .guide-download{display:inline-flex;min-height:38px}.map-page-title .guide-back{font-size:11px;min-height:22px}}
@media (max-width:350px){.island-grid{gap:8px}.island-tile i{display:none;}}
@media(prefers-reduced-motion:reduce){.island-tile{transition:none}}