h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDk5IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2Ni4wMTgzIDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Ensure touch-input style is applied globally so inputs rendered by Blazor Input* components receive it */
.touch-input { border-radius: 6px; }

/* QuoteForm styles moved from QuoteForm.razor.css */
/* Global box-sizing to avoid overflow */
*:focus { outline: none; }
*:not(textarea) { box-sizing: border-box; }

/* Tablet-friendly typographic defaults */
.quote-page { font-family: 'Segoe UI', Roboto, Arial, sans-serif; background:#fff; color:#222; padding:0.75rem; font-size:15px; max-width:1200px; margin:0 auto; }

.quote-header { display:flex; flex-direction:column; gap:0.5rem; background:#f8fafc; padding:0.8rem; border-radius:8px; margin-bottom:0.8rem; border:1px solid #e6e9ee; }
.workshop-logo { height: clamp(60px, 10vw, 175px); width:auto; margin-right:0.5rem; opacity:0.95; transition: height 160ms ease, transform 160ms ease; transform-origin:left center; }
.header-top { display:flex; align-items:center; gap:0.5rem; }
.workshop-name { font-size:1.6rem; font-weight:700; color:#0b3b5c; }
.quote-meta { font-size:0.95rem; color:#444; }
.quote-total { font-size:1.15rem; font-weight:700; color:#b22222; }
.quote-total-value { color:#0b3b5c; }

.section { border:1px solid #e6e9ee; background:#fafbfd; border-radius:8px; padding:0; margin-bottom:0.9rem; }
.section-title { padding:0.5rem 0.75rem; font-size:1.02rem; font-weight:600; color:#072b44; }
.section-body { padding:0.85rem; }

.form-row { display:flex; gap:0.75rem; flex-wrap:wrap; }
.form-row.single { justify-content:flex-start; }
/* Allow narrower columns to fit in 1200px without forcing scroll */
.form-col { flex:1 1 240px; min-width:160px; display:flex; flex-direction:column; gap:0.35rem; }

label { font-size:1.02rem; }
.form-control-lg { font-size:0.97rem; padding:0.6rem 0.7rem; min-height:40px; }
.touch-input { border-radius:6px; }

/* Make table horizontally scrollable but adapt cells to avoid forcing overflow */
.pieces-table { width:100%; border-collapse:collapse; /* keep table-layout:auto so widths can adapt */ table-layout:auto; }
.pieces-table th, .pieces-table td { vertical-align:middle; padding:0.5rem; word-break:break-word; overflow-wrap:break-word; }
.pieces-table tbody tr:nth-child(odd) { background:#ffffff; }
.pieces-table tbody tr:nth-child(even) { background:#f7f8fa; }
.pieces-table th { background:#f2f4f7; color:#0b3b5c; font-weight:600; }

/* Numeric columns: reserve space and align right */
.numeric-col { text-align:right; white-space:nowrap; padding-right:0.6rem; }

/* Specific column widths to avoid overlap with input controls */
.pieces-table th:nth-child(5), .pieces-table td:nth-child(5) { width:140px; }
.pieces-table th:nth-child(6), .pieces-table td:nth-child(6) { width:140px; }
.pieces-table th:nth-child(7), .pieces-table td:nth-child(7) { width:160px; }

/* Ensure input controls inside numeric cells fit within the column */
.pieces-table td .form-control-lg { width:100%; max-width:100%; box-sizing:border-box; text-align:right; }
.pieces-table td input[type='checkbox'] { width:auto; height:auto; transform:none; }

/* Reduce input sizes by 20% */
:root { --input-scale: 0.8; }

/* Apply scaled values and use higher specificity to override earlier rules */
.quote-page .form-control-lg {
    font-size: calc(0.97rem * var(--input-scale)) !important;
    padding: calc(0.6rem * var(--input-scale)) calc(0.7rem * var(--input-scale)) !important;
    min-height: calc(40px * var(--input-scale)) !important;
}

.quote-page input.form-control.touch-input,
.quote-page textarea.form-control.touch-input,
.quote-page select.form-control.touch-input,
.quote-page .quote-form .form-control-large,
.quote-page .quote-form input.form-control.touch-input,
.quote-page .quote-form textarea.form-control.touch-input,
.quote-page .quote-form select.form-control.touch-input {
    font-size: calc(1rem * var(--input-scale)) !important;
    padding: calc(0.8rem * var(--input-scale)) calc(0.9rem * var(--input-scale)) !important;
    min-height: calc(48px * var(--input-scale)) !important;
}

/* Scale checkboxes and other touch controls */
.touch-checkbox {
    width: calc(20px * var(--input-scale)) !important;
    height: calc(20px * var(--input-scale)) !important;
}

/* Adjust custom golpe input width */
.custom-golpe-input { width: calc(140px * var(--input-scale)) !important; }

/* Responsive adjustments for 1200px and below */
@media (max-width: 1200px) {
  .quote-page { padding:0.6rem; }
  .form-col { flex:1 1 280px; min-width:180px; }
  .form-control-lg { padding:0.8rem 0.9rem; min-height:48px; }
  .workshop-name { font-size:1.4rem; }
  .quote-total { font-size:1.05rem; }
  .services-grid { flex-direction:row; flex-wrap:wrap; }
  .service-card { flex:1 1 48%; }
  .pieces-table th, .pieces-table td { font-size:0.9rem; padding:0.45rem; }
}

/* Tablet portrait (vertical) — optimize fields and labels for 1200x1920 */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1200px) {
  .quote-form label { font-size: 1.25rem; line-height: 1.4; }
  .quote-form .form-col { gap: 0.6rem; }
  .quote-form .form-row { gap: 1rem; }
  .quote-form .form-control-large,
  .quote-form input.form-control.touch-input,
  .quote-form textarea.form-control.touch-input,
  .quote-form select.form-control.touch-input {
    padding: 1.05rem 1.2rem; /* taller tap target */
    min-height: 68px;
    font-size: 1.1rem;
  }
  .quote-form .observations { min-height: 180px; }
  .quote-form .action-btn { padding: 1.05rem; font-size: 1.06rem; }
  .quote-form .custom-golpe-input { width: 180px; }
  .pieces-table td .form-control-lg { min-height: 56px; }
}

/* Additional adjustments for mobile devices (768px and below) */
@media (max-width: 768px) {
  .form-col { flex:1 1 100%; min-width:0; }
  .form-control-lg { font-size:1.2rem; padding:1.2rem 1.3rem; min-height:64px; }
  label { font-size:1.2rem; }
  .quote-page { padding:0.5rem; }
}

/* Larger screens keep two-column actions */
@media (min-width: 900px) {
  .form-actions { flex-direction:row; }
  .action-btn { flex:1; }
  .quote-header { flex-direction:row; justify-content:space-between; align-items:center; }
  .workshop-logo { height:96px; }
}

/* Simple modal styles */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1040; pointer-events:auto; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,0.35); z-index:1050; pointer-events:auto; }
.modal-content { padding:1rem 1.25rem; min-width:280px; background:transparent; }

/* When modal is visible make the page inert/disabled and slightly dimmed */
.quote-page.inert { pointer-events:none; user-select:none; opacity:0.6; filter:blur(0.4px); }

/* Ensure modal and backdrop remain interactive even if parent becomes inert (modal is outside .quote-page in markup)
   but add high specificity to prevent accidental transparency */
.modal, .modal * { pointer-events:auto; }

/* Make modal content explicitly opaque to avoid transparency issues on some mobile browsers */
.modal, .modal-content { background-color:#ffffff; opacity:1; }

/* Side checkbox labels and checkbox sizing adjustments */
.side-checkboxes { display:flex; flex-direction:column; gap:0.25rem; }
/* Increase checkboxes by 25% relative to base 20px (and respect any global --input-scale) */
.touch-checkbox {
    width: calc(20px * var(--input-scale) * 1.25) !important;
    height: calc(20px * var(--input-scale) * 1.25) !important;
    margin-right:0.35rem;
    transform: none; /* ensure consistent appearance */
}

/* Make the "Izquierda"/"Derecha" labels match piece column text size */
.touch-label { display:flex; align-items:center; gap:0.45rem; font-size:0.95rem; }
.side-checkboxes .touch-label { font-size: 0.95rem; }


/* Match pieces table font-size at narrower breakpoints */
@media (max-width: 1200px) {
  .side-checkboxes .touch-label { font-size: 0.88rem; }
}

@media (max-width: 768px) {
  /* Keep labels readable on mobile while remaining consistent with piece text */
  .side-checkboxes .touch-label { font-size: 1.0rem; }
}

/* Fixed pixel distribution for .pieces-table at a 1200px design width */
@media (min-width: 1200px) {
  .pieces-table { table-layout: fixed; width: 100%; max-width: 1200px; }

  /* Column widths mapped to a 1200px layout (pixels) */
  /* 1: Pieza       -> 36%  = 432px */
  /* 2: D/I         -> hidden (0px) */
  /* 3: Operación   -> 11%  = 132px */
  /* 4: Reparación  -> 11%  = 132px */
  /* 5: Lámina      -> 8%   = 96px  */
  /* 6: Pintura     -> 8%   = 96px  */
  /* 7: Subtotal    -> 26%  = 312px */

  .pieces-table th:nth-child(1), .pieces-table td:nth-child(1) { width: 432px !important; }
  .pieces-table th:nth-child(2), .pieces-table td:nth-child(2) { width: 0px !important; }
  .pieces-table th:nth-child(3), .pieces-table td:nth-child(3) { width: 132px !important; }
  .pieces-table th:nth-child(4), .pieces-table td:nth-child(4) { width: 132px !important; }
  .pieces-table th:nth-child(5), .pieces-table td:nth-child(5) { width: 96px !important; }
  .pieces-table th:nth-child(6), .pieces-table td:nth-child(6) { width: 96px !important; }
  .pieces-table th:nth-child(7), .pieces-table td:nth-child(7) { width: 312px !important; }

  /* Hide the D/I column cells completely */
  .pieces-table th:nth-child(2), .pieces-table td:nth-child(2) { display: none; }

  /* Prevent header wrapping for small header columns */
  .pieces-table th:nth-child(3),
  .pieces-table th:nth-child(4) {
    white-space: nowrap;
  }

  /* Ensure inputs fit inside their fixed-width cells */
  .pieces-table td .form-control-lg { width: 100%; box-sizing: border-box; }
}

/* Remove spinner controls (up/down) from numeric inputs across browsers */
/* Chrome, Edge, Safari */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 /* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Also ensure any numeric inputs styled by .form-control don't show native arrows */
.form-control[type=number]::-webkit-outer-spin-button,
.form-control[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-control[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Restore and enforce action button styles in the quote page (higher specificity) */
.quote-page .form-actions .action-btn {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.02rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .quote-page .form-actions { flex-direction: row; }
  .quote-page .form-actions .action-btn { flex: 1; width: auto; }
}

/* Reinforce primary/secondary button colors within quote-page */
.quote-page .btn-primary {
  background: #0b3b5c;
  border-color: #063044;
  color: #ffffff;
}
.quote-page .btn-secondary {
  background: #6b7280;
  border-color: #4b5563;
  color: #ffffff;
}

/* Ensure .text-danger is visible (override parent color rules) */
.text-danger {
  color: #e50000 !important;
}

/* Top banner styles: make the banner span the full viewport width even when inside a centered container */
.top-banner {
  width: 100%; /* match the parent .quote-page width */
  background: #000; /* changed to solid black per request */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px 8px 6px 6px; /* match card-like appearance */
}

/* Logo inside the banner: responsive sizing and preserve aspect ratio */
.banner-logo {
  /* increased ~25% from previous values to enlarge logo while preserving aspect ratio */
  height: clamp(60px, 10vw, 175px);
  width: auto;
  max-width: 90%;
  object-fit: contain;
}

/* Make sure the banner does not visually collide with the form area */
.top-banner + .quote-header { margin-top: 0.5rem; }.top-banner + .quote-header { margin-top: 0.5rem; }