/* Interfaz institucional: controles claros y opciones secundarias bajo demanda.
   La plantilla de exportación conserva sus dimensiones y tipografía propias. */
:root {
  --c-bg: #f4f6f8;
  --c-surface: #fff;
  --c-border: #cbd2dc;
  --neu-convex: none;
  --neu-convex-sm: none;
  --neu-concave: none;
  --neu-inset: none;
  --neu-inset-focus: 0 0 0 3px rgba(171, 47, 46, .18);
  --neu-floating: 0 6px 24px rgba(21, 26, 48, .12);
  --neu-fab: 0 4px 12px rgba(21, 26, 48, .15);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
}

:where(button, a, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}
.screen { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 100px); }
.screen.active { animation: none; }
.card, .profile-hero-card, .regional-summary-card, .pdf-type-cycle-btn,
.viatico-checkbox-card, .rich-editor-container {
  background: #fff;
  border: 1px solid #d9dee6;
  box-shadow: none;
}
.viatico-checkbox-card:has(input:focus-visible) { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.form-group label, .pdf-type-eyebrow, .pdf-preview-header-label {
  text-transform: none;
  letter-spacing: normal;
  font-size: .9rem;
  color: var(--c-text-secondary);
}
.form-group input:not([type="checkbox"]):not([type="hidden"]),
.form-group select, .form-group textarea, .picker-trigger, .auth-input {
  min-height: 48px;
  border: 1px solid var(--c-border);
  background: #fff;
  font-size: 1rem;
  font-weight: 400;
  box-shadow: none;
}
.form-group select { appearance: auto; -webkit-appearance: auto; }
.form-group .editor-select {
  height: auto;
  min-height: 48px;
  padding: 10px 12px;
  line-height: 1.4;
  appearance: auto;
}
.editor-font-select-wrap { flex: 1 1 100%; max-width: none; }
.editor-font-select-wrap label { display: block; margin-bottom: 6px; }
.rich-editor-toolbar { align-items: end; gap: 8px; border-top: 1px solid #d9dee6; }
.rich-editor-area { font-size: 1rem; min-height: 230px; }
.rich-editor-area:focus-visible { outline-offset: -3px; }
.editor-toolbar-separator { display: none; }
.editor-btn, .profile-edit-btn, .btn-back, .header-help-btn,
.header-profile-btn, .btn-toggle-pwd, .picker-close, .tour-close-btn {
  min-width: 44px;
  min-height: 44px;
}
.btn, .pdf-preset-chip, .pdf-type-trigger, .btn-map-picker, .reg-filter-tab,
.onboarding-filter-tab, .auth-link-text, .btn-cancel-edit {
  min-height: 44px;
}
.btn-primary, .fab {
  background: var(--c-primary);
  box-shadow: none;
  border: 1px solid var(--c-primary);
}
.btn-primary:hover, .fab:hover { background: var(--c-primary-dark); }
.btn-outline, .btn-ghost, .btn-back, .btn-swap-route {
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--c-border);
}
.btn-ghost { border-color: transparent; color: var(--c-text-secondary); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.fab { min-height: 52px; height: auto; padding: 14px 20px; border-radius: 12px; }
.bottom-nav { background: #fff; border-color: #d9dee6; box-shadow: 0 -2px 12px #151a3010; }
.nav-item { font-size: .8125rem; min-width: 0; }
.app-header { border-bottom: 1px solid #d9dee6; background: #fff; }
.app-header h1 { min-width: 0; font-size: 1.2rem; }
.app-header-actions { flex-shrink: 0; }
.text-sm, .pdf-preset-chip, .date-group-header, .bento-lbl,
.Informe-promoter-name, .viatico-footer-label { font-size: .875rem; }
.location-options, .editor-format-options { margin-top: 8px; }
summary { cursor: pointer; min-height: 44px; padding: 12px 8px; font-size: .9rem; color: var(--c-text-secondary); }
.trip-location-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.trip-location-actions > * { flex: 1 1 140px; }
.favorite-place-select.hidden { display: none; }
.km-input-row { flex-wrap: wrap; }
.km-input-row input { flex: 1 1 160px; }
.btn-unlock-km { width: auto; min-width: 44px; min-height: 48px; padding: 8px 12px; gap: 8px; font-size: .875rem; }
.btn-unlock-km svg { display: none; }
.field-hint:empty, .draft-status:empty { display: none; }
.field-hint, .draft-status { font-size: .875rem; color: var(--c-text-secondary); line-height: 1.5; margin: 8px 0; }
.field-error { color: #a32424; font-size: .9rem; line-height: 1.5; margin-top: 8px; }
[aria-invalid="true"] { border-color: #a32424 !important; }
.draft-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px; margin-bottom: 16px; border: 1px solid var(--c-border); border-radius: 10px; background: #fff;
}
.draft-banner p { flex: 1 1 100%; font-size: .9rem; }
.draft-status, .draft-badge { color: #b45309; font-weight: 700; }
.draft-status { padding: 8px 0; }
.draft-badge { font-size: .875rem; }
.card .draft-banner { margin: 12px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--c-border); border-radius: 0; }
.trip-action-btn, .viatico-action-btn, .Informe-action-btn {
  width: auto; min-width: 44px; min-height: 44px; height: auto; padding: 8px 10px;
  border: 1px solid var(--c-border); border-radius: 8px; box-shadow: none; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .875rem;
}
.trip-card-actions, .viatico-card-actions, .Informe-card-actions { flex-wrap: wrap; gap: 8px; }
.Informe-card-header, .viatico-card-header { flex-wrap: wrap; gap: 10px; }
.Informe-header-left { flex: 1 1 auto; }
.record-more { position: relative; }
.record-more summary { border: 1px solid var(--c-border); border-radius: 8px; background: #fff; }
.record-more[open] { z-index: 30; }
.record-more-menu {
  position: absolute; right: 0; top: 100%; min-width: 190px; padding: 8px; background: #fff;
  border: 1px solid var(--c-border); border-radius: 10px; box-shadow: var(--neu-floating); z-index: 10;
}
.record-more-menu button { width: 100%; min-height: 44px; text-align: left; padding: 10px; border: 0; background: #fff; font-size: .9rem; }
.record-more-menu button:hover { background: var(--c-bg); }
.record-more-menu .danger { color: #a32424; }
.card.trip-card { overflow: visible; }
.card.trip-card:has(.record-more[open]) { z-index: 20; }
.trips-load-more {
  min-height: 52px;
  margin-top: 20px;
  gap: 10px;
  border-radius: 12px;
  color: var(--c-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(21, 26, 48, .06);
}
.trips-load-more:hover { background: var(--c-primary-subtle); border-color: var(--c-primary); }
.trips-load-more:active { background: var(--c-primary-subtle); }
.trip-meta-section { gap: 12px; flex-wrap: wrap; }
.trip-place-name { flex: 1; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
body:not(.trip-place-search-open) .pac-container { display: none !important; }
.gps-button { margin-top: 8px; }
.trip-steps { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 12px; }
.trip-steps li { flex: 1; padding: 10px 0; border-bottom: 2px solid var(--c-border); color: var(--c-text-secondary); font-size: .9rem; }
.trip-steps [aria-current="step"] { border-color: var(--c-primary); color: var(--c-primary); font-weight: 700; }
.trip-date-options { margin-bottom: 18px; }
.trip-date-options summary, .trip-map-options summary, #trip-km-options summary { cursor: pointer; padding: 12px 0; min-height: 44px; color: var(--c-primary); font-size: .9rem; }
.trip-date-options .form-group { margin-top: 8px; }
.trip-step-title { font-size: 1.2rem; margin: 8px 0 16px; }
#trip-form .gps-button { margin: 0 0 8px; background: #fbefee; border-color: var(--c-primary); }
.trip-place-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 12px; }
.trip-place-summary > div { min-width: 0; }
.trip-place-summary span { display: block; font-size: .8rem; color: var(--c-text-secondary); margin-bottom: 4px; }
.trip-place-summary strong { display: block; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.5; }
.trip-place-summary button { flex-shrink: 0; }
.trip-place-summary.is-editing-destination { flex-direction: column; align-items: stretch; }
.trip-destination-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.trip-destination-actions button { white-space: normal; text-align: left; }
.trip-places { margin-bottom: 16px; }
.trip-places h3 { font-size: .9rem; font-weight: 600; color: var(--c-text-secondary); margin-bottom: 8px; }
.trip-place-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 54px; margin-bottom: 6px; padding: 12px; border: 1px solid var(--c-border); border-radius: 10px; background: #fff; text-align: left; overflow-wrap: anywhere; line-height: 1.5; }
.trip-place-option:hover { background: var(--c-bg); }
.trip-place-option small { font-size: .8rem; color: var(--c-text-secondary); }
.trip-continue { margin-top: 16px; }
.trip-distance-card { border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; background: #fff; margin: 12px 0; }
.trip-distance-value { font-size: 1.25rem; font-weight: 700; }
#trip-km-options .form-group { margin: 8px 0 0; }
.trip-map-options { margin: 12px 0; }
#trip-form .trip-route-swap-row { justify-content: flex-start; margin: 0; }
.trip-km-badge { box-shadow: none; }
.auth-input-group > label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 600; }
.password-group .btn-toggle-pwd { top: auto; bottom: 3px; transform: none; }
.auth-sheet { overflow-y: auto; }
.startup-error { position: fixed; inset: auto 16px 24px; z-index: 99999; max-width: 560px; margin: auto; padding: 20px; background: white; border: 2px solid #a32424; border-radius: 12px; }
.splash-status-row { justify-content: center; }
.unofficial-doc-page-number { position: absolute; bottom: 18px; right: 72px; font: 12px Arial, sans-serif; color: #475569; }
.unofficial-doc-template .unofficial-doc-signature-block { flex-shrink: 0; }
.unofficial-doc-template .unofficial-doc-body { display: flow-root; }

.viatico-place-title { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
.viatico-recents { margin-bottom: 20px; }
.viatico-recents h3 { font-size: .9rem; margin-bottom: 10px; }
#viatico-recents-list { display: flex; flex-wrap: wrap; gap: 8px; }
.viatico-recent { min-height: 44px; max-width: 100%; padding: 10px 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
body.trip-saved-open { overflow: hidden; }
.trip-saved-dialog { border: 0; padding: 0; margin: auto; width: min(380px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); background: transparent; border-radius: var(--radius-xl); }
.trip-saved-dialog::backdrop { background: rgba(20, 30, 48, .45); backdrop-filter: blur(6px); }
.trip-saved-dialog .confirm-card { max-width: none; background: #fff; box-shadow: none; }
.trip-saved-icon { color: #15803d; background: #edf9f0; border-color: #b7e2c2; box-shadow: none; }
.trip-saved-actions { flex-direction: column; }
.trip-saved-actions .btn { width: 100%; min-height: 48px; }
.trip-saved-actions .btn-waze { background: #33ccff; color: #101820; border: 1px solid #1ab8ed; box-shadow: none; gap: 14px; }
.trip-saved-actions .btn-waze:hover { background: #6bdaff; }
.btn-waze img { width: 90px; height: 26px; object-fit: contain; }
.trip-saved-actions .btn-google-maps {
  background: #fff;
  color: var(--c-text-primary);
  border: 1px solid #cbd5e1;
  gap: 10px;
}
.trip-saved-actions .btn-google-maps:hover { background: #f8fafc; }
.btn-google-maps img {
  width: 135px;
  height: 26px;
  display: block;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

@media (max-width: 767px) {
  .viatico-card-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .viatico-place-wrap { width: 100%; align-items: flex-start; }
  .viatico-place-title { flex: 1; line-height: 1.5; }
  .viatico-card-actions { width: 100%; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--c-border); }
  .viatico-card-actions button, .viatico-card-actions summary { white-space: nowrap; }
  .viatico-card-footer { flex-wrap: wrap; gap: 8px; }
}

@media (min-width: 1024px) {
  #screen-trip-form .form, #screen-viatico-form .form, #screen-Informe-form .form { max-width: 760px; margin-inline: auto; width: 100%; }
  #screen-pdf { max-width: 920px; }
}
@media (max-width: 380px) {
  .app-header h1 { font-size: 1.05rem; }
  .nav-item { font-size: .8rem; }
  .screen { padding-inline: 12px; }
}
@media (max-width: 767px) {
  .trip-card { flex-direction: column; gap: 16px; padding: 16px; }
  .trip-route-section { width: 100%; }
  .trip-meta-section { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-border); padding-top: 12px; }
  .trip-card-actions { margin-left: auto; }
  .trip-card-actions button, .trip-card-actions summary { white-space: nowrap; }
  .trip-place-name { font-size: 1rem; line-height: 1.5; }
  .app-header-left { min-width: 0; gap: 8px; }
  .header-right-wrap { flex-shrink: 0; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* The creator owns its viewport; the trip list and editor keep their layout. */
body.trip-creation-active { overflow: hidden; }
.trip-creation-active .bottom-nav { display: none; }
.trip-creation-active #screen-trip-form {
  position: relative; height: calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px));
  flex: none; max-width: none; padding: 0 !important; overflow: hidden;
}
#trip-map-stage { position: absolute; inset: 0; background: var(--c-bg); }
#trip-map-stage #trip-route-map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; }
@media (max-width: 1023px) {
  /* Keep map attribution and controls above the mobile sheet. */
  #trip-map-stage #trip-route-map { bottom: var(--trip-sheet-height, 48%); height: auto; }
}
#trip-map-loading { position: absolute; z-index: 1; top: 20px; left: 20px; right: 20px; text-align: center; background: var(--c-surface); padding: 12px; border-radius: 10px; }
#trip-map-retry { position: absolute; z-index: 2; top: 110px; left: 20px; }
.trip-creation-active #screen-trip-form #trip-form {
  position: absolute; z-index: 3; bottom: 0; left: 0; width: 100%; max-width: none;
  max-height: 48%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0;
  background: var(--c-surface); border-radius: 22px 22px 0 0;
  box-shadow: 0 -3px 16px #151a3014; display: flex; flex-direction: column; gap: 0;
}
.trip-creation-active #screen-trip-form #trip-form[data-expanded="true"],
.trip-creation-active #screen-trip-form #trip-form:has(#trip-place-names:not(.hidden)) { max-height: 70%; }
#trip-sheet-toggle { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 28px; flex-shrink: 0; border: 0; background: transparent; cursor: pointer; }
#trip-sheet-toggle span { width: 36px; height: 4px; border-radius: 4px; background: var(--c-border); }
.trip-creation-active .trip-steps, .trip-creation-active #trip-map-options { display: none; }
.trip-creation-active .trip-step-title { margin: 8px 0 12px; font-size: 1.35rem; }
.trip-creation-active .form-group { margin-bottom: 12px; }
.trip-creation-active #trip-destination-input { padding: 14px; background: var(--c-bg); font-weight: 500; }
.trip-creation-active label[for="trip-destination-input"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.trip-location-heading { display: flex; align-items: center; gap: 12px; }
.trip-origin-dot { width: 10px; height: 10px; border: 3px solid var(--c-primary); border-radius: 50%; flex-shrink: 0; }
.trip-location-heading > div { flex: 1; min-width: 0; }
.trip-location-heading > div > span { display: block; font-size: .75rem; color: var(--c-text-secondary); }
#trip-current-name { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-creation-active #gps-status { margin: 6px 0; font-size: .8125rem; }
.trip-creation-active #gps-status:empty { display: none; }
.trip-creation-active .trip-place-summary { border: 0; border-radius: 0; padding: 6px 0; margin: 0; background: transparent; }
.trip-creation-active .trip-place-summary strong { font-size: .95rem; }
.trip-creation-active .trip-places { margin: 8px 0 0; }
.trip-creation-active .trip-place-option { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; padding: 10px 0; margin: 0; min-height: 56px; }
.trip-creation-active .trip-place-option svg { grid-row: 1 / 3; align-self: center; color: var(--c-text-secondary); }
.trip-creation-active .trip-place-option span { font-weight: 600; font-size: .9rem; }
.trip-creation-active .trip-place-option small { grid-column: 2; }
.trip-creation-active .trip-distance-card { border: 0; padding: 8px 0; margin: 0; }
.trip-creation-active .trip-distance-value { font-size: 1.65rem; }
.trip-creation-active .trip-route-swap-row { display: none; }
.trip-creation-active #trip-date-options { order: 5; margin: 4px 0 0; }
.trip-creation-active #trip-date-options summary { padding-block: 10px; }
.trip-creation-active .draft-status { order: 6; margin: 0; font-size: .75rem; }
.trip-creation-active .btn-map-picker { border: 0; margin-top: 8px; background: transparent; min-height: 44px; font-size: .875rem; }
.trip-creation-active #btn-submit-trip { margin-top: 12px; min-height: 52px; }
.trip-creation-active #trip-map-picker-hint { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 4; }
#trip-place-names h3 { font-size: 1rem; margin: 10px 0 4px; }
#trip-place-names .field-hint { margin: 0 0 12px; }
.trip-creation-active .pac-container { max-height: 26dvh; overflow-y: auto; z-index: 10; }
.trip-creation-active .pac-item { min-height: 48px; display: flex; align-items: center; }
@media (min-width: 1024px) {
  .trip-creation-active #screen-trip-form { height: calc(100dvh - var(--header-height)); }
  .trip-creation-active #screen-trip-form #trip-form { left: 24px; top: 24px; bottom: auto; width: 360px; max-height: calc(100% - 48px); padding: 20px; border-radius: 16px; box-shadow: var(--neu-floating); }
  .trip-creation-active #screen-trip-form #trip-form[data-expanded="true"], .trip-creation-active #screen-trip-form #trip-form:has(#trip-place-names:not(.hidden)) { max-height: calc(100% - 48px); }
  .trip-creation-active #trip-sheet-toggle { display: none; }
  .trip-creation-active #trip-map-loading { left: 410px; right: 24px; }
  .trip-creation-active #trip-map-picker-hint { left: 410px; right: 24px; }
}
@media (max-height: 550px) and (min-width: 600px) and (max-width: 1023px) {
  #trip-map-stage #trip-route-map { bottom: 0; height: 100%; }
  .trip-creation-active #screen-trip-form #trip-form { width: 48%; max-height: 100%; border-radius: 0; }
  .trip-creation-active #screen-trip-form #trip-form[data-expanded="true"] { max-height: 100%; }
}
.trip-creation-active [data-trip-step="review"] > .trip-step-title { display: none; }
.trip-creation-active #route-status { padding: 0; background: transparent; font-size: .8rem; font-weight: 400; }