/* Velatri — Design Tokens & Styles */

:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', sans-serif;

  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
}

/* === Color Palette: Marine / Nautical === */
:root, [data-theme="light"] {
  --color-bg:             #f4f6f8;
  --color-surface:        #ffffff;
  --color-surface-2:      #f8f9fa;
  --color-surface-offset: #eef1f4;
  --color-divider:        #dce1e6;
  --color-border:         #c8cfd6;

  --color-text:           #1a2632;
  --color-text-muted:     #5f6d7a;
  --color-text-faint:     #9ba7b2;
  --color-text-inverse:   #f8f9fa;

  --color-primary:        #123B63;
  --color-primary-hover:  #0E2D4C;
  --color-primary-active: #0A2138;
  --color-primary-highlight: #D4E6F7;

  /* La tinta del logo. No es --color-primary porque en oscuro el icono va
     BLANCO, el negativo del manual, y ningún otro token lo es. */
  --color-marca:          #123B63;

  --color-error:          #c0392b;
  --color-success:        #27ae60;
  --color-warning:        #a86404;

  /* La amura de babor en las gráficas de la salida: el mismo azul de carta,
     más claro, para que se distinga de la de estribor (--color-primary). */
  --grafica-babor:        #5A87B8;
}

[data-theme="dark"] {
  --color-bg:             #0f1419;
  --color-surface:        #1a2028;
  --color-surface-2:      #1f2732;
  --color-surface-offset: #161c23;
  --color-divider:        #2a3442;
  --color-border:         #3a4658;

  --color-text:           #d4dae0;
  --color-text-muted:     #8a95a0;
  --color-text-faint:     #5a6672;
  --color-text-inverse:   #1a2028;

  --color-primary:        #68A7E4;
  --color-primary-hover:  #8ABBEA;
  --color-primary-active: #A9CDEF;
  --color-primary-highlight: #0D2C49;

  --color-marca:          #FFFFFF;

  --color-error:          #e74c3c;
  --color-success:        #2ecc71;
  --color-warning:        #e0a030;
  --grafica-babor:        #3A6FA6;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #0f1419;
    --color-surface:        #1a2028;
    --color-surface-2:      #1f2732;
    --color-surface-offset: #161c23;
    --color-divider:        #2a3442;
    --color-border:         #3a4658;
    --color-text:           #d4dae0;
    --color-text-muted:     #8a95a0;
    --color-text-faint:     #5a6672;
    --color-text-inverse:   #1a2028;
    --color-primary:        #68A7E4;
    --color-primary-hover:  #8ABBEA;
    --color-primary-active: #A9CDEF;
    --color-primary-highlight: #0D2C49;
    --color-marca:          #FFFFFF;
    --color-error:          #e74c3c;
    --color-success:        #2ecc71;
    --color-warning:        #e0a030;
    --grafica-babor:        #3A6FA6;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}

/* === Auth Screen === */
.app-container {
  min-height: 100dvh;
}

.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-4);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.auth-logo svg {
  display: inline-block;
}

.auth-logo h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.auth-form h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-6);
  color: var(--color-text);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.form-group input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
}

.form-group input::placeholder {
  color: var(--color-text-faint);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.form-error {
  background: oklch(from var(--color-error) l c h / 0.1);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.btn-primary {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-2);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-primary:active {
  background: var(--color-primary-active);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-switch {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-switch a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.social-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

.social-divider::before,
.social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.social-buttons {
  display: flex;
  gap: var(--space-3);
}

.btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

.btn-social:hover {
  background: var(--color-surface-offset);
}

.btn-social:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-social svg {
  display: inline-block;
}

/* === Dashboard === */
[hidden] {
  display: none !important;
}

.dashboard-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-left svg {
  display: inline-block;
}

.header-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.dashboard-main {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.info-icon {
  margin-bottom: var(--space-3);
}

.info-icon svg {
  display: inline-block;
}

.info-card h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.info-card p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.account-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.account-info h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.detail-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}

.dashboard-footer {
  padding: var(--space-4) var(--space-6);
  text-align: center;
  border-top: 1px solid var(--color-divider);
}

.dashboard-footer a {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
}

.dashboard-footer a:hover {
  color: var(--color-text-muted);
}

/* === Polars Section === */

.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.section-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.search-box svg {
  flex-shrink: 0;
  display: inline-block;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text);
  outline: none;
}

.search-box input::placeholder {
  color: var(--color-text-faint);
}

.search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.polars-results {
  margin-top: var(--space-4);
  max-height: 400px;
  overflow-y: auto;
}

.polar-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.polar-result-item:hover {
  background: var(--color-surface-offset);
}

.polar-result-item:last-child {
  border-bottom: none;
}

.polar-result-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.polar-result-type {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.polar-result-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.polar-result-arrow {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.polars-no-results {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Polar Detail */
.polar-detail {
  margin-top: var(--space-4);
}

.polar-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.polar-detail-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.btn-back {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}

.btn-back:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.polar-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.spec-item {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  text-align: center;
}

.spec-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 2px;
}

.spec-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.polar-table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.polar-table {
  width: 100%;
  font-size: var(--text-xs);
  text-align: center;
}

.polar-table th {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.polar-table td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  font-variant-numeric: tabular-nums;
}

.polar-table tr:hover td {
  background: var(--color-surface-offset);
}

.polar-table .col-twa {
  font-weight: 600;
  color: var(--color-primary);
  text-align: left;
}

.btn-select-polar {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-select-polar:hover {
  background: var(--color-primary-hover);
}

/* === Custom Polars Upload === */
.custom-polars-area {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.custom-polars-toggle {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  user-select: none;
  padding: var(--space-2) 0;
}

.custom-polars-toggle:hover {
  color: var(--color-primary-hover);
}

.custom-polars-toggle .toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
  margin-right: var(--space-1);
  font-size: 0.7em;
}

.custom-polars-toggle.open .toggle-icon {
  transform: rotate(90deg);
}

.custom-polars-content {
  margin-top: var(--space-3);
}

.custom-polars-info {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.custom-polars-info p {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text);
}

.custom-polars-info ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}

.custom-polars-info ul li {
  margin-bottom: var(--space-1);
}

.btn-template {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  margin-top: var(--space-2);
}

.btn-template:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}

.upload-area:hover, .upload-area.dragover {
  border-color: var(--color-primary);
  background: rgba(45, 100, 160, 0.04);
}

.upload-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}

.upload-formats {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.upload-status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.upload-status.success {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.upload-status.error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.upload-status.loading {
  background: rgba(45, 100, 160, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(45, 100, 160, 0.2);
}

.custom-polars-list {
  margin-top: var(--space-4);
}

.custom-polars-list h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.custom-polar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.custom-polar-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-polar-item-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.custom-polar-item-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.custom-polar-item-actions {
  display: flex;
  gap: var(--space-2);
}

.btn-polar-view, .btn-polar-delete {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text);
}

.btn-polar-view:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-polar-delete {
  color: #dc3545;
}

.btn-polar-delete:hover {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

/* === Bitácora Section === */
.bitacora-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Calendar nav */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.cal-nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-nav-btn:hover {
  background: var(--color-surface-2);
}

.cal-title {
  font-weight: 600;
  font-size: var(--text-base);
  min-width: 160px;
  text-align: center;
  text-transform: capitalize;
}

/* Calendar grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-4);
}

.cal-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2) 0;
  text-transform: uppercase;
}

.cal-day {
  text-align: center;
  padding: var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-day.current-month {
  color: var(--color-text);
}

.cal-day.has-session {
  background: oklch(from var(--color-primary) l c h / 0.15);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.cal-day.has-session:hover {
  background: oklch(from var(--color-primary) l c h / 0.25);
}

.cal-day.today {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Session list */
.session-list {
  margin-top: var(--space-4);
}

.session-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background 0.15s;
}

.session-card:hover {
  background: var(--color-surface-2);
}

.session-card-date {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
  min-width: 48px;
  text-align: center;
}

.session-card-date .day {
  font-size: var(--text-xl);
  line-height: 1;
}

.session-card-date .month {
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.session-card-info {
  flex: 1;
  min-width: 0;
}

.session-card-title {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.session-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.session-card-stats {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.session-card-stats strong {
  color: var(--color-text);
}

/* Session detail */
.session-detail {
  margin-top: var(--space-4);
}

.btn-back {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-4);
}

.btn-back:hover {
  text-decoration: underline;
}

.session-header {
  margin-bottom: var(--space-4);
}

.session-header h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.session-header .session-date-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.session-ai-summary {
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text);
}

.session-ai-summary .ai-summary-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.session-ai-summary .ai-summary-text {
  margin: 0;
}

.session-ai-summary.loading {
  color: var(--color-text-muted);
  font-style: italic;
}

.session-ai-summary .ai-summary-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.session-ai-summary .ai-summary-content.collapsed {
  max-height: 6em;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
  mask-image: linear-gradient(to bottom, black 70%, transparent);
}

.session-ai-summary .ai-summary-content.expanded {
  max-height: 100em;
  -webkit-mask-image: none;
  mask-image: none;
}

.session-ai-summary .ai-summary-toggle {
  margin-top: var(--space-2);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text);
}

.session-ai-summary .ai-summary-toggle:hover {
  background: var(--color-bg);
}

.session-ai-summary .ai-summary-toggle .chevron {
  display: inline-block;
  transition: transform 0.2s;
}

.session-ai-summary .ai-summary-toggle.expanded .chevron {
  transform: rotate(180deg);
}

/* Bloque sin resumen. Se sigue mostrando: antes se escondía entero y era
   indistinguible de una sesión que nunca tuvo análisis. */
.session-ai-summary.sin-resumen {
  border-left-color: var(--color-border);
}

.session-ai-summary.sin-resumen .ai-summary-text {
  color: var(--color-text-muted);
}

/* Fallo (de la IA, del backend o de la red), frente a la ausencia legítima de
   material en `sin_eventos`, que no es un error de nadie. */
.session-ai-summary.sin-resumen.fallo {
  border-left-color: var(--color-error);
}

.session-ai-summary .ai-summary-reintentar {
  margin-top: var(--space-2);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text);
}

.session-ai-summary .ai-summary-reintentar:hover {
  background: var(--color-bg);
}

/* Aviso de que lo que se está leyendo es el análisis anterior porque la
   regeneración falló. Discreto a propósito: el resumen sigue siendo válido. */
.session-ai-summary .ai-summary-nota {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.session-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.stat-card .stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.session-notes-area {
  margin-bottom: var(--space-4);
}

.session-notes-area textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}

.notes-status {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-height: 1em;
}

/* Session map */
.session-map {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
  z-index: 0;
}

.session-map-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.legend-swatch {
  width: 24px;
  height: 4px;
  border-radius: 2px;
}

.session-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* === Meteo Section === */
.meteo-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.meteo-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.meteo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.meteo-form select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.meteo-form select:focus,
.meteo-form input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.meteo-form input[type="number"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.meteo-zone-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.zone-hint {
  font-weight: 400;
  color: var(--color-text-muted);
}

.meteo-map {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
  z-index: 0;
}

.meteo-coords {
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.meteo-coords strong {
  color: var(--color-text);
}

.meteo-corner-marker {
  width: 14px;
  height: 14px;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: grab;
}

.meteo-corner-marker:active {
  cursor: grabbing;
}

.meteo-checks {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.check-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.check-label input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.form-success {
  background: oklch(from var(--color-success) l c h / 0.1);
  color: var(--color-success);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* === Devices Section === */

.devices-list {
  margin-bottom: var(--space-4);
}

.device-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.device-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.device-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: oklch(from var(--color-primary) l c h / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.device-info {
  flex: 1;
  min-width: 0;
}

.device-name {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.device-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.device-status {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}

.device-status.online {
  background: oklch(from var(--color-success) l c h / 0.1);
  color: var(--color-success);
}

.device-status.offline {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

.btn-small {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

.device-token-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.device-token-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.device-token-display code {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: monospace;
  font-size: var(--text-xs);
  word-break: break-all;
  user-select: all;
  transition: background 0.3s;
}

.device-token-display code.token-updated {
  background: oklch(from var(--color-success) l c h / 0.15);
  border-color: var(--color-success);
}

.btn-secondary {
  background: var(--color-surface-offset);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-secondary:hover {
  background: var(--color-border);
}

.devices-empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* === Responsive === */
@media (max-width: 600px) {
  .auth-card {
    padding: var(--space-6);
  }

  .dashboard-header {
    padding: var(--space-3) var(--space-4);
  }

  .dashboard-main {
    padding: var(--space-6) var(--space-4);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .session-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Por debajo de 480 px esas tres columnas no caben: la tercera se sale por
     la derecha y corta la cifra. Medido a 390 px: cada tarjeta se queda con
     50,7 px de contenido y «16.21kn» pide 86,6, o sea 36 px de más. No lo
     trajo el tramo B —las reglas son byte a byte las de 21221c8—, venía de la
     @media de 700 px, que fuerza tres columnas sin mirar si caben: la pista
     es que `1fr` es `minmax(auto, 1fr)` y ese `auto` mínimo es el ancho del
     propio número, así que la rejilla no encoge: desborda.
     Con dos columnas, el padding lateral corto y la cifra un escalón más
     pequeña, el contenido pasa a 115 px y cabe hasta el peor caso real
     («1234.56nm», 96,3 px). En escritorio no cambia nada. */
  @media (max-width: 479px) {
    .session-stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stat-card {
      padding: var(--space-3) var(--space-2);
      min-width: 0;
    }
    .stat-card .stat-value {
      font-size: var(--text-lg);
    }
  }

  .session-card-stats {
    display: none;
  }

  .session-map {
    height: 280px;
  }

  .meteo-coords {
    flex-direction: column;
    gap: var(--space-1);
  }
}

/* Bitácora — panel de estadísticas históricas */
.bitacora-stats-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.bstat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bstat-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.bstat-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.bstat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bstat-records {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bstat-record strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 700px) {
  .bstat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .bstat-value {
    font-size: 22px;
  }
  .bstat-records {
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* --- Subbar bajo el header --- */
.header-subbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 6px 24px;
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.subbar-item strong {
  color: var(--color-text);
  font-weight: 600;
  margin-left: var(--space-1);
}

.subbar-divider {
  opacity: 0.5;
}

.subbar-sync {
  margin-left: auto;
  font-style: italic;
}

@media (max-width: 700px) {
  .header-subbar {
    padding: 6px 12px;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .subbar-sync {
    margin-left: 0;
    width: 100%;
  }
}

/* --- Zona de peligro (sección cuenta) --- */
.danger-zone {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid rgba(224, 90, 90, 0.35);
  border-radius: var(--radius-md);
  background: rgba(224, 90, 90, 0.06);
}

.danger-zone h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: #e05a5a;
  margin-bottom: var(--space-2);
}

.danger-zone p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.btn-danger {
  padding: var(--space-2) var(--space-4);
  background: rgba(224, 90, 90, 0.15);
  border: 1px solid rgba(224, 90, 90, 0.5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #e05a5a;
  cursor: pointer;
}

.btn-danger:hover {
  background: #e05a5a;
  color: #ffffff;
}

/* === Sección Barco (ficha 178) === */
.barco-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.barco-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.barco-amarres {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.barco-amarre {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.barco-amarre:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}

.barco-amarre:disabled {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.barco-amarre-nombre {
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 0;
}

.barco-amarre-derecha {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.barco-amarre-estado {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border-radius: 99px;
  padding: 2px 8px;
}

.barco-amarre:disabled .barco-amarre-estado {
  background: var(--color-surface);
}

.barco-amarre-pendiente {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.barco-amarre-ir {
  font-size: var(--text-xs);
  color: var(--color-primary);
}

.barco-llave {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.barco-llave h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.barco-llave-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.barco-llave-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.barco-llave-lista li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-llave-lista li::before {
  content: "\00b7";
  position: absolute;
  left: var(--space-1);
  color: var(--color-text-faint);
}

.barco-llave-nota {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* === Ficha del barco (ficha 178, tramo 2) === */
.barco-ficha-cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.barco-ficha-volver {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.barco-ficha-volver:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}

.barco-ficha-cabecera h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.barco-ficha-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-ficha-aviso {
  font-size: var(--text-sm);
  color: var(--color-error);
  background: oklch(from var(--color-error) l c h / 0.1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.barco-ficha-bloque {
  margin-bottom: var(--space-6);
}

.barco-ficha-bloque h5 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.barco-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.barco-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  min-width: 0;
}

.barco-campo label,
.barco-campo-etiqueta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.barco-campo-ayuda {
  font-weight: 400;
  color: var(--color-text-faint);
}

.barco-entrada,
.barco-unidad {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  min-width: 0;
}

.barco-entrada {
  width: 100%;
}

/* Un texto de ejemplo largo dentro de la casilla —los del sistema elegido, en
   la pieza de un parte— se corta con puntos suspensivos y NO desborda. Una
   casilla ya recorta lo que no cabe; esto es para que se vea que hay más. */
.barco-entrada::placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LAS FLECHITAS DE SUBIR Y BAJAR, FUERA. En el móvil no sirven —el dedo no
   acierta un triángulo de seis píxeles— y además se comen el ancho por dentro
   de la casilla, que es justo lo que le faltaba al porcentaje de una marca
   para enseñar tres cifras. No se pierde nada: la cifra se escribe, y el
   teclado numérico lo sigue poniendo el inputmode="decimal" de cada casilla.
   La clase es sólo de Barco, así que esto no roza meteo ni la bitácora. */
.barco-entrada[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.barco-entrada[type="number"]::-webkit-outer-spin-button,
.barco-entrada[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.barco-entrada:focus,
.barco-unidad:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.barco-medida-entrada {
  display: flex;
  gap: var(--space-2);
}

.barco-medida-entrada .barco-entrada {
  flex: 1 1 auto;
}

.barco-unidad {
  flex: 0 0 auto;
  width: 5.5em;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* El desplegable del tipo de hélice hereda de .barco-unidad, que vale 5,5em
   porque está pensado para «m» y «ft». Con eso cortaba «Sin definir», que es la
   más larga de sus cuatro. Aquí no se enseña una unidad: ocupa su casilla,
   igual que el desplegable de sistema del libro. */
.barco-helice {
  width: 100%;
}

/* Al llegar desde un parte de la hélice, para no dejar al patrón buscando cuál
   de las casillas era. Se quita sola; no le roba el foco. */
.barco-resaltada {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.barco-modelo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

.barco-modelo-vacio {
  color: var(--color-text-muted);
}

.barco-enlace {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  padding: 0;
}

.barco-enlace:hover {
  text-decoration: underline;
}

.barco-campo-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 1.4em;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.barco-origen {
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 99px;
  padding: 1px 8px;
}

.barco-origen:empty,
.barco-metrico:empty,
.barco-campo-estado:empty {
  display: none;
}

.barco-origen-catalogo {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

.barco-origen-usuario {
  background: oklch(from var(--color-primary) l c h / 0.12);
  color: var(--color-primary);
}

.barco-metrico,
.barco-campo-estado {
  color: var(--color-text-muted);
}

.barco-campo-estado.barco-estado-ok {
  color: var(--color-success);
  font-weight: 600;
}

.barco-campo-estado.barco-estado-error {
  color: var(--color-error);
}

.barco-cotejo {
  margin-left: auto;
  color: var(--color-text-faint);
  text-decoration: none;
  white-space: nowrap;
}

.barco-cotejo:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .barco-rejilla {
    grid-template-columns: 1fr;
  }
}

/* === Puerto base en el mapa (Frente 9B) === */
.barco-puertos-lista,
.barco-puertos-resultados {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.barco-puerto {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.barco-puerto-activo {
  border-color: var(--color-success);
  background: oklch(from var(--color-success) l c h / 0.06);
}

.barco-puerto-cabecera,
.barco-puerto-pie,
.barco-puertos-resultados li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.barco-puerto-pie {
  margin-top: var(--space-2);
}

.barco-puerto-nombre {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.barco-puerto-pastilla {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 99px;
  padding: 1px 8px;
  background: oklch(from var(--color-success) l c h / 0.15);
  color: var(--color-success);
}

.barco-puerto-fuera {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.barco-puerto-alias {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex: 1 1 200px;
  min-width: 0;
}

.barco-puerto-alias .barco-entrada {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.barco-enlace-peligro {
  color: var(--color-error);
  margin-left: auto;
}

.barco-puertos-resultados {
  margin-top: var(--space-2);
}

.barco-puertos-resultados li {
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.barco-puertos-estado {
  min-height: 1.4em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-puertos-estado.barco-estado-ok {
  color: var(--color-success);
  font-weight: 600;
}

.barco-puertos-estado.barco-estado-error {
  color: var(--color-error);
}

.barco-puertos-mapa {
  height: 340px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.barco-puertos-mapa[hidden] {
  display: none;
}

.barco-puertos-mapa .leaflet-popup-content .barco-enlace {
  display: block;
  margin-top: var(--space-2);
}

/* === Flecos del 9B: el globo del mapa y el respaldo de cercanía === */
/* Medido por el patrón en pantalla: el globo tapaba los botones de acercar y
   alejar y el nombre salía cortado por la izquierda. Margen y ancho, sólo
   bajo .barco-puertos-mapa; el montaje de Leaflet y el de meteo no se tocan. */
.barco-puertos-mapa .leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
}

.barco-puertos-mapa .leaflet-popup-content {
  margin: 12px 18px;
  min-width: 180px;
  max-width: 260px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.barco-puertos-mapa .leaflet-popup-content .barco-puerto-nombre {
  display: block;
  line-height: 1.35;
}

.barco-puertos-mapa .leaflet-popup {
  margin-bottom: 28px;
}

/* Los botones de zoom siempre por encima del globo y alcanzables. */
.barco-puertos-mapa .leaflet-top.leaflet-left {
  z-index: 1100;
}

.barco-puertos-resultados li.barco-puertos-cercanas-cabecera {
  justify-content: flex-start;
  background: oklch(from var(--color-primary) l c h / 0.08);
  border-color: var(--color-primary);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* === La mayor (ficha 178, tramo 3) === */
/* Medido por el patrón en el lienzo de diseño: una fila de cuatro columnas en
   390 px NO cabe, y las casillas de texto traen un ancho mínimo de fábrica que
   no sueltan. Cada configuración es una rejilla con áreas nombradas: en móvil,
   nombre y área arriba y las dos casillas debajo (en una sola columna por
   debajo de 480 px); desde 720 px, la fila de cuatro columnas con el área a la
   derecha. Todo lo que puede encoger lleva min-width: 0, casillas incluidas. */
/* El aviso va DEBAJO de los dos desplegables, y el reset global deja todo a
   margin: 0: sin este margen de arriba queda pegado a ellos y parece parte del
   selector en vez de una nota. Medido en pantalla por el patrón (21/09/2026). */
.barco-mayor-marca {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.barco-mayor-selector {
  width: 100%;
}

.barco-mayor-filas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin-bottom: var(--space-3);
}

.barco-mayor-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "nombre area"
    "gratil pujamen";
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
}

.barco-mayor-fila[hidden] {
  display: none;
}

.barco-mayor-config-nombre {
  grid-area: nombre;
  align-self: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.barco-mayor-fila .barco-campo {
  margin-bottom: 0;
  min-width: 0;
}

.barco-mayor-fila [data-medida$="_gratil"] {
  grid-area: gratil;
}

.barco-mayor-fila [data-medida$="_pujamen"] {
  grid-area: pujamen;
}

.barco-mayor-fila .barco-medida-entrada {
  min-width: 0;
}

.barco-mayor-fila .barco-medida-entrada .barco-entrada,
.barco-mayor-fila input[type="number"] {
  min-width: 0;
  width: 100%;
  flex: 1 1 0;
}

.barco-mayor-area {
  grid-area: area;
  align-self: center;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.barco-mayor-area-etiqueta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-mayor-area-valor {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.barco-mayor-calculada {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 1px 8px;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

/* Inerte y declarado: sin href, sin manejador. El vídeo todavía no existe. */
.barco-mayor-como {
  margin-left: auto;
  color: var(--color-text-faint);
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

/* Desde el 21/09/2026 el aviso es UNO POR PANTALLA, no uno por casilla, así
   que ya no vive arrimado a la derecha del pie de un campo: cuelga del rótulo
   de las medidas (la mayor) o del paso (el asistente). Ahí es una línea suya,
   y tiene que poder partirse: con el nowrap del pie, un texto de sesenta
   caracteres desbordaría en horizontal a 390 px. */
.barco-mayor h5 + .barco-mayor-como,
.barco-proa-como {
  display: block;
  margin-left: 0;
  white-space: normal;
  font-size: var(--text-sm);
}

.barco-mayor h5 + .barco-mayor-como {
  margin-bottom: var(--space-3);
}

.barco-proa-como {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Los dos selectores de la mayor, cortos y en línea: nada de barras de lado
   a lado, que en una página que se guarda sola parecen un botón de guardar. */
.barco-mayor-declara {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.barco-mayor-campo-corto {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.barco-mayor-campo-corto .barco-unidad {
  width: auto;
  min-width: 0;
  min-height: 44px;
}

@media (max-width: 479px) {
  .barco-mayor-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre area"
      "gratil gratil"
      "pujamen pujamen";
  }
}

@media (min-width: 720px) {
  .barco-mayor-fila {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "nombre gratil pujamen area";
  }
}

/* === Velas: la portada, las tarjetas y el asistente (ficha 178) === */
/* Interfaz neutra: blanco, gris y UN acento, el del portal (--color-primary).
   Verde y ámbar sólo para estados. Un solo botón relleno por pantalla. */

.barco-velas,
.barco-proa {
  min-width: 0;
}

.barco-velas[hidden],
.barco-proa[hidden] {
  display: none;
}

.barco-vela-item {
  min-width: 0;
}

.barco-velas-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.barco-velas-cabecera h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.barco-velas-j {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.barco-velas-j:empty {
  display: none;
}

.barco-velas-sin-j {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-left: 3px solid var(--color-warning);
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-velas-sin-j[hidden] {
  display: none;
}

/* --- Una tarjeta por vela ------------------------------------------- */
.barco-velas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.barco-vela-tarjeta {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "silueta texto area"
    "estado  estado estado";
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  min-height: 44px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.barco-vela-tarjeta:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}

.barco-vela-silueta {
  grid-area: silueta;
  width: 34px;
  height: 34px;
  color: var(--color-text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barco-vela-trazo-vela {
  fill: currentColor;
  fill-opacity: 0.1;
}

.barco-vela-trazo-armado {
  opacity: 0.55;
}

.barco-vela-texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.barco-vela-titulo {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.barco-vela-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.barco-vela-area {
  grid-area: area;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* La línea de estado: verde si está completa, ámbar diciendo qué falta,
   gris si está sin medir. Ningún otro color entra aquí. */
.barco-vela-estado {
  grid-area: estado;
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.barco-vela-estado-ok {
  color: var(--color-success);
}

.barco-vela-estado-falta {
  color: var(--color-warning);
}

.barco-vela-estado-vacio {
  color: var(--color-text-faint);
}

/* En gris pasaba desapercibido, y esto no es una cortesía: el sistema está
   calculando con las medidas de una vela que ya no está. El MISMO rojo de la
   categoría A del libro y de los avisos del portal; ningún color nuevo. La
   superficie de la vela se sigue viendo: esto no esconde nada. */
.barco-vela-estado-peligro {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-error);
  font-weight: 600;
}

.barco-vela-estado-icono {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.barco-velas-nota {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-enlace-mas {
  display: inline-block;
  margin-top: var(--space-1);
  min-height: 44px;
  line-height: 44px;
}

/* --- El asistente: ocupa la pantalla él solo ------------------------- */
.barco-asistente-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}

.barco-asistente-cabecera h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.barco-asistente-progreso {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

.barco-asistente-progreso > span {
  flex: 1 1 0;
  min-width: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--color-divider);
}

.barco-asistente-progreso > span.barco-asistente-tramo-hecho {
  background: var(--color-primary);
}

.barco-asistente-paso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-asistente-paso-nombre {
  font-weight: 600;
  color: var(--color-text);
}

.barco-asistente-guardado {
  min-height: 1.4em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-asistente-guardado.barco-estado-ok {
  color: var(--color-success);
  font-weight: 600;
}

.barco-asistente-guardado.barco-estado-error {
  color: var(--color-error);
}

.barco-asistente-cuerpo {
  margin-top: var(--space-2);
}

/* Atrás y Siguiente, los dos en la MISMA línea, al pie. */
.barco-asistente-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.barco-boton-hueco,
.barco-boton-relleno {
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.barco-boton-hueco {
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.barco-boton-hueco:disabled {
  color: var(--color-text-faint);
  cursor: default;
}

.barco-boton-relleno {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.barco-boton-relleno:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Mientras al parte nuevo le falte qué pasa o el sistema, el botón no va: y
   tiene que verse que no va. El hueco ya tenía su regla; el relleno, no. */
/* El botón del parte cerrado: era un enlace fino y pasaba desapercibido. Es el
   MISMO rojo de la bandera —no se estrena ningún color— y el mismo tamaño de
   toque que los demás botones del libro.
   ⚠️ NO es `barco-boton-relleno` a propósito: ese es el de avanzar, y en un
   parte cerrado está escondido. Éste es el único de su pantalla.
   ⚠️ Contraste medido el 23/09/2026: 5,16 en claro y 4,29 en oscuro. El oscuro
   no llega a 4,5, y es el límite del rojo que la bandera ya usa: arreglarlo
   pide un rojo propio para el tema oscuro, y eso es estrenar color. */
.barco-boton-peligro {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: var(--color-error);
  color: var(--color-text-inverse);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.barco-boton-relleno:disabled {
  opacity: 0.45;
  cursor: default;
}

.barco-boton-relleno:disabled:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Lo que explica, detrás de una pregunta -------------------------- */
.barco-pregunta {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.barco-pregunta > summary {
  padding: var(--space-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.barco-pregunta > p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* --- Los pasos ------------------------------------------------------- */
.barco-proa-campos {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "uno" "dos" "tres";
  margin-bottom: var(--space-3);
}

/* Las áreas se reparten POR ORDEN, no por el nombre del campo: el paso de
   medir lleva tres casillas midiendo y DOS con la hoja del velero. */
.barco-proa-campos > .barco-campo:nth-child(1) { grid-area: uno; }
.barco-proa-campos > .barco-campo:nth-child(2) { grid-area: dos; }
.barco-proa-campos > .barco-campo:nth-child(3) { grid-area: tres; }

.barco-proa-campos .barco-campo,
.barco-proa-campos input[type="number"] {
  min-width: 0;
}

.barco-proa-unidad-fija {
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* El desplegable de «Marca» (paso 5) NO es una unidad de dos letras: sus
   opciones dicen «Al 100 %». Con el ancho de fábrica de .barco-unidad —5,5em,
   pensado para m y ft— la flecha se comía el «%». Se le deja el ancho de su
   contenido, como ya hacen los dos selectores cortos de la mayor, con un
   mínimo por si el navegador se queda corto. Sólo a este selector: los de
   unidad de la Ficha y la mayor no se tocan. */
.barco-unidad[data-campo="marca-elegida"] {
  width: auto;
  min-width: 8em;
  max-width: 100%;
}

.barco-proa-paso-nota {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.barco-proa-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.barco-proa-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.barco-proa-resultado:empty {
  display: none;
}

.barco-proa-resultado-grande {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.barco-proa-cifra-valor {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.barco-proa-cifra-etiqueta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-proa-diferencia {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Las marcas de enrollado ---------------------------------------- */
.barco-proa-marcas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.barco-proa-marca {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.barco-proa-marca.barco-proa-incompleta {
  border-color: var(--color-error);
}

.barco-proa-marca-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.barco-proa-marca-campo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.barco-proa-marca-campo label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
  white-space: nowrap;
}

/* Tres cifras con holgura: el porcentaje de una marca llega a 200 y antes
   quedaba cortado entre las flechitas y el borde.
   Y el número va CENTRADO. Es la única casilla estrecha de Barco: en 5,5rem,
   una cifra de dos dígitos arrimada al borde izquierdo se lee como un error de
   maquetación. Las anchas de la Ficha, la mayor y la hoja del velero se quedan
   como están —ahí el número empieza donde empieza la casilla y se lee bien. */
.barco-proa-marca-campo input[type="number"] {
  width: 5.5rem;
  min-width: 0;
  text-align: center;
}

/* La cifra que hace falta en cubierta, con la cinta en la mano. */
.barco-proa-marca-grande {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.barco-proa-marca-lados {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-proa-marca-aviso {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.barco-proa-marca-aviso[hidden] {
  display: none;
}

.barco-proa-medida-manda {
  color: var(--color-success);
  font-weight: 600;
}

/* Lo incompleto se ve, también en las filas de la mayor. */
.barco-incompleta {
  color: var(--color-error);
  font-weight: 600;
}

@media (max-width: 479px) {
  .barco-proa-marca-campo input[type="number"] {
    width: 5rem;
  }
}

@media (min-width: 720px) {
  .barco-proa-campos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "uno dos tres";
  }
}

/* === La barra de cuatro destinos (ficha 178, viaje 2) ===================
   UN solo punto de corte, 720 px: por debajo la barra va abajo, al alcance
   del pulgar; por encima va arriba, pegada bajo la cabecera. Se eligió 720
   porque es el único corte que el portal ya usa en los dos sentidos, y es
   donde ya giran las filas de la mayor y los campos de proa: así una tableta
   de 700 px tiene barra abajo Y filas estrechas, sin estados mezclados.
   Los otros cortes del fichero (479/480, 600, 700) no se tocan aquí.

   El aviso de Meteo viaja pegado a la barra y NO se va solo: encima de ella
   en el móvil, debajo en el escritorio. Por eso los dos comparten envoltorio
   y lo que cambia con el corte es la dirección del flex.                  */

.barra-zona {
  position: sticky;
  z-index: 900;
  display: flex;
  /* El aviso va ANTES que la barra en el DOM y así se pinta: encima de ella.
     En el móvil la zona está anclada por abajo, de modo que al aparecer el
     aviso crece hacia arriba y LA BARRA NO SE MUEVE de su sitio — los botones
     no se van de debajo del dedo. En el escritorio se invierte (la barra
     arriba, el aviso colgando de ella), y eso lo hace el corte de 720. */
  flex-direction: column;
  background: var(--color-surface);
}

.barra {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--color-divider);
}

.barra-destino {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  border-top: 2px solid transparent;
}

.barra-destino:hover {
  color: var(--color-text);
}

.barra-destino.activo {
  color: var(--color-primary);
  border-top-color: var(--color-primary);
}

.barra-icono {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.barra-palabra {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El aviso de Meteo. Se queda hasta que se toca otro destino o se cierra. */
.barra-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.barra-aviso[hidden] {
  display: none;
}

.barra-aviso-malo {
  background: oklch(from var(--color-warning) l c h / 0.10);
}

.barra-aviso-texto {
  flex: 1 1 14rem;
  min-width: 0;
}

.barra-aviso-enlace {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.barra-aviso-enlace[hidden] {
  display: none;
}

.barra-aviso-cerrar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}

.barra-aviso-cerrar svg {
  width: 18px;
  height: 18px;
}

.barra-aviso-cerrar:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

/* La vuelta única de Polares y de Dispositivo, ya dentro de Barco. */
.barco-pantalla-volver {
  align-self: flex-start;
  margin-bottom: var(--space-4);
}

/* Cerrar sesión, ahora en Cuenta. */
.account-salir {
  margin-top: var(--space-5);
}

@media (max-width: 720px) {
  .barra-zona {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid var(--color-divider);
  }
  /* Que ni la barra ni el aviso tapen el final de la página. El alto real lo
     mide la barra y lo escribe en --barra-alto cada vez que el aviso aparece,
     se va o se reparte en más líneas. El valor de reserva cubre la barra sola,
     y es el que manda mientras no haya nada que medir: al arrancar, con el
     panel todavía escondido, la medida sale 0 y la variable no se escribe. */
  .dashboard-main {
    padding-bottom: calc(var(--barra-alto, 4rem) + var(--space-8));
  }
}

@media (min-width: 720px) {
  .barra-zona {
    top: 0;
    /* Arriba la barra y el aviso colgando debajo. */
    flex-direction: column-reverse;
    border-bottom: 1px solid var(--color-divider);
  }
  .barra {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    border-top: none;
  }
  .barra-destino {
    flex: 0 1 auto;
    flex-direction: row;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    border-top: none;
    border-bottom: 2px solid transparent;
  }
  .barra-destino.activo {
    border-bottom-color: var(--color-primary);
  }
  .barra-aviso {
    border-top: none;
    border-bottom: 1px solid var(--color-divider);
  }
}

/* === La marca: el icono de vela llena (tramo B) ==========================
   Un solo <symbol> en el HTML y dos <use>: la entrada y la cabecera. El color
   viaja por currentColor, que se hereda a través de <use>, así que el icono
   sigue al tema sin una línea de JS. En claro va en Azul de carta (11,47 sobre
   blanco) y en oscuro en blanco (16,39 sobre la superficie), que es el
   negativo del manual. Sin relleno de color, sin degradado y sin trazo: el
   dibujo es la propia silueta llena.                                       */

.marca-icono {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-marca);
  fill: currentColor;
}

.marca-icono-grande {
  width: 48px;
  height: 48px;
}

/* === Mantenimiento: el libro del barco ================================== */
/* Color SÓLO donde significa: la A, la B y lo vencido. Todo sale de los
   tokens que ya existen, así que el modo oscuro va solo. */

.barco-libro-portada { margin-bottom: var(--space-4); }

.barco-libro-casco {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.barco-libro-ayuda {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.barco-libro-pestanas {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.barco-libro-pestana {
  flex: 1 1 0;
  min-height: 44px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.barco-libro-pestana.activa {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.barco-libro-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.barco-libro-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.barco-libro-tarjeta:hover { background: var(--color-surface-2); }
.barco-libro-borde-a { border-left-color: var(--color-error); }
.barco-libro-borde-b { border-left-color: var(--color-warning); }
.barco-libro-borde-gris { border-left-color: var(--color-text-muted); }
.barco-libro-borde-vencido { border-left-color: var(--color-error); }

.barco-libro-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.barco-libro-cat {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.barco-libro-plazo { font-size: var(--text-sm); font-weight: 600; }
.barco-libro-a { color: var(--color-error); }
.barco-libro-b { color: var(--color-warning); }
.barco-libro-vencido { color: var(--color-error); }
.barco-libro-gris, .barco-libro-cerrado { color: var(--color-text-muted); }

.barco-libro-que {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
}

.barco-libro-pie-tarjeta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-libro-pie {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.barco-libro-borrar {
  display: block;
  margin-top: var(--space-3);
  text-align: left;
  color: var(--color-text-muted);
}

/* Los selectores de una tinta: origen, categoría, resuelto como, repetición. */
.barco-seg { display: flex; gap: var(--space-2); }

.barco-seg-boton {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 0;
  /* Una sola palabra más larga que su botón NO tiene dónde partirse y se sale
     de la tarjeta: es lo que le pasaba a «Reconstruido», y «Mantenimiento» es
     más largo todavía. Esto es la red de seguridad; que quepa sin partirse lo
     resuelve la @media estrecha del final. */
  overflow-wrap: break-word;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.barco-seg-boton.activo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.barco-seg-pie {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  opacity: 0.85;
}

.barco-etiqueta {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-asiento-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

/* El desplegable de sistema hereda de .barco-unidad, que está pensado para «m»
   y «ft»: 5,5em. Con eso, «Seguridad y salvamento» o «Documentación y
   trámites» salían cortados. Aquí no se enseña una unidad, se enseña un
   nombre: ocupa lo que ocupa la casilla de al lado. */
.barco-asiento-selector {
  width: 100%;
}

/* Una ayuda suelta ENTRE casillas —no dentro de una— se quedaba pegada a la
   siguiente, porque el hueco entre casillas lo pone el margen de .barco-campo
   y ella no es una. Le damos el mismo. */
.barco-ficha-bloque > .barco-libro-ayuda {
  margin-bottom: var(--space-3);
}

/* En la pantalla del cierre, lo primero: aquí no se guarda nada solo. */
.barco-cierre-nota {
  margin-bottom: var(--space-4);
}

/* La ficha de un apunte cerrado: sólo lectura. */
.barco-libro-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-divider);
}

.barco-libro-clave { font-size: var(--text-sm); color: var(--color-text-muted); }
.barco-libro-valor { font-size: var(--text-sm); text-align: right; }

.barco-libro-notas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.barco-libro-nota {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
}

.barco-libro-nota-fecha { font-size: var(--text-xs); color: var(--color-text-muted); }
.barco-libro-nota-texto { font-size: var(--text-sm); line-height: 1.45; }

.barco-cierre-firma { border: 1px solid var(--color-primary); }

.barco-cierre-firma-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
}

.barco-cierre-firma-fila input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--color-primary);
}

.barco-cierre-meses { max-width: 8rem; }

/* El nombre nuevo de la vela, al pie del parte que la cambió. Se separa de la
   última fila de la ficha del parte como se separan las casillas entre sí: sin
   esto quedaría pegado a la fila de encima. */
.barco-libro-firma-hecha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

@media (max-width: 479px) {
  .barco-asiento-rejilla { grid-template-columns: minmax(0, 1fr); }

  /* Tres botones en una fila con una palabra larga dentro. Medido a 390 px:
     el ancho útil dentro de la sección es 310 px, y con el hueco y el relleno
     de fábrica cada botón se queda con 88 px de contenido mientras
     «Mantenimiento» pide unos 101. Se recorta el hueco, se recorta el relleno
     lateral y la letra baja un escalón: el contenido sube a unos 95 px y la
     palabra cabe entera, sin partirse. */
  .barco-seg { gap: var(--space-1); }

  .barco-seg-boton {
    padding: var(--space-2) 2px;
    font-size: var(--text-xs);
  }
}

/* === La bandera roja ==================================================== */
/* EL BARCO DE LA BARRA SE PINTA DE ROJO SOLO CUANDO EL SISTEMA ESTÁ
   CALCULANDO CON DATOS QUE YA NO SON LOS DEL BARCO. Nunca por avisos de
   cortesía. El veredicto lo decide el servidor y lo escribe la barra en
   `data-bandera` del documento; de aquí para abajo esto es sólo pintura: no
   hay ninguna pantalla decidiendo por su cuenta, y no hay forma de apagarla a
   mano. El rojo es el que ya usan la categoría A y los avisos: ninguno nuevo. */

/* El destino ENTERO —el dibujo y la palabra—, sin puntos ni pegatinas encima.
   El icono y el texto heredan el color del botón, así que basta una regla.
   Y el rojo MANDA sobre el azul de «estás aquí»: un id gana a dos clases, así
   que entrar en Barco no lo vuelve azul. */
body[data-bandera] #menu-barco,
body[data-bandera] #menu-barco:hover {
  color: var(--color-error);
  border-top-color: var(--color-error);
}

/* Y en la pantalla Barco, el borde del amarre del motivo: Velas si es una
   vela, Ficha si es la hélice. */
body[data-bandera~="vela"] #barco-amarre-velas,
body[data-bandera~="helice"] #barco-amarre-ficha {
  border-color: var(--color-error);
}

/* Y DENTRO de la ficha, la casilla que falta. El rastro se cortaba aquí: el
   barco de la barra y el amarre salían en rojo, pero al entrar en la ficha la
   casilla del tipo de hélice no se distinguía de las demás, y quien no lo
   supiera no encontraba qué falta. En las velas se marca la tarjeta de esa
   vela; aquí, su casilla.
   Sale del MISMO atributo que lo demás, así que se apaga sola con la bandera:
   no hay nada que cerrar a mano y ninguna pantalla decide por su cuenta. */
body[data-bandera~="helice"] #barco-tipo-helice {
  border-color: var(--color-error);
  /* El halo sale del propio token, con el mismo recurso que ya usan los fondos
     teñidos del portal: así sigue al tema y no se estrena ningún color. */
  box-shadow: 0 0 0 3px oklch(from var(--color-error) l c h / 0.25);
}

/* Mientras se está eligiendo, manda el foco: si no, la baliza —que pesa más
   que `.barco-unidad:focus`— taparía el anillo y no se sabría dónde se está. */
body[data-bandera~="helice"] #barco-tipo-helice:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

/* === Las fechas en el iPhone, y el aire de la rejilla de dos campos === */

/* EN iOS, WebKit rehace el campo de fecha DESPUÉS de leer esta hoja: le cambia
   el box-sizing a content-box, le impone un ancho mínimo y centra el texto. Con
   content-box, el width: 100% de .barco-entrada se queda para el contenido y el
   relleno y el borde se suman por fuera: el campo se sale por la derecha del
   formulario. Ni el min-width: 0 ni el border-box de la casa pueden evitarlo,
   porque llegan antes. Con la apariencia en none, WebKit no toca el campo, y la
   caja vuelve a ser la de cualquier otra casilla.
   Sólo en iOS: -webkit-touch-callout únicamente existe en los navegadores de
   iOS, así que en cualquier otro sitio este bloque no se aplica y el campo de
   fecha se queda como estaba. */
@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    /* Sin la apariencia propia, un campo de fecha VACÍO no tiene texto que le dé
       alto y se aplasta. Se le da el de una casilla de texto de .barco-entrada:
       su altura de línea (1,6, la del body, que llega por font: inherit) por su
       tamaño de letra, más el relleno de arriba y de abajo, más un píxel de
       borde por cada lado. */
    min-height: calc(var(--text-base) * 1.6 + 2 * var(--space-3) + 2px);
  }

  /* La hoja de fábrica de WebKit centra la fecha en iOS; las demás casillas
     escriben desde la izquierda. Esa hoja no centra nada más. */
  input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* Cuando la rejilla de dos campos se queda en una columna, bajo cada campo que
   no era el último de su pareja se sumaban dos espacios: el margen de la
   casilla y el hueco de la rejilla. Entre dos casillas apiladas tiene que
   haber el mismo aire que en el resto del formulario, que es el margen de
   .barco-campo: el hueco entre filas sobra. Mismo punto de corte en el que la
   rejilla pasa a una columna. */
@media (max-width: 479px) {
  .barco-asiento-rejilla { row-gap: 0; }
}

/* === El buscador de marinas: la ficha que se está mirando === */

/* Tocar una ficha del buscador la enseña en el mapa sin aceptarla, así que la
   ficha entera es tocable: la mano lo dice, y en iOS ayuda a que el toque
   llegue. La cabecera del respaldo de cercanía no es una ficha. */
.barco-puertos-resultados li:not(.barco-puertos-cercanas-cabecera) {
  cursor: pointer;
}

/* La que se está mirando lleva el borde y el halo del foco de una casilla, que
   es el «aquí estás» de la casa. Ni el rojo, que avisa de algo que falta, ni el
   verde, que es el puerto activo. Una sola a la vez. */
.barco-puertos-resultados li.barco-marina-mirando {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

/* === Deuda 126, tramo C: fuera los estilos en línea ===
   La CSP no admite 'unsafe-inline', así que los 19 atributos style= del
   frontal pasan aquí, con los MISMOS valores: lo que se ve no cambia. Ninguna
   regla anterior toca estos elementos con más fuerza que una clase (sólo los
   `button` y `p` sueltos de base.css), así que perder la prioridad del
   atributo no cambia nada. El diálogo de borrar sesión se sigue enseñando y
   escondiendo desde el JS con element.style.display, que la CSP permite. */
.marca-simbolos {
  position: absolute;
}

.confirmar-borrado {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.confirmar-borrado-caja {
  background: #1e293b;
  border-radius: 12px;
  padding: 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
}

.confirmar-borrado-texto {
  color: white;
  margin: 0 0 20px;
}

.confirmar-borrado-si {
  background: #e05a5a;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 12px;
}

.confirmar-borrado-no {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
}

.polars-results-mas {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.polar-detail-vmg-titulo {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.polar-detail-tabla-titulo {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.session-card-borrable {
  position: relative;
}

.session-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #e05a5a;
  padding: 2px 5px;
  z-index: 1;
}

.session-header-cargando {
  color: var(--color-text-muted);
}

.session-header-error {
  color: red;
}

.legend-swatch-0-2 { background: #3b82f6; }
.legend-swatch-2-4 { background: #22c55e; }
.legend-swatch-4-6 { background: #84cc16; }
.legend-swatch-6-8 { background: #eab308; }
.legend-swatch-8-10 { background: #f97316; }
.legend-swatch-10-mas { background: #ef4444; }

/* La llave entera del dispositivo se enseña una sola vez, al registrarlo o
   regenerarla, con este aviso debajo. Sin `display`: lo esconde [hidden]. */
.device-token-aviso {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-warning);
}

/* === Las gráficas de la salida: la disposición (obra A, 14/10/2026) =========
   Lo que cambia con el ancho vive SÓLO aquí, con el corte de la barra (720 px):
   el bloque final de la hoja no admite consultas (pantalla::P8) y, como va
   después, les gana a igual especificidad. En el móvil, sin scroll: fuera la
   cabecera y la subbarra, la lectura arriba (o el mapa, con «Mapa») y las
   bandas se reparten lo que queda hasta la barra. En el escritorio, la lectura
   y el mapa en una columna al lado, con la lista de sucesos debajo. Aquí va
   también lo que se posiciona (cada banda, su nombre y los lados de la
   escora): 216_visor::V15 no deja ni una posición del marco al final.
   A2 (14/10/2026): el alto del móvil lo escribe la pantalla en --graficas-alto,
   medido hasta la barra de abajo donde está de verdad; la cuenta de aquí es la
   de reserva, con la zona segura. Y la fila de la leyenda de las velas. */
.graficas-banda {
  position: relative;
}

.graficas-banda-nombre {
  position: absolute;
  top: 0;
  left: 2.75rem;
  right: var(--space-2);
}

.graficas-lado {
  position: absolute;
  right: var(--space-2);
}

.graficas-lado-estribor {
  top: 0;
}

.graficas-lado-babor {
  bottom: 0;
}

/* A5: la vista de medidas (#medidas, sólo en el móvil), arriba a la derecha
   de la capa de Gráficas. */
.graficas-medidas {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 1;
}

/* Obra B (16/10/2026): la hoja de una sobrepotencia, por encima y sin tocar
   ninguna medida: un hijo con posición absoluta de la rejilla de Gráficas, que
   va de la leyenda de las velas al pie de la columna de las bandas (en el
   móvil, todo lo que hay debajo de la lectura; en el escritorio, la columna de
   las bandas, sin tapar la lectura). Si no cabe, desplaza ella. El fondo, que
   la cierra al tocarlo, tapa Gráficas entera. */
.graficas-cuerpo {
  position: relative;
}

.graficas-hoja {
  position: absolute;
  grid-row: claves-start / bandas-end;
  grid-column: bandas-start / bandas-end;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100%;
  overflow-y: auto;
  z-index: 4;
}

.graficas-hoja-fondo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

@media (max-width: 720px) {
  /* A5: la cabecera y la franja, como la barra: sólo se esconden con Gráficas
     de verdad a la vista (:has). Una marca que se quede puesta fuera de
     Bitácora ya no deja Barco ni Cuenta sin cabecera. */
  .en-graficas:has(#section-bitacora:not([hidden]) > #session-graficas:not([hidden])) .dashboard-header,
  .en-graficas:has(#section-bitacora:not([hidden]) > #session-graficas:not([hidden])) .header-subbar {
    display: none;
  }
  /* A5: Gráficas es una capa fija que llena lo que se ve, con la zona segura
     de relleno; dentro, la columna de siempre, con las bandas repartiéndose lo
     que sobra. Nadie mide ni escribe su alto (en el iPhone, la A4 salía a
     veces aplastada). Por encima de la barra, aunque un navegador sin :has no
     la esconda. */
  .graficas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 950;
    padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) calc(var(--space-3) + env(safe-area-inset-right, 0px))
      calc(var(--space-1) + env(safe-area-inset-bottom, 0px)) calc(var(--space-3) + env(safe-area-inset-left, 0px));
    background: var(--color-surface);
  }
  .graficas-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "arriba" "claves" "tiras" "bandas";
  }
  .graficas-lectura,
  .graficas-mapa {
    grid-area: arriba;
  }
  .graficas-cifras {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .graficas-mapa,
  .graficas-sucesos,
  .graficas-con-mapa .graficas-lectura {
    display: none;
  }
  .graficas-con-mapa .graficas-mapa {
    display: block;
  }
  /* A4: Gráficas a pantalla entera. Con Gráficas a la vista, la barra de abajo
     se esconde: visibility y no display, para que siga midiéndose y su aviso
     no se pierda. Sólo mientras Gráficas está de verdad en pantalla (:has):
     si la clase se quedara puesta fuera de Bitácora, la barra no se va, y un
     navegador sin :has la deja como siempre. Vuelve por cualquier salida. */
  .en-graficas:has(#section-bitacora:not([hidden]) > #session-graficas:not([hidden])) .barra-zona {
    visibility: hidden;
  }
  /* Obra B: en el móvil la hoja llega a los bordes y al pie de la capa (por
     debajo de su relleno y de la zona segura). Más específico que el bloque
     final, que va después. */
  .graficas-cuerpo > .graficas-hoja {
    right: calc(-1 * (var(--space-3) + env(safe-area-inset-right, 0px)));
    bottom: calc(-1 * (var(--space-1) + env(safe-area-inset-bottom, 0px)));
    left: calc(-1 * (var(--space-3) + env(safe-area-inset-left, 0px)));
    max-height: calc(100% + var(--space-1) + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 720px) {
  /* A3: el alto lo mide la pantalla hasta el pie de la tarjeta, dentro de lo
     que se ve; ya no se deduce con 17rem. 30rem como poco. */
  .graficas {
    height: max(30rem, var(--graficas-alto, 30rem));
    position: relative;
  }
  .en-graficas .bitacora-section {
    margin-bottom: 0;
  }
  /* A3: en la columna de la lectura, los dos renglones y la línea de estado
     van debajo de la hora y a todo el ancho; se parten antes que salirse
     («como recomendaba el sistema antes de salir» se salía 75 px a 1920).
     Más específico que el bloque final, que va después. */
  .graficas-lectura .graficas-lectura-cabeza {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .graficas-lectura .graficas-velas,
  .graficas-lectura .graficas-reco {
    white-space: normal;
  }
  .graficas-cuerpo {
    grid-template-columns: minmax(0, 1fr) 17rem;
    grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "claves lectura" "tiras lectura" "bandas lectura" "bandas mapa" "bandas sucesos";
  }
  .graficas-cifras {
    grid-template-columns: minmax(0, 1fr);
  }
  .graficas-lectura {
    grid-area: lectura;
  }
  .graficas-mapa {
    grid-area: mapa;
  }
  .graficas-ver-mapa {
    display: none;
  }
}

/* === La 158: el mapa del puerto base y la barra de abajo (13/10/2026) ======
   Al bajar al mapa desde una ficha del buscador, su parte de abajo quedaba
   detrás de la barra fija del móvil: el centrado contaba el relleno de arriba
   de la hoja (el de base.css, que es para la barra de arriba) y no la barra de
   abajo. Con este margen el mapa queda en medio del hueco que la barra deja
   libre. Sólo mientras la barra va abajo, con su mismo corte: con la barra
   arriba no hace falta y subiría el mapa debajo de ella. Va aquí, antes de la
   raya táctil y del bloque de las fotos, porque desde ese bloque hasta el final
   de la hoja no se abre ninguna consulta (pantalla::P8). */
@media (max-width: 720px) {
  .barco-puertos-mapa {
    scroll-margin-bottom: calc(var(--barra-alto, 4rem) + var(--space-16));
  }
}

/* === La raya lateral, sólo en pantallas táctiles (deuda 181) ===============
   En el teléfono la página se mueve con el dedo y la raya de la derecha sólo
   delata que es una web. Con ratón se queda: ahí sirve para saber por dónde se
   va. Es la única consulta de la obra y por eso vive aquí, justo antes del
   bloque de las fotos: desde ese bloque hasta el final de la hoja no se abre
   ninguna (pantalla::P8). */
@media (pointer: coarse) {
  html {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    display: none;
  }
}

/* === Libro: fotos y factura (tramo 2, obra 2b) ============================
   Lo nuevo va AL FINAL y en un bloque propio: ninguna @media estrecha antes de
   la primera, nada fundido con las casillas numéricas y ninguna regla nueva de
   .barco-campo (tres vigías leen la primera que casa). Sólo tokens que ya
   existen, así que el modo oscuro va solo. Toques de 44 px como mínimo. */

.barco-adjuntos {
  margin-bottom: var(--space-3);
}

.barco-adjuntos-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* La miniatura: la foto recortada a un cuadrado. Se toca para verla entera. */
.barco-adjunto-mini {
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.barco-adjunto-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Si no se ha podido bajar, se ve: el borde en el rojo de los avisos. */
.barco-adjunto-mal {
  border-color: var(--color-error);
}

/* La cámara y la factura: botones de una tinta, con su icono a línea. La
   cámara es una etiqueta que abre su casilla de fichero, recortada por
   .sr-only: por eso va en posición relativa. */
.barco-adjunto-anadir,
.barco-adjunto-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.barco-adjunto-anadir {
  border-style: dashed;
}

/* La casilla de fichero está recortada: el foco se enseña en su etiqueta. */
.barco-adjunto-anadir:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.barco-icono {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La casilla del coste deja de ocupar todo el ancho: a su lado, la factura. */
.barco-coste-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.barco-coste-fila .barco-entrada {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.barco-coste-factura {
  flex: none;
}

/* Las dos líneas de ayuda de la fecha programada, una debajo de otra. */
.barco-libro-ayuda-linea {
  display: block;
}

.barco-libro-ayuda-linea + .barco-libro-ayuda-linea {
  margin-top: var(--space-1);
}

.barco-libro-corregir {
  margin-top: var(--space-4);
}

/* El visor: una capa encima de todo —de la barra y de los mandos del mapa—
   con la foto entera, o el enlace de la factura, y sus dos botones. */
.barco-visor {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.72);
}

.barco-visor-caja {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 40rem;
  max-height: 100%;
  overflow: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.barco-visor-titulo {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.barco-visor-imagen {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.barco-visor-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.barco-visor-abrir {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.barco-visor-copia {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* «Cerrar» siempre a la derecha; «Borrar», cuando sale, a la izquierda y en
   el rojo de los avisos. */
.barco-visor-pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.barco-visor-borrar {
  margin-right: auto;
  color: var(--color-error);
}

/* === Libro: las listas propias bajo las casillas (obra 2c-A) ===
   La pieza y los dos «Quién» tienen una lista propia en vez de la sugerencia
   del navegador. Va en el flujo, justo debajo de la casilla y con su propio
   desplazamiento: no tapa nada y no depende de ningún z-index. Filas de 44 px
   para el dedo; la activa del teclado, con el halo de la casa. */
.barco-lista {
  margin-top: var(--space-1);
  max-height: 18rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.barco-lista-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.barco-lista-opcion + .barco-lista-opcion {
  border-top: 1px solid var(--color-border);
}
.barco-lista-opcion:hover,
.barco-lista-opcion.activa {
  background: var(--color-primary-highlight);
}
.barco-lista-nombre {
  min-width: 0;
  overflow-wrap: anywhere;
}
.barco-lista-detalle {
  flex: 0 1 auto;
  max-width: 50%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: right;
}
.barco-lista-cabecera,
.barco-lista-separador {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
}
.barco-lista-separador {
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
.barco-lista-vacia {
  padding: var(--space-3);
  color: var(--color-text-muted);
}
/* La marca de que sistema o pieza los ha puesto «Qué pasa»: discreta, y se va
   en cuanto el patrón toca la casilla. */
.barco-propuesta {
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}
/* === Libro: corregir el parte entero (deuda 173) ===========================
   Sin consultas de ancho a propósito: la rejilla de dos campos ya pasa a una
   columna en el móvil (la regla de las fechas del iPhone), y este bloque cae
   dentro del que vigila pantalla::P8. */
.barco-cierre-apertura h5,
#barco-cierre-como {
  margin-bottom: var(--space-3);
}
/* Lo que pasó al corregir: el parte siguiente que no se ha movido, o el
   apartado de la ficha que hay que revisar. */
.barco-cerrado-aviso {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-error);
  color: var(--color-text);
}
/* El aviso «revisar»: no existe hasta que el veredicto lo dice. Lo escribe la
   barra en `data-revisar`; aquí es sólo pintura. «Revisado» es hueco: el
   relleno de cada pantalla es el de avanzar. */
.barco-revisar {
  display: none;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: oklch(from var(--color-error) l c h / 0.08);
}
body[data-revisar~="velas"] #barco-velas-revisar,
body[data-revisar~="helice"] #barco-helice-revisar {
  display: block;
}
.barco-revisar-texto {
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.barco-revisar-boton {
  min-height: 44px;
}
.barco-revisar-estado {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}

/* === Libro: programados, horas de motor y portada (deudas 182 y 184) =======
   Sin consultas de ancho a propósito: este bloque cae dentro del que vigila
   pantalla::P8, que llega hasta el final de la hoja. */

/* «Abrir parte», arriba, encima de las pestañas. Su contenedor es propio: el
   pie de las otras dos pantallas del libro no se toca. */
.barco-libro-arriba {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}

/* El número de casco en dos líneas: su nombre con la «i», y debajo el número
   entero con su lápiz. */
.barco-libro-casco-cabeza,
.barco-libro-casco-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.barco-libro-casco-cabeza label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}
.barco-libro-casco-fila .barco-entrada {
  flex: 1 1 auto;
  min-width: 0;
}
.barco-libro-casco::placeholder {
  color: var(--color-text-faint);
}
.barco-libro-portada .barco-libro-ayuda {
  margin-bottom: var(--space-2);
}

/* Un icono a línea que es un botón: una sola tinta y 44 px de toque. */
.barco-icono-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.barco-icono-boton:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Los programados de más adelante, plegados al final de «Abiertos». El título
   da 44 px de toque con su relleno. */
.barco-libro-mas-adelante {
  margin-top: var(--space-4);
}
.barco-libro-mas-adelante-titulo {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* === Libro: las candidatas de la propuesta (obra 2c-B) =====================
   Debajo de «Qué pasa»: «¿Cuál?» y un botón por pieza, en columna y a todo lo
   ancho, con toque de 44 px. Va AL FINAL, detrás del bloque de la 2b, y sin
   ninguna consulta de ancho: la columna vale igual en el móvil y en el
   escritorio. Sólo tokens, así que el modo oscuro va solo. */
.barco-candidatas { margin: var(--space-2) 0 var(--space-3); }

.barco-candidatas-pregunta {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.barco-candidatas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.barco-candidata {
  width: 100%;
  min-height: 44px;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

/* === Libro: el buscador de Cerrados ========================================
   Encima de la lista y sólo en esa pestaña. La casilla lleva la letra de las
   demás casillas de Barco, que nunca baja de dieciséis píxeles: así el iPhone
   no amplía la pantalla al tocarla. La equis va DENTRO de la casilla, a su
   derecha, colocada encima: aparecer no mueve nada, y la casilla deja su hueco
   para que el texto no quede debajo. El contador, debajo. Sin consultas de
   ancho y sólo tokens, así que el modo oscuro va solo. */
.barco-libro-busqueda { margin-bottom: var(--space-4); }

.barco-libro-busqueda-fila { position: relative; }

.barco-libro-busqueda-fila .barco-entrada {
  padding-right: calc(44px + var(--space-2));
}

.barco-libro-busqueda-fila .barco-icono-boton {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
}

.barco-libro-busqueda .barco-libro-ayuda { margin-top: var(--space-1); }

/* === Meteorología: los dos botones (deuda 186) =============================
   «Guardar» sólo guarda la zona; «Guardar y descargar el parte» la guarda y lo
   encarga. Uno encima del otro y a lo ancho, como el botón de antes; el
   relleno, sólo el de encargar. Apagados si la zona guardada no se ha podido
   leer. */
.meteo-botones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.meteo-botones .btn-primary { margin-top: 0; }

.meteo-guardar {
  width: 100%;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}

.meteo-guardar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === Libro: la casilla «Esto cambia cómo navega» (deuda 195) ===============
   El recuadro entero es la label, así que se toca en cualquier sitio: el
   título, la casilla y la ayuda van dentro. Aire, radio, fondo y borde de las
   casillas de Barco; la casilla, a la derecha del título y alineada con él,
   lejos de la esquina; la ayuda, debajo y a lo ancho. Marcada, se tiñe del
   azul del portal (--color-primary, que existe en los dos temas; el de la
   marca es blanco en oscuro) y la ayuda pasa al color del texto. Sin :has se
   queda sin tinte, y se usa igual. */
.barco-cierre-firma { border: none; }

.barco-cierre-firma-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  margin-bottom: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.barco-cierre-firma-ayuda {
  grid-column: 1 / -1;
  font-weight: 400;
}

.barco-cierre-firma-fila:has(#barco-cierre-firmar:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.barco-cierre-firma-fila:has(#barco-cierre-firmar:checked) .barco-cierre-firma-ayuda {
  color: var(--color-text);
}

/* === Los desplegables: la flecha no tapa el texto (deuda 199) ==============
   La flecha es la del navegador: ni flecha propia ni appearance. Lo que
   faltaba era sitio. Todo desplegable de Barco deja a la derecha su hueco de
   siempre más 1,25em para la flecha, que crece con la letra; en los 5,5em de
   una unidad, «m», «ft» o «kg» siguen cabiendo de sobra. Los dos que enseñan
   palabras —el tipo de una vela de proa y la moneda de un cierre— salen de
   los 5,5em con el ancho de su contenido y un mínimo, como ya hace «Marca». */
select.barco-unidad {
  padding-right: calc(var(--space-2) + 1.25em);
}

.barco-unidad[data-campo="tipo"],
#barco-cierre-moneda {
  width: auto;
  min-width: 8em;
  max-width: 100%;
}

/* === Confirmar la vela o la hélice cambiada (deuda 201) ====================
   El aviso de una vela o de la hélice que el libro vio cambiar, dentro de su
   pantalla —la mayor, el asistente de la proa y la Ficha—, con su botón. El
   recuadro del aviso «revisar»: el rojo de peligro, sin estrenar color, y el
   botón hueco, porque el relleno de cada pantalla es el de avanzar. No pone
   display a propósito: lo esconde y lo enseña `hidden`, que escribe la
   pantalla con el veredicto del servidor, y un display aquí lo taparía. */
.barco-confirmar {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: oklch(from var(--color-error) l c h / 0.08);
}

.barco-confirmar-texto {
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.barco-confirmar-boton {
  min-height: 44px;
}

.barco-confirmar-estado {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}

.barco-confirmar-estado.barco-estado-ok {
  color: var(--color-success);
  font-weight: 600;
}

/* === Que el portal parezca una app (deuda 181) =============================
   Lo que en el teléfono delata una página web, quitado sin tocar ninguna regla
   de antes y sin consultas (pantalla::P8). La raya lateral sí necesita una y va
   antes del bloque de las fotos.

   El doble toque ya no amplía la página: desplazar y pellizcar con dos dedos
   siguen, por eso es manipulation y nunca none. Los mapas llevan lo suyo en la
   hoja de Leaflet, que no se toca. */
html {
  touch-action: manipulation;
}

/* Sin el rebote ni el tirón de recargar al llegar arriba o abajo. */
html,
body {
  overscroll-behavior: none;
}

/* Sin el recuadro gris que el iPhone pinta sobre lo que se toca. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* La barra y los botones no se seleccionan ni sacan el menú de copiar al dejar
   el dedo encima. Sólo ellos: los textos, el cuerpo de cada parte y todas las
   casillas se siguen seleccionando. La tarjeta de un parte en la lista del
   libro es un botón y cuenta como tal; el parte se lee y se copia en su
   pantalla. La forma con prefijo es la que respeta Safari en el iPhone. */
.barra,
button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Casillas a 16 px: por debajo, el iPhone amplía la página al entrar en ellas.
   Las seis llevaban --text-sm, que no llega a 16 px hasta los 914 px de ancho;
   el token no se toca. Los mismos selectores que les daban la letra, para no
   alcanzar a nada más. */
.meteo-form select,
.session-notes-area textarea,
.barco-puerto-alias .barco-entrada {
  font-size: 1rem;
}

/* === Entrada: «Reintentar» (deuda 213) ===
   Cuando el arranque no llega al servidor, la llave sigue guardada y la
   entrada lo dice en el hueco del aviso; justo debajo, este botón repite el
   arranque. Hueco y no relleno —el relleno de la pantalla es «Entrar»—, de
   lado a lado como el aviso, y con el toque de 44 px de la casa. */
.auth-reintentar {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* === Libro: el visor de facturas en PDF (deuda 216) ===
   La factura se dibuja dentro de la caja del visor, página a página, en un
   lienzo cada una. Los mandos de ampliar y reducir van huecos (legible::L2) y
   con el toque de 44 px de la casa; las páginas, una debajo de otra. Un lienzo
   más ancho que la caja no se encoge (base.css lo haría al 100 %): es la caja
   la que desplaza, a lo ancho y a lo alto. Sin consultas de ancho
   (pantalla::P8) y sin touch-action (181::A1): el pellizco sigue siendo el del
   navegador. */
.barco-visor-mandos {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 100%;
}

.barco-visor-zoom {
  min-width: 44px;
  padding: 0 var(--space-3);
}

.barco-visor-escala {
  min-width: 4em;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barco-visor-paginas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 100%;
}

.barco-visor-pagina {
  max-width: none;
  border: 1px solid var(--color-border);
}

/* === Libro: el marco del visor (deuda 216-B) ===
   El visor ocupa la pantalla entera, en tres zonas: una cabecera fija
   («Cerrar», el título y los mandos), la zona del medio, la ÚNICA que
   desplaza (a lo alto y a lo ancho), y un pie fijo («Borrar» y guardar). En
   pantallas anchas el contenido va centrado con un ancho máximo. Las reglas
   de antes de la capa y de la caja se quedan: aquí sólo se anulan el relleno,
   el tope de ancho, la altura y el radio. Sin consultas (pantalla::P8) y sin
   touch-action (181::A1). La zona no lleva overscroll-behavior porque
   181::A2 fija esa lista: el fondo se queda quieto desde app.js, que
   bloquea el documento mientras el visor está abierto. */
.barco-visor {
  padding: 0;
}

.barco-visor-caja {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  gap: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}

.barco-visor-cabecera,
.barco-visor-pie {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
}

.barco-visor-cabecera {
  border-bottom: 1px solid var(--color-border);
}

.barco-visor-cabecera .barco-visor-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barco-visor-cabecera .barco-visor-mandos {
  flex: 0 0 auto;
}

.barco-visor-pie {
  border-top: 1px solid var(--color-border);
}

.barco-visor-zona {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
}

.barco-visor-contenido {
  max-width: 40rem;
  margin: 0 auto;
}

/* La imagen mide lo que digan los mandos (app.js le pone el ancho): ni se
   recorta a lo alto ni se encoge al ancho de la caja. */
.barco-visor-imagen {
  width: auto;
  max-width: none;
  max-height: none;
}

.barco-visor-guardar {
  display: inline-flex;
}

.barco-visor-guardar .barco-visor-copia,
.barco-visor-compartir {
  min-height: 44px;
}

/* Tramo 3 del libro (03/10/2026): la casilla de los avisos por correo en
   Cuenta. Letra de 16 px (181::A4) y flecha nativa. Bloque final, sin
   consultas (pantalla::P8). */
.cuenta-avisos {
  font-size: 1rem;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.cuenta-avisos-ayuda {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

/* Los m² del velero en la mayor (09/10/2026): el área de cada fila es una
   casilla con su unidad fija y, debajo, de dónde sale («Calculada» o «Del
   velero»). Con los m², el grátil y el pujamen de esa fila se apagan. Bloque
   final, sin consultas (pantalla::P8). */
.barco-mayor-fila .barco-mayor-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-self: start;
}

.barco-mayor-fila .barco-mayor-area .barco-entrada {
  width: 6.5em;
  flex: 0 1 auto;
}

.barco-mayor-unidad-fija {
  align-self: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.barco-mayor-origen {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.barco-mayor-fila .barco-entrada:disabled,
.barco-mayor-fila .barco-unidad:disabled {
  opacity: 0.5;
}

.barco-mayor-cuadra {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

/* Polares, tramos D y C (10/10/2026): la línea de la polar del barco, lo que
   dice el servidor al elegirla, la unidad del viento, la casilla para pegar y
   la vista previa antes de guardar. Las dos casillas, a 16 px (181::A4).
   Bloque final, sin consultas (pantalla::P8). */
.polares-vigente {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.btn-select-polar:disabled {
  opacity: 0.6;
  cursor: default;
}

.polar-eleccion {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.polar-eleccion p {
  margin: 0 0 var(--space-2);
}

.polar-unidad {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.polar-unidad legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

.polar-unidad-opcion {
  margin-right: var(--space-4);
}

.polar-pegar,
.polar-previa {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.polar-pegar-ayuda,
.polar-previa-aviso {
  margin: 0;
  color: var(--color-text-muted);
}

.polar-pegada,
.polar-previa-nombre {
  width: 100%;
  font-size: 1rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.polar-pegada {
  font-family: ui-monospace, monospace;
  resize: vertical;
}

.polar-previa-resumen {
  margin: 0;
}

.polar-previa-botones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.custom-polar-item-vigente {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
}

/* La versión al final de Cuenta (deuda 212): la revisión que sirve el portal,
   en gris y pequeña. Bloque propio, sin consultas. */
.cuenta-version {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Alta por invitación (deudas 138 y 69, 12/10/2026): la línea de «Crear tu
   cuenta» y el apartado de invitar de Cuenta. Bloque propio, sin consultas. */
.auth-invitacion {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.cuenta-invitar {
  margin-top: var(--space-5);
}

.cuenta-invitar h4 {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.cuenta-invitar-ayuda,
.cuenta-invitar-estado {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.cuenta-invitar-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cuenta-invitar-correo {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
}

.cuenta-invitar-form .btn-secondary {
  padding: var(--space-2) var(--space-4);
}

.cuenta-invitar-mal {
  color: var(--color-error);
}

/* Recuperar la contraseña con un código y cambiarla desde Cuenta (13/10/2026):
   el formulario de Cuenta, con las casillas de 16 px. Los dos pasos del código
   van en la tarjeta de la entrada, con sus clases de siempre. Bloque propio,
   sin consultas. */
.cuenta-contrasena {
  margin-top: var(--space-5);
}

.cuenta-contrasena h4 {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.cuenta-contrasena-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cuenta-contrasena-form label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.cuenta-contrasena-casilla {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
}

.cuenta-contrasena-casilla::placeholder {
  color: var(--color-text-faint);
}

.cuenta-contrasena-form .btn-secondary {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.cuenta-contrasena-estado {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.cuenta-contrasena-mal {
  color: var(--color-error);
}

/* La 239 (13/10/2026): «Cerrar sesión» con aire por dentro, como el otro botón
   sin relleno de Cuenta. Bloque propio, sin consultas. */
.account-salir .btn-secondary {
  padding: var(--space-2) var(--space-4);
}

/* === Las gráficas de la salida: el aspecto (obra A, 14/10/2026) ============
   Bloque propio, sin consultas: lo que cambia con el ancho está antes de la
   158. Una sola tinta, de los tokens del tema; también lo que pinta el
   lienzo, que los lee con una sonda (tintasDelTema). El ámbar, sólo sobre la
   superficie: sobre el fondo de la página no llega a 4,5:1. */
.en-graficas #section-bitacora > :not(#session-graficas) {
  display: none;
}

.salida-abrir-graficas {
  min-height: 44px;
  margin-bottom: var(--space-6);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.graficas {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 0;
}

.graficas-cabeza {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.graficas-volver {
  margin: 0;
}

.graficas-titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.graficas-ver-mapa {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.graficas-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: var(--space-1) var(--space-3);
}

.graficas-lectura {
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.graficas-lectura-cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.graficas-hora {
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

/* A2: a la derecha de la hora, dos renglones cortos: lo que llevas y lo que
   recomendaba el sistema. Ningún texto de Gráficas se corta con «…»: si no
   cabe, se acorta en el diseño. */
.graficas-renglones {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.graficas-velas,
.graficas-reco {
  white-space: nowrap;
}

.graficas-reco {
  min-height: 1.3em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.graficas-cifras {
  display: grid;
  gap: 0 var(--space-3);
}

.graficas-cifras div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.graficas-cifras dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.graficas-cifras dd {
  min-width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.graficas-linea {
  min-height: 1.3em;
}

.graficas-ambar {
  color: var(--color-warning);
}

/* «Elige tu polar en Barco»: un enlace a Barco › Polares. */
.graficas-enlace {
  font-size: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La leyenda de las velas, en palabras sueltas; cada una, con su muestra. */
.graficas-claves {
  grid-area: claves;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.graficas-claves[hidden] {
  display: none;
}

.graficas-clave::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 4px;
  vertical-align: middle;
}

.graficas-clave-llevabas::before {
  height: 0;
  border-top: 1px solid var(--color-primary);
}

.graficas-clave-recomendado::before {
  height: 0;
  border-top: 1px dashed var(--color-primary);
}

.graficas-clave-mas::before {
  background: repeating-linear-gradient(-45deg, var(--color-warning) 0 1px, transparent 1px 4px);
}

.graficas-clave-menos::before {
  background: var(--color-primary-highlight);
}

.graficas-clave-sobrepotencia::before {
  width: 6px;
  background: var(--color-warning);
}

.graficas-clave-suceso::before {
  width: 2px;
  height: 10px;
  background: var(--color-primary);
}

.graficas-mapa {
  min-height: 0;
  border-radius: var(--radius-md);
}

.graficas-tiras {
  grid-area: tiras;
  display: block;
  width: 100%;
  height: 64px;
}

.graficas-bandas {
  grid-area: bandas;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.graficas-banda {
  flex: 1 1 0;
  min-height: 0;
}

/* A4: la caja de las horas la escribe la pantalla, medida con su letra
   (medirLasHoras); 20px es sólo la reserva de antes de medir. */
.graficas-eje {
  flex: 0 0 var(--graficas-horas-alto, 20px);
}

.graficas-banda-nombre {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  pointer-events: none;
}

.graficas-leyenda::before {
  content: "";
  display: inline-block;
  width: 14px;
  margin-right: 3px;
  vertical-align: middle;
  border-top: 2px solid var(--color-primary);
}

.graficas-leyenda-polar::before {
  border-top: 1px dashed var(--color-primary);
}

.graficas-leyenda-babor::before {
  border-top-color: var(--grafica-babor);
}

.graficas-lado {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  pointer-events: none;
}

.graficas-sucesos {
  grid-area: sucesos;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
}

.graficas-suceso {
  width: 100%;
  padding: var(--space-1) 0;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--color-text);
}

.graficas-suceso.graficas-ambar {
  color: var(--color-warning);
}

/* A5: la vista de medidas (#medidas), para el amarrado: un recuadro pequeño
   encima de la lectura, que no se toca. Lo que se posiciona, antes de la 158.
   Bloque propio, sin consultas. */
.graficas-medidas {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.3;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* === Las gráficas de la salida, obra B: la hoja, la tira y el resumen (16/10/2026) ===
   Bloque propio, sin consultas ni posiciones (lo que se posiciona y lo que
   cambia con el ancho, antes de la 158). La «›» del botón de la línea la pone
   esta hoja: no es texto. */
.graficas-abrir-hoja {
  margin: -13px 0;
  padding: 13px 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

.graficas-abrir-hoja::after {
  content: " ›";
}

.graficas-hoja-fondo {
  background: oklch(from var(--color-text) l c h / 0.12);
}

.graficas-hoja {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.graficas-hoja-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}

.graficas-hoja-titulo {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.graficas-hoja-cerrar {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.graficas-hoja-filas {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--space-3);
  margin: 0;
}

.graficas-hoja-filas div {
  display: contents;
}

.graficas-hoja-filas dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.graficas-hoja-filas dd {
  min-width: 0;
  margin: 0;
}

.graficas-hoja-escora {
  display: block;
  width: 100%;
  height: 56px;
}

.graficas-hoja-nota {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.graficas-hoja-paso {
  margin: 0;
  padding: 0;
  list-style: none;
}

.salida-tira {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.salida-tira-lienzo {
  display: block;
  width: 100%;
  height: 64px;
}

.salida-resumen {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.salida-resumen-titulo {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
}

.salida-resumen-grupo {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.salida-resumen-filas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.salida-resumen-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.salida-resumen-nombre {
  min-width: 0;
}

.salida-resumen-cifras {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.salida-resumen-barra {
  display: block;
  flex: 0 0 100%;
  height: 6px;
  margin-top: 2px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-surface-offset);
}

.salida-resumen-lleno {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.salida-resumen-mas .salida-resumen-barra,
.salida-resumen-mas .salida-resumen-lleno {
  background-image: repeating-linear-gradient(-45deg, var(--color-warning) 0 1px, transparent 1px 4px);
}

.salida-resumen-pie {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* El resumen de la salida (09/11/2026): los dos rótulos, «Tiempo» y «% de la
   polar», una vez bajo el título y encima de las columnas de cifras. Las dos
   columnas llevan un ancho mínimo (min-width, nunca width: el texto no se
   corta) con el que caben «menos de 1 min» y «fuera de la polar», alineadas a
   la derecha como las cifras de cada fila: en el móvil, cuando las cifras caen
   bajo el nombre, siguen bajo su rótulo. Misma letra que las cifras, para que
   el ancho en «ch» sea el mismo. */
.salida-resumen-rotulos {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.salida-resumen-tiempo {
  min-width: 14ch;
  text-align: right;
}

.salida-resumen-pct {
  min-width: 17ch;
  text-align: right;
}

/* Borrar la cuenta (ficha 177, 09/11/2026): el diálogo de los cuatro pasos, sobre
   el molde del de borrar una navegación (.confirmar-borrado, de fondo oscuro
   fijo); las casillas, de 16 px, como las de Cuenta (181::A4). El botón apagado
   de una cuenta que invita y su aviso, en la zona de Cuenta. */
.cuenta-borrar-caja {
  text-align: left;
}

.cuenta-borrar-titulo {
  color: #ffffff;
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
}

.cuenta-borrar-casilla {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1rem;
}

.cuenta-borrar-otro {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.cuenta-borrar-otro a {
  color: #ffffff;
}

.cuenta-borrar-estado {
  color: #ffffff;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.cuenta-borrar-mal {
  color: #ffb4b4;
}

.cuenta-borrar-no {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.btn-danger:disabled {
  opacity: 0.55;
  cursor: default;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: transparent;
}

.btn-danger:disabled:hover {
  color: var(--color-text-muted);
  background: transparent;
}