/* Pantallas de las empresas de tipo excursiones (13-10-2026). Todo va con el
   prefijo x- para no chocar con los estilos de tienda. Ver js/excursions-app.js. */
.xapp {
  --x-soft: var(--bg-soft); --x-ok-soft: rgba(52, 211, 153, .13); --x-warn-soft: rgba(255, 178, 77, .14);
  --x-danger-soft: rgba(255, 92, 122, .13); --x-info: #8fb4ff; --x-info-soft: rgba(143, 180, 255, .15);
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
:root[data-theme="light"] .xapp { --x-info: #3d68c9; }
.x-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.x-bar { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); align-items: center; flex-wrap: wrap; position: relative; }
.x-sub { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; position: relative; }
.x-search { flex: 1; min-width: 180px; background: var(--x-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; font-size: .9rem; }
.x-btn { flex-shrink: 0; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--x-soft); color: var(--text); font: inherit; font-size: .86rem; font-weight: 700; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.x-btn:hover:not(:disabled) { border-color: var(--primary); }
.x-btn:disabled { opacity: .5; cursor: not-allowed; }
.x-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.x-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.x-btn.danger { color: var(--danger); }
.x-btn.sm { height: 32px; font-size: .8rem; padding: 0 10px; }
.x-seg { display: flex; gap: 3px; background: var(--x-soft); border-radius: 10px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.x-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.x-seg button.active { background: var(--primary); color: var(--on-primary); }
.x-seg .n { font-size: .7rem; opacity: .8; margin-left: 3px; }
.x-totals { margin-left: auto; display: flex; gap: 14px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.x-totals b { color: var(--text); font-size: .92rem; margin-left: 4px; font-variant-numeric: tabular-nums; }
.x-totals .ok b { color: var(--ok); } .x-totals .warn b { color: var(--warn); } .x-totals .bad b { color: var(--danger); }
.x-body { flex: 1; min-height: 0; overflow: auto; }
.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 14px; }
.x-card { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; cursor: pointer; transition: transform 160ms cubic-bezier(.22,.61,.36,1), box-shadow 160ms ease, border-color 160ms ease; }
.x-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); border-color: var(--primary); }
.x-card.off { opacity: .62; }
.x-card-top { display: flex; gap: 12px; align-items: center; padding: 13px 14px 10px; }
.x-card-top h3 { margin: 0; font-size: 1rem; }
.x-card-top small { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.x-card-top .x-pill { margin-left: auto; align-self: flex-start; }
.x-logo { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #fff; flex-shrink: 0; }
.x-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 14px; }
.x-trio.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-trio div { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.x-trio span { display: block; font-size: .64rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.x-trio b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.x-trio .ok b { color: var(--ok); } .x-trio .warn b { color: var(--warn); } .x-trio .bad b { color: var(--danger); }
.x-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px 0; }
.x-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); margin-top: 12px; }
.x-foot b { color: var(--text); }
.x-pill { display: inline-block; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.x-pill.ok { background: var(--x-ok-soft); color: var(--ok); } .x-pill.warn { background: var(--x-warn-soft); color: var(--warn); }
.x-pill.bad { background: var(--x-danger-soft); color: var(--danger); } .x-pill.muted { background: var(--x-soft); color: var(--muted); }
.x-pill.info { background: var(--x-info-soft); color: var(--x-info); } .x-pill.solid { background: var(--primary); color: var(--on-primary); }
.x-empty { padding: 40px 20px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
.x-empty .x-btn { margin-top: 12px; }

/* Panel lateral (detalle / editor) */
.x-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--panel); border-left: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0,0,0,.45); z-index: 70; display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.x-drawer.open { transform: none; visibility: visible; transition: transform .22s ease; }
.x-drawer.narrow { width: min(440px, 100vw); }
.x-shade { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 69; }
.x-shade[hidden] { display: none; }
.x-dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.x-dh h2 { margin: 0; font-size: 1.15rem; }
.x-dh small { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.x-close { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--x-soft); color: var(--text); cursor: pointer; }
.x-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.x-tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 700; padding: 10px 11px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.x-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.x-db { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 20px; }
.x-pane { display: none; flex-direction: column; gap: 12px; } .x-pane.active { display: flex; }
.x-df { display: flex; gap: 8px; padding: 12px 16px max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); flex-wrap: wrap; }
.x-df .x-btn { flex: 1; }
.x-block { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.x-block h3 { margin: 0 0 10px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.x-hint { font-size: .75rem; color: var(--muted); line-height: 1.45; margin: 8px 0 0; }
.x-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x-form.three { grid-template-columns: 1fr 1fr 1fr; }
.x-form label, .x-fl { display: flex; flex-direction: column; gap: 5px; font-size: .75rem; color: var(--muted); font-weight: 700; min-width: 0; }
.x-form .full { grid-column: 1 / -1; }
.xapp input.x-in, .xapp select.x-in, .xapp textarea.x-in, .x-drawer input.x-in, .x-drawer select.x-in, .x-drawer textarea.x-in, .x-modal input.x-in, .x-modal select.x-in {
  background: var(--x-soft); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; color: var(--text); font: inherit; font-size: .88rem; width: 100%; min-width: 0; min-height: 0;
}
.x-drawer textarea.x-in { resize: vertical; min-height: 80px; line-height: 1.45; }
.x-money { position: relative; } .x-money::before { content: 'US$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--muted); pointer-events: none; }
.x-money .x-in { padding-left: 40px !important; }
.x-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; font-weight: 600; margin-top: 12px; color: var(--text); }
.x-switch { position: relative; width: 40px; height: 23px; flex-shrink: 0; display: inline-block; }
.x-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.x-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--x-soft); border: 1px solid var(--border); cursor: pointer; transition: background-color .15s; }
.x-switch span::before { content: ''; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; border-radius: 50%; background: var(--muted); transition: transform .15s, background-color .15s; }
.x-switch input:checked + span { background: var(--ok); border-color: var(--ok); }
.x-switch input:checked + span::before { transform: translateX(17px); background: #fff; }
.x-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.x-modes button { border: 1px solid var(--border); background: var(--x-soft); color: var(--text); border-radius: 10px; padding: 9px 6px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.25; }
.x-modes button small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); margin-top: 2px; }
.x-modes button.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.x-example { margin-top: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.x-example b { color: var(--ok); }
.x-boat { display: grid; grid-template-columns: minmax(0, 1.6fr) 84px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.x-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--x-soft); color: var(--muted); cursor: pointer; }
.x-x:hover { color: var(--danger); border-color: var(--danger); }
.x-days { display: flex; gap: 5px; flex-wrap: wrap; }
.x-days button { width: 38px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--x-soft); color: var(--muted); font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; }
.x-days button.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.x-tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
.x-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--x-soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 11px; font-size: .8rem; font-weight: 600; color: var(--text); }
.x-tag button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.x-add { display: flex; gap: 6px; margin-top: 8px; } .x-add .x-in { flex: 1; }
.x-ztable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.x-ztable th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; padding: 4px 4px 8px; }
.x-ztable td { padding: 5px 4px; border-top: 1px solid var(--border); vertical-align: middle; }
.x-cover { position: relative; aspect-ratio: 16 / 8; background: linear-gradient(135deg, #0E6E8C, #1B9AAA 45%, #F7B267); display: grid; place-items: center; color: rgba(255,255,255,.9); font-weight: 800; font-size: 1.05rem; text-align: center; padding: 0 16px; max-width: 100%; }
.x-cover .x-pill { position: absolute; left: 10px; top: 10px; }
.x-cover .x-agent { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.5); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: .72rem; font-weight: 700; color: #fff; }
.x-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 14px 0; }
.x-prices div { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px 8px; }
.x-prices span { display: block; font-size: .62rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.x-prices b { font-size: 1rem; }
.x-prices s { color: var(--muted); font-size: .72rem; margin-left: 4px; }

/* Tablas */
.x-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.x-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.x-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.x-table tr[data-id] { cursor: pointer; } .x-table tr[data-id]:hover td { background: var(--x-soft); }
.x-table .n, .x-table th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-table .sub { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.x-table .g { color: var(--ok); } .x-table .lost { color: var(--muted); text-decoration: line-through; }
.x-day td { background: var(--bg); font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: 7px 12px; cursor: default; }
.x-kv { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 6px 10px; font-size: .85rem; margin: 0; }
.x-kv dt { color: var(--muted); } .x-kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.x-kv dd.money { color: var(--ok); } .x-kv dd.due { color: var(--warn); }
.x-kv hr { grid-column: 1 / -1; border: 0; border-top: 1px dashed var(--border); margin: 2px 0; }
.x-stepper { display: flex; align-items: center; background: var(--x-soft); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.x-stepper button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; }
.x-stepper output { flex: 1; text-align: center; font-weight: 700; }
.x-att { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x-att button { height: 42px; border-radius: 11px; border: 1px solid var(--border); background: var(--x-soft); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.x-att button.yes.on { background: var(--x-ok-soft); border-color: var(--ok); color: var(--ok); }
.x-att button.no.on { background: var(--x-danger-soft); border-color: var(--danger); color: var(--danger); }
.x-pop { position: absolute; top: calc(100% - 4px); right: 14px; width: 300px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); padding: 12px; z-index: 30; display: flex; flex-direction: column; gap: 10px; }
.x-pop[hidden] { display: none; }
.x-pop label { display: flex; flex-direction: column; gap: 5px; font-size: .75rem; color: var(--muted); font-weight: 700; }
.x-cards { display: none; }

@media (max-width: 980px) {
  .x-panel { border-radius: 0; border-left: 0; border-right: 0; }
  .x-totals { margin-left: 0; width: 100%; }
  .x-grid { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 20px; }
  .x-card:hover { transform: none; }
  .x-drawer, .x-drawer.narrow { width: 100vw; border-left: 0; }
  .x-modes { grid-template-columns: 1fr 1fr; }
  .x-form.three { grid-template-columns: 1fr 1fr; }
  .x-boat { grid-template-columns: minmax(0, 1fr) 64px auto auto; } .x-boat select { display: none; }
  .x-pop { left: 12px; right: 12px; width: auto; }
  .x-table.x-hide-m { display: none; } .x-cards { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 20px; }
}
@media (hover: none) { .x-card:hover { transform: none; box-shadow: none; border-color: var(--border); } }

/* Reservas */
.xapp [hidden], .x-drawer [hidden], .x-modal[hidden] { display: none !important; }
.x-btn.on { border-color: var(--primary); color: var(--primary); }
.x-badge { background: var(--primary); color: var(--on-primary); border-radius: 99px; font-size: .68rem; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; }
.x-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.x-row { display: flex; gap: 8px; } .x-row .x-btn { flex: 1; }
.x-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.x-quick button { border: 1px solid var(--border); background: var(--x-soft); color: var(--text); border-radius: 9px; padding: 7px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.x-quick button:hover { border-color: var(--primary); }
.x-rpop { left: 14px; right: auto; width: 340px; }
.x-note { width: 14px; height: 14px; color: var(--warn); vertical-align: -2px; margin-left: 6px; }
.x-table tr.sel td { background: var(--primary-soft); }
.x-daytitle { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: 8px 2px 0; }
.x-rcard { background: var(--bg); border: 1px solid var(--border); border-radius: 13px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.x-r1 { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.x-r1 b { font-size: .95rem; } .x-r1 small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.x-r2 { display: flex; gap: 12px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; } .x-r2 b { color: var(--text); } .x-r2 .g b { color: var(--ok); }
.x-r3 { display: flex; gap: 6px; flex-wrap: wrap; }
.x-rcard .lost, .x-r2 .lost { color: var(--muted); text-decoration: line-through; }
.x-manifest { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 14px; align-items: start; }
.x-mday { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.x-dep { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.x-dep-head { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.x-dep-head .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.x-dep-head h3 { margin: 0; font-size: 1rem; } .x-dep-head .t span { font-weight: 700; color: var(--primary); font-size: .9rem; }
.x-dep-head small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.x-cap { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); margin-top: 9px; }
.x-cap .bar { flex: 1; height: 7px; border-radius: 99px; background: var(--x-soft); overflow: hidden; }
.x-cap .bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.x-cap .bar i.mid { background: var(--warn); } .x-cap .bar i.full { background: var(--danger); }
.x-cap b { color: var(--text); }
.x-paxrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: center; }
.x-paxrow:hover { background: var(--x-soft); }
.x-paxrow b { font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.x-paxrow small { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; }
.x-pc { font-size: .76rem; font-weight: 700; color: var(--muted); }
.x-chk { display: flex; gap: 6px; }
.x-chk button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--x-soft); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.x-chk svg { width: 16px; height: 16px; }
.x-chk .yes.on { background: var(--x-ok-soft); border-color: var(--ok); color: var(--ok); }
.x-chk .no.on { background: var(--x-danger-soft); border-color: var(--danger); color: var(--danger); }
.x-dep-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; font-size: .8rem; color: var(--muted); }
.x-dep-foot b { color: var(--text); }
.x-prog { height: 6px; border-radius: 99px; background: var(--x-soft); overflow: hidden; margin-top: 10px; }
.x-prog i { display: block; height: 100%; background: var(--ok); }
.x-payline { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); padding: 3px 0; } .x-payline b { color: var(--text); }
.x-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.x-payform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-top: 10px; }
.x-payform label { display: flex; flex-direction: column; gap: 5px; font-size: .75rem; color: var(--muted); font-weight: 700; }
.x-preview { white-space: pre-wrap; background: var(--x-ok-soft); border-radius: 12px 12px 12px 3px; padding: 10px 12px; font-size: .82rem; line-height: 1.45; margin-top: 10px; }
.x-sec { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); font-weight: 800; margin-top: 6px; }
.x-drawer textarea.x-in[data-note] { min-height: 70px; }
.x-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display: grid; place-items: center; padding: 16px; }
.x-modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; width: min(520px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.x-modal-card pre { margin: 0 16px; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; white-space: pre-wrap; font: inherit; font-size: .82rem; line-height: 1.45; overflow-y: auto; flex: 1; min-height: 0; }
.x-modal-card a.x-btn { text-decoration: none; }
@media (max-width: 1180px) { .x-col-co { display: none; } }
@media (max-width: 980px) {
  .x-manifest { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 20px; }
  .x-rpop { left: 12px; right: 12px; width: auto; }
  .x-bar .x-lbl { display: none; }
  .x-bar .x-search { order: 5; flex-basis: 100%; }
  .x-payform { grid-template-columns: 1fr 1fr; } .x-payform .x-btn { grid-column: 1 / -1; }
}

/* Pagos y comisiones */
.x-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.x-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.x-kpi span { display: block; font-size: .7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.x-kpi b { display: block; font-size: 1.3rem; margin-top: 3px; font-variant-numeric: tabular-nums; }
.x-kpi small { font-size: .74rem; color: var(--muted); }
.x-kpi.ok b { color: var(--ok); } .x-kpi.due b { color: var(--warn); } .x-kpi.owe b { color: var(--danger); }
.x-kpi.late { border-color: var(--danger); } .x-kpi.late small { color: var(--danger); font-weight: 700; }
.x-selects { margin-left: auto; display: flex; gap: 8px; }
.x-selects .x-in { width: auto; padding: 7px 10px; font-size: .82rem; }
.x-stbtn { display: none; }
.x-how { margin: 14px 14px 0; background: var(--primary-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 40px 10px 12px; font-size: .8rem; line-height: 1.5; position: relative; color: var(--text); }
.x-how button { position: absolute; right: 8px; top: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; }
.x-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 14px; }
.x-pcard { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
.x-pcard:hover { border-color: var(--primary); transform: translateY(-2px); }
.x-psum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.x-psum div { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.x-psum span { display: block; font-size: .62rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.x-psum b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.x-psum .due b { color: var(--warn); } .x-psum .owe b { color: var(--danger); } .x-psum .ok b { color: var(--ok); }
.x-pfoot { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 9px; }
.x-pfoot .go { color: var(--primary); font-weight: 700; }
.x-pill.solidbad { background: var(--danger); color: #fff; }
.x-logo.sm { width: 26px; height: 26px; font-size: .68rem; border-radius: 7px; }
.x-drawer.x-wide { width: min(860px, 100vw); }
.x-cdtop { display: flex; gap: 12px; align-items: center; padding: 0 16px 12px; flex-wrap: wrap; }
.x-cdtop .x-psum { flex: 1; min-width: 260px; }
.x-cotable td, .x-cotable th { padding: 9px 10px; }
.x-cotable tr.sel td { background: var(--primary-soft); }
.x-saldo { font-weight: 800; } .x-saldo.pos { color: var(--warn); } .x-saldo.neg { color: var(--danger); }
.x-bulk { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--bg); font-size: .84rem; flex-wrap: wrap; }
.x-coverlist { border: 1px solid var(--border); border-radius: 12px; max-height: 260px; overflow-y: auto; }
.x-cover-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: .84rem; color: var(--text); font-weight: 600; }
.x-cover-row:last-child { border-bottom: 0; }
.x-cover-row small { display: block; color: var(--muted); font-weight: 500; font-size: .74rem; }
.x-match { font-size: .8rem; border-radius: 10px; padding: 9px 11px; }
.x-match.ok { background: var(--x-ok-soft); color: var(--ok); } .x-match.warn { background: var(--x-warn-soft); color: var(--warn); }
.x-modal .x-db { padding: 4px 16px 14px; }
@media (max-width: 980px) {
  .x-kpis { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
  .x-kpi b { font-size: 1.1rem; }
  .x-pgrid { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 20px; }
  .x-pcard:hover { transform: none; }
  .x-paysub .x-stbtn { display: inline-flex; }
  .x-paysub > .x-seg { display: none; position: absolute; top: calc(100% - 4px); left: 12px; z-index: 30; flex-direction: column; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(0,0,0,.45); border-radius: 12px; padding: 6px; }
  .x-paysub.open > .x-seg { display: flex; }
  .x-paysub > .x-seg button { text-align: left; }
  /* Filtros en una sola fila (28-10-2026): antes los selectores caian debajo, pegados a la derecha. */
  .x-paysub { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
  .x-paysub .x-stbtn { height: 36px; padding: 0 10px; font-size: .82rem; }
  .x-selects { margin-left: 0; flex: 1; min-width: 0; gap: 6px; }
  .x-selects .x-in { flex: 1 1 0; min-width: 0; max-width: none; width: 100%; padding: 7px 6px; font-size: .78rem; text-overflow: ellipsis; }
  .x-cotable th:nth-child(4), .x-cotable td:nth-child(4), .x-cotable th:nth-child(5), .x-cotable td:nth-child(5) { display: none; }
}

/* Dashboard de excursiones */
#tab-dashboard > .x-dash { gap: var(--hueco); }
.x-dkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
@media (max-width: 640px) { .x-dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.x-dkpi { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; position: relative; min-width: 0; }
.x-dkpi-icon { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.x-dkpi-icon svg { width: 18px; height: 18px; }
.x-dkpi-l { font-size: .78rem; color: var(--muted); font-weight: 700; }
.x-dkpi-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; }
.x-dkpi-v { font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; font-size: 2.1rem; }
.x-dkpi-v.s2 { font-size: 1.7rem; } .x-dkpi-v.s3 { font-size: 1.35rem; }
.x-dkpi-d { font-size: .74rem; color: var(--muted); text-align: right; line-height: 1.45; }
.x-dkpi-d b { color: var(--text); }
.x-drow { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--hueco); }
.x-dpanel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.x-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.x-dhead h2 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.x-dsub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.x-dscroll { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.x-link { border: 0; background: transparent; color: var(--primary); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 0; }
.x-dempty { text-align: center; color: var(--muted); font-size: .82rem; padding: 26px 10px; }
.x-dempty b { display: block; color: var(--text); font-size: .95rem; margin-bottom: 4px; }
.x-pend { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.x-pend b { font-size: .9rem; } .x-pend small { display: block; color: var(--muted); font-size: .75rem; margin-top: 3px; }
.x-pend-acts { display: flex; gap: 6px; flex-shrink: 0; }
.x-goal-top { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; font-weight: 600; }
.x-goal-top small { color: var(--muted); font-weight: 500; } .x-goal-top .full { color: var(--danger); }
.x-sale { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: .86rem; font-weight: 600; }
.x-sale small { display: block; color: var(--muted); font-weight: 500; font-size: .74rem; }
.x-sale.off { opacity: .6; }
.x-calnav { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; text-transform: capitalize; }
.x-calnav button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--x-soft); color: var(--text); cursor: pointer; }
.x-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.x-cal-dow { text-align: center; font-size: .66rem; color: var(--muted); font-weight: 700; padding-bottom: 2px; }
.x-cal-day { position: relative; height: 38px; border-radius: 9px; border: 1px solid transparent; background: var(--bg); color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.x-cal-day:hover { border-color: var(--border); }
.x-cal-day.today { border-color: var(--primary); color: var(--primary); font-weight: 800; }
.x-cal-day.sel { background: var(--primary); color: var(--on-primary); }
.x-cal-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 2px; }
.x-cal-dots i, .x-legend i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.x-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin-top: 10px; }
.x-legend i { width: 7px; height: 7px; margin-right: 5px; }
.xapp i.ok { background: var(--ok); } .xapp i.warn { background: var(--warn); } .xapp i.bad { background: var(--danger); } .xapp i.acc { background: var(--primary); }
.x-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 10px; cursor: pointer; }
.x-next:hover { background: var(--x-soft); }
.x-next b { font-size: .86rem; } .x-next small { display: block; font-size: .74rem; color: var(--muted); }
.x-datebox { width: 42px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px 0; }
.x-datebox b { display: block; font-size: 1rem; } .x-datebox span { font-size: .64rem; color: var(--muted); text-transform: uppercase; }
.x-datebox.today { border-color: var(--primary); } .x-datebox.today b { color: var(--primary); }
.x-next-pax { text-align: right; font-size: .68rem; color: var(--muted); } .x-next-pax b { display: block; font-size: 1.05rem; color: var(--text); }
.x-zbar { height: 7px; border-radius: 99px; background: var(--x-soft); overflow: hidden; margin: 6px 0 4px; } .x-zbar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.x-zmeta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }
@media (max-width: 1180px) { .x-drow { grid-template-columns: 1fr 1fr; } .x-drow > :first-child { grid-column: 1 / -1; } }
/* Dashboard 28-10-2026: fila de 4 (Por confirmar/Atención · Rescate · Ocupación · Excursiones),
   barritas de 7 días en las casillas y animaciones de entrada. */
.x-drow.x-drow4 { grid-template-columns: 1.25fr 1fr 1fr .78fr; }
/* El Dashboard cabe justo en la pantalla, sin bajar (01-11-2026, Abel): mide el alto
   libre (--x-dash-h, lo pone excursions-dashboard.js) y cada bloque se acomoda por dentro.
   Solo en escritorio ancho; en pantallas chicas los bloques se apilan y se baja como siempre. */
@media (min-width: 1401px) and (min-height: 700px) {
  #tab-dashboard > .x-dash { display: grid; height: var(--x-dash-h, auto); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
  .x-dash > .x-drow { min-height: 0; }
  .x-dash .x-dpanel { overflow: hidden; }
  .x-dash .x-dscroll { max-height: none; flex: 1 1 0; min-height: 0; }
  .x-dash .x-cal { flex: 1 1 0; min-height: 0; grid-template-rows: auto; grid-auto-rows: minmax(24px, 1fr); }
  .x-dash .x-cal-day { height: auto; }
  .x-dash .x-calday { flex: 1 1 0; min-height: 0; height: auto !important; }
}
@media (max-width: 1400px) { .x-drow.x-drow4 { grid-template-columns: 1fr 1fr; } .x-drow.x-drow4 > :first-child { grid-column: auto; } }
@media (max-width: 980px) { .x-drow.x-drow4 { grid-template-columns: minmax(0, 1fr); } }
.x-drow4 .x-sale { justify-content: flex-start; } .x-drow4 .x-sale > span { flex: 1; min-width: 0; } .x-drow4 .x-sale small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-dhead .x-seg-sm button { padding: 4px 9px; font-size: .72rem; }
.x-ztitle .x-link { margin-top: 3px; }
.x-badge:empty { display: none; }
.x-occn { white-space: nowrap; flex-shrink: 0; }
.x-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.x-occday { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: 6px; padding: 1px 6px; margin-right: 6px; }
.x-spark { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 12px; }
.x-spark i { flex: 1; height: var(--h); min-height: 2px; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--primary) 35%, transparent); transform-origin: bottom; animation: x-rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
.x-spark i.now { background: var(--primary); }
.x-spark-l { display: block; font-size: .64rem; color: var(--muted); margin-top: 4px; letter-spacing: .02em; }
@keyframes x-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes x-grow { from { width: 0; } }
@keyframes x-fadeup { from { opacity: 0; transform: translateY(6px); } }
.x-zbar i, .x-cap .bar i { animation: x-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.x-zbar i.win { background: var(--ok); } .x-goal-top .win { color: var(--ok); }
/* Embudo por anuncio (01-11-2026): barras encimadas, info (clara) > cotizo > reservo. */
.x-funnel { position: relative; height: 9px; border-radius: 99px; background: var(--x-soft); overflow: hidden; margin: 6px 0 4px; }
.x-funnel i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--primary) 35%, transparent); animation: x-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.x-funnel i.q { background: var(--primary); } .x-funnel i.b { background: var(--ok); }
.x-autoset { display: grid; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 8px; }
.x-autoset .x-check { margin: 0; }
.x-dash .x-dpanel, .x-dash .x-dkpi { animation: x-fadeup .45s ease-out both; }
.x-dash .x-dscroll > * { animation: x-fadeup .35s ease-out both; }
.x-att { display: flex; align-items: center; gap: 14px; padding: 4px 2px 8px; }
.x-donut { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.x-donut svg { width: 84px; height: 84px; }
.x-donut circle { fill: none; stroke-width: 4.5; }
.x-donut .trk { stroke: var(--x-soft); }
.x-donut .val { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: x-donut 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes x-donut { from { stroke-dasharray: 0 100; } }
.x-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.x-donut-c b { font-size: 1.35rem; line-height: 1; } .x-donut-c span { font-size: .56rem; color: var(--muted); max-width: 60px; line-height: 1.15; }
.x-donut-l { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--muted); }
.x-donut-l i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .x-donut-l i.h { background: var(--primary); } .x-donut-l i.b { background: var(--x-soft); }
.x-recnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.x-recnums > div { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.x-recnums span { display: block; font-size: .66rem; color: var(--muted); font-weight: 700; } .x-recnums b { font-size: 1.2rem; }
.x-recnums .win b { color: var(--ok); }
.x-goalform { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 6px; padding-bottom: 6px; }
.x-gdel { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .7rem; margin-left: 4px; padding: 0 2px; } .x-gdel:hover { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .x-dash *, .x-dash { animation: none !important; } }
@media (max-width: 980px) {
  #tab-dashboard > .x-dash { gap: 8px; }
  .x-dkpis { gap: 6px; }
  .x-dkpi { padding: 10px; border-radius: 13px; }
  .x-dkpi-icon { display: none; }
  .x-dkpi-b { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
  .x-dkpi-v, .x-dkpi-v.s2 { font-size: 1.4rem; } .x-dkpi-v.s3 { font-size: 1.05rem; }
  .x-dkpi-d { text-align: left; font-size: .68rem; }
  .x-drow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .x-pend { flex-direction: column; align-items: stretch; } .x-pend-acts .x-btn { flex: 1; }
}

/* Reportes de excursiones */
#tab-reports > .x-reports { gap: var(--hueco); }
.x-rcontent { display: flex; flex-direction: column; gap: 10px; }
.x-rnote { font-size: .8rem; color: var(--muted); padding: 0 2px; }
.x-rnote b { color: var(--text); text-transform: capitalize; }
.x-rk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.x-rk .x-kpi { background: var(--panel); border-radius: 14px; }
.x-delta { display: inline-block; font-size: .72rem; font-weight: 700; margin-top: 4px; padding: 2px 7px; border-radius: 99px; }
.x-delta.up { background: var(--x-ok-soft); color: var(--ok); } .x-delta.down { background: var(--x-danger-soft); color: var(--danger); }
.x-delta.up.gd { background: var(--x-danger-soft); color: var(--danger); } .x-delta.down.gd { background: var(--x-ok-soft); color: var(--ok); }
.x-delta.flat { background: var(--x-soft); color: var(--muted); }
.x-kpi small + .x-delta { margin-left: 6px; }
.x-ins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.x-ins div { background: var(--primary-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: .82rem; line-height: 1.5; }
.x-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.x-wide2 { grid-column: span 2; }
.x-chart { width: 100%; height: auto; display: block; }
.x-chart text { fill: var(--muted); font-size: 10px; }
.x-chart .grid { stroke: var(--border); stroke-dasharray: 3 3; }
.x-tip { position: fixed; z-index: 90; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: .78rem; box-shadow: 0 12px 30px rgba(0,0,0,.4); pointer-events: none; min-width: 150px; }
.x-tip div { display: flex; justify-content: space-between; gap: 12px; }
.x-rank td, .x-rank th { padding: 8px 6px; }
.x-rank tr:last-child td { border-bottom: 0; }
.x-rname { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.x-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.x-hbar { display: block; height: 6px; border-radius: 99px; background: var(--x-soft); overflow: hidden; margin-top: 5px; }
.x-hbar i { display: block; height: 100%; border-radius: 99px; }
.x-hb { display: grid; grid-template-columns: 110px minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: .82rem; padding: 4px 0; }
.x-hb .x-hbar { margin: 0; height: 8px; }
.x-hb b { text-align: right; font-variant-numeric: tabular-nums; } .x-hb small { color: var(--muted); font-weight: 500; margin-left: 4px; font-size: .7rem; }
.x-days7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 140px; }
.x-days7 div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: .72rem; color: var(--muted); height: 100%; }
.x-days7 b { color: var(--text); font-size: .78rem; }
.x-days7 i { width: 70%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--x-info); opacity: .55; display: block; }
.x-days7 .top i { background: var(--primary); opacity: 1; } .x-days7 .top { color: var(--primary); font-weight: 700; }
@media (max-width: 1180px) { .x-rgrid { grid-template-columns: 1fr 1fr; } .x-wide2 { grid-column: 1 / -1; } }
@media (max-width: 980px) {
  .x-rk { grid-template-columns: 1fr 1fr; gap: 8px; }
  .x-ins { grid-template-columns: minmax(0, 1fr); }
  .x-rgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .x-hm { display: none; }
  .x-hb { grid-template-columns: 90px minmax(0, 1fr) 54px; }
  .x-reports .x-bar > .x-seg { order: 2; flex-basis: 100%; }
}

/* Fotos de la excursion */
.x-cover.has-img { background-size: cover; background-position: center; }
.x-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.x-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--x-soft); }
.x-photo.cover { grid-column: span 2; grid-row: span 2; border-color: var(--primary); }
.x-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-photo .x-pill { position: absolute; left: 6px; top: 6px; }
.x-ph-del, .x-ph-star { position: absolute; top: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .8rem; }
.x-ph-del { right: 6px; } .x-ph-star { left: 6px; }
.x-ph-del:hover { background: var(--danger); } .x-ph-star:hover { background: var(--primary); }
.x-ph-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; border-style: dashed; }
.x-ph-add span { font-size: 1.6rem; line-height: 1; }
.x-ph-add:hover { border-color: var(--primary); color: var(--primary); }
.x-photos > .x-ph-add:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

/* Ficha completa: llenado automatico, recorrido, preguntas, web */
.x-tabs button[data-tab="auto"] { color: var(--primary); }
.x-feat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .84rem; font-weight: 600; }
.x-feat .x-in { grid-column: 1 / -1; padding: 6px 9px; font-size: .8rem; }
.x-fseg button { padding: 5px 9px; font-size: .74rem; }
.x-fseg button.active.yes, .x-fseg button.active.stop, .x-fseg button.active.pass { background: var(--ok); color: #fff; }
.x-fseg button.active.no { background: var(--danger); color: #fff; }
.x-fseg button.active.unknown { background: var(--muted); color: var(--bg); }
.x-row2 { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.x-row2 > b { color: var(--primary); padding-top: 9px; text-align: center; }
.x-row2-f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.x-row2-f textarea.x-in { min-height: 54px !important; }
.x-row2-a { display: flex; flex-direction: column; gap: 4px; }
.x-ytthumb { width: 100%; max-width: 320px; border-radius: 10px; margin-top: 8px; display: block; }
.x-proposal ul { margin: 4px 0 0; padding-left: 18px; font-size: .82rem; line-height: 1.45; }
.x-proposal details { margin-top: 10px; font-size: .84rem; } .x-proposal summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.x-pgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; font-size: .84rem; }
.x-missing { margin-top: 12px; background: var(--x-warn-soft); border-radius: 10px; padding: 9px 12px; font-size: .84rem; }
.x-missing.warn { background: var(--x-danger-soft); }
.x-missing ul { margin: 4px 0 0; padding-left: 18px; }
.x-pend-list { margin: 0; padding-left: 18px; font-size: .84rem; line-height: 1.5; }
@media (max-width: 980px) { .x-row2-f, .x-pgrid2 { grid-template-columns: minmax(0, 1fr); } }

/* Bloque Zonas / Origen (15-10-2026): 7/30 días debajo del título, Zonas|Origen arriba a la derecha. */
.x-ztitle { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.x-seg.x-seg-sm { align-self: flex-start; }
.x-seg.x-seg-sm button { padding: 5px 10px; font-size: .78rem; }
.x-oname { display: inline-flex; align-items: center; gap: 7px; }
/* Recibos de pago en la reserva (20-10-2026) */
.x-rcpt { padding: 8px 0; border-bottom: 1px solid var(--border); }
.x-rcpt:last-of-type { border-bottom: 0; }
.x-rcpt .x-acts { margin-top: 6px; }
a.x-btn { display: inline-flex; align-items: center; text-decoration: none; }
.x-rmail { display: grid; gap: 4px; margin-top: 10px; font-size: .8rem; color: var(--muted); }
/* Actividad del día seleccionado, debajo del calendario (21-10-2026) */
.x-calday { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; align-content: start; }
.x-calday[hidden], .x-cal[hidden], .x-calnav[hidden], .x-legend[hidden], [data-calback][hidden] { display: none; }
.x-legend-top { margin: 0 auto; align-self: center; }
.x-calday > * { flex-shrink: 0; }
/* Reservas del dia con el color de su estado, suave para que se lea el texto (01-11-2026). */
.x-calres.ok { background: var(--x-ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.x-calres.warn { background: var(--x-warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.x-calres.bad { background: var(--x-danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.x-calres.bad b { text-decoration: line-through; }
.x-calres.acc { background: color-mix(in srgb, var(--primary) 13%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.x-calres { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); cursor: pointer; }
.x-calres:hover { border-color: var(--primary); }
.x-calres span { display: grid; min-width: 0; }
.x-calres b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-calres small { color: var(--muted); font-size: .72rem; }
.x-calres em { font-style: normal; font-weight: 700; color: var(--primary); }
/* Cuatro casillas en una fila: en pantallas medianas el detalle va debajo del monto (21-10-2026) */
@media (max-width: 1280px) {
  .x-dkpi-b { flex-direction: column; align-items: flex-start; gap: 6px; }
  .x-dkpi-d { text-align: left; font-size: .72rem; }
}