/* ═══════════════════════════════════════════
   COSTALERÍA (registro por barco + consolidado)
   ═══════════════════════════════════════════ */
.costaleria-container { width: 100%; padding: 30px clamp(14px, 2vw, 40px) 40px; box-sizing: border-box; }

.cost-headline { margin-bottom: 20px; }
.cost-title { margin: 0 0 3px; font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; color: var(--ink); }
.cost-sub { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

/* Formulario de registro */
.cost-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end;
}

.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; }

/* Registro por barco */
.boat-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.boat-row:last-child { border-bottom: none; }
.boat-icon {
  width: 40px; height: 40px; border-radius: var(--r); flex: none;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
}
.boat-name { flex: 1; font-weight: 700; color: var(--ink); font-size: 14px; }
.boat-name small { display: block; color: var(--ink-faint); font-weight: 500; font-size: 11.5px; margin-top: 1px; }
.boat-qty { text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.boat-qty small { display: block; font-family: var(--font-body); font-size: .68rem; color: var(--ink-faint); font-weight: 600; }

/* Total consolidado */
.cost-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.cost-total span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cost-total b { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Alta inline de tipo (desde el dropdown) */
.cost-addtipo-row { display: flex; gap: 8px; margin-top: 6px; }
.cost-addtipo-row .cap-input { max-width: 84px; flex: none; }
.cost-addtipo-row .filter-input { flex: 1; }

/* Acciones de tipo (editar/eliminar, admin) */
.cost-grid .hbar-h { align-items: center; }
.cost-grid .hbar-h .v { margin-left: auto; }
.tipo-actions { display: flex; gap: 4px; margin-left: 10px; flex: none; }

@media (max-width: 700px) {
  .costaleria-container { padding: 16px 12px 32px; }
  .cost-title { font-size: 1.3rem; }
  .cost-grid { grid-template-columns: 1fr; }
  .boat-qty { font-size: 1.05rem; }
}