/* ==========================================================================
   Carrocería: autobús y Sprinter vistos desde arriba, frente hacia arriba.
   La usan la venta, el detalle del viaje, la web pública y el widget. Cada
   pantalla pinta sus butacas (libre, ocupada, elegida) con sus propios
   colores; acá van la silueta, las medidas y los lugares sin butaca.
   Estructura: .carroceria > fila > celda (vehiculos.php, 'carroceria').
   ========================================================================== */
.carroceria {
    --asiento: 40px;
    --hueco: 7px;
    --chapa: #94a3b8;
    --chapa-suave: #e2e8f0;
    --piso: #f8fafc;
    position: relative;
    width: max-content;
    margin: 6px auto 4px;
    padding: 62px 18px 22px;
    background: var(--piso);
    border: 3px solid var(--chapa);
    box-shadow: inset 0 0 0 6px #fff, 0 10px 24px -14px rgba(15, 23, 42, .35);
}
.carroceria-sprinter { border-radius: 58px 58px 20px 20px; }
.carroceria-autobus  { border-radius: 34px 34px 16px 16px; }

/* Parabrisas con la palabra Frente */
.carroceria::before {
    content: "Frente";
    position: absolute;
    top: 12px; left: 22px; right: 22px;
    height: 32px;
    display: flex; align-items: center; justify-content: center;
    font: 700 10px/1 system-ui, sans-serif;
    letter-spacing: .22em; text-transform: uppercase;
    color: #475569;
    background: linear-gradient(180deg, #cbd5e1, #e2e8f0);
    border-radius: 40px 40px 8px 8px;
}
.carroceria-autobus::before { border-radius: 20px 20px 6px 6px; }

/* Espejos */
.carroceria::after {
    content: "";
    position: absolute;
    top: 30px; left: -14px; right: -14px;
    height: 12px;
    background:
        linear-gradient(var(--chapa), var(--chapa)) left / 11px 100% no-repeat,
        linear-gradient(var(--chapa), var(--chapa)) right / 11px 100% no-repeat;
    border-radius: 4px;
    pointer-events: none;
}

/* Filas: una fila real de la unidad */
.carroceria > div {
    display: flex !important;
    justify-content: flex-start !important;
    gap: var(--hueco) !important;
    margin: 0 0 var(--hueco) !important;
    width: auto !important;
}
.carroceria > div:last-child { margin-bottom: 0 !important; }

/* Celdas: todas del mismo tamaño, pase lo que pase en cada pantalla */
.carroceria > div > div {
    width: var(--asiento) !important;
    height: var(--asiento) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 13px;
}

/* Butacas: respaldo abajo (el pasajero mira hacia el frente) */
.carroceria > div > div:not(:empty):not(.chofer):not(.puerta):not(.bano) {
    border-radius: 9px 9px 6px 6px !important;
    border-bottom-width: 6px !important;
}

/* Cabina: chofer y puerta, separada del salón */
.carroceria > div:first-child {
    padding-bottom: 12px;
    margin-bottom: 14px !important;
    border-bottom: 2px dashed var(--chapa-suave);
}
.carroceria .chofer {
    font-size: 0 !important;
    color: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 14.5V21M9.6 11.2 3.5 9.5M14.4 11.2l6.1-1.7'/%3E%3C/svg%3E") center / 70% no-repeat !important;
    box-shadow: 0 0 0 2px var(--chapa-suave) !important;
    pointer-events: none;
}
.carroceria .puerta {
    font: 700 8px/1 system-ui, sans-serif !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 5px solid var(--chapa) !important;
    border-radius: 0 !important;
    display: flex !important; align-items: center; justify-content: flex-end;
    padding-right: 9px !important;
    width: calc(var(--asiento) + 21px) !important;
    margin-right: -21px !important; /* la marca de la puerta queda sobre la chapa del costado */
    pointer-events: none;
}
.carroceria .bano {
    font: 700 11px/1 system-ui, sans-serif !important;
    color: #475569 !important;
    background: repeating-linear-gradient(45deg, #e2e8f0 0 6px, #f1f5f9 6px 12px) !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 8px !important;
    display: flex !important; align-items: center; justify-content: center;
    pointer-events: none;
}
.carroceria > div > .doble { width: calc(var(--asiento) * 2 + var(--hueco)) !important; }

/* En el celular la unidad se achica un poco */
@media (max-width: 480px) {
    .carroceria { --asiento: 34px; --hueco: 6px; padding: 56px 12px 18px; }
    .carroceria > div > div { font-size: 11px; }
}