/* Tus estilos generales existentes para la pantalla */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 20px;
    background-color: #f4f4f4;
}

.container { /* Este es el contenedor de index.html */
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: auto;
}

h1,
h2 { /* Estilo general para h1 y h2, se refinará para cotizacion.html en print */
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

input[type="text"],
input[type="number"],
input[type="file"] { /* Añadido input[type="file"] para consistencia */
    width: calc(100% - 22px);
    /* Ajusta padding y border */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

button { /* Estilo general de botón, puede ser usado por index.html */
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Estilos para el div de resultado en INDEX.HTML (si aún lo usas o quieres mantenerlo oculto) */
#resultadoCotizacion {
    margin-top: 30px;
    padding: 20px;
    border: 1px dashed #ccc;
    background-color: #e9ecef;
    border-radius: 5px;
    display: none; 
    /* Oculto por defecto, ya que cotizacion.html muestra el resultado */
}

#resultadoCotizacion h2 {
    margin-top: 0;
    color: #0056b3;
    text-align: left;
}

#resultadoCotizacion p {
    margin-bottom: 10px;
    font-size: 1.05em;
}

#resultadoCotizacion p strong {
    color: #333;
}

/* Símbolos de moneda y porcentaje (aplican globalmente si se usa la clase) */
.currency::before {
    content: "$"; /* Cuidado si cotizacion.html también define esto con márgenes */
}

.percentage::after {
    content: "%"; /* Cuidado si cotizacion.html también define esto con márgenes */
}

#logoEmpresa { /* Logo en index.html */
    max-width: 150px;
    max-height: 100px;
    height: auto;
}

#logoResultadoImpreso { /* Logo dentro de #resultadoCotizacion en index.html */
    display: none; 
    max-width: 120px;
    max-height: 80px;
    height: auto;
    margin-bottom: 10px;
}

/* Estilos para la vista previa de la imagen en index.html */
#imagenPreview {
    display: none;
    max-width: 100px;
    max-height: 100px;
    margin-top: 10px;
    border: 1px solid #eee;
    padding: 3px;
}

/* Contenedor de la imagen en el resultado de index.html */
#resImagenContainer {
    text-align: center;
    margin: 15px 0;
    display: none;
}

/* Imagen en el resultado de index.html */
#resVehiculoImagen {
    max-width: 90%;
    max-height: 150px;
    height: auto;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #fff;
}

.container-cotizacion #logoResultadoImpresoDetalle {
    display: block; 
    max-width: 220px; 
    height: auto;
    margin: 0 auto 25px auto; /* Esto centra la imagen */
}

/* ------------------------------------------------------------------ */
/* --- INICIO: NUEVO BLOQUE DE ESTILOS DE IMPRESIÓN --- */
@media print {
    body { 
        margin: 20mm !important; /* Márgenes de impresión generosos */
        padding: 0 !important; 
        background-color: #fff !important; /* Fondo blanco para impresión */
        font-size: 10pt !important; /* Tamaño base para impresión */
        color: #000 !important; /* Texto negro */
        width: 100% !important; /* Asegurar que el cuerpo use el ancho disponible */
    }

    /* Ocultar elementos que NO se deben imprimir NUNCA */
    #cotizadorForm, /* Formulario de index.html */
    #botonCotizar,  /* Botón de generar cotización de index.html */
    button, /* Oculta TODOS los botones. Si necesitas algún botón específico visible en impresión, tendrás que anular esto. */
            /* Para los botones de cotizacion.html (Imprimir/Cerrar) usaremos una clase específica abajo */
    label[for="vehiculoImagenInput"], /* Etiqueta de subir imagen */
    #vehiculoImagenInput,           /* Input para subir imagen */
    #imagenPreview,                 /* Vista previa de imagen en index.html */
    .detalle-porcentaje-para-pantalla, /* Elemento de index.html */
    #resultadoCotizacion /* El div de resultado original de index.html, si aún existe */ {
        display: none !important;
        visibility: hidden !important; /* Doble seguridad */
    }

    /* Estilos para el contenedor principal de cotizacion.html (DEBE ser visible) */
    .container-cotizacion { 
        border: none !important; 
        box-shadow: none !important; 
        margin: 0 !important; 
        width: 100% !important; /* Que ocupe todo el ancho disponible dentro de los márgenes del body */
        padding: 0 !important; 
        border-radius: 0 !important;
        background-color: #fff !important; /* Fondo blanco */
        visibility: visible !important; /* Asegurar visibilidad */
        display: block !important; /* Asegurar que se muestre */
    }

    /* Asegurar que los hijos directos e indirectos de .container-cotizacion sean visibles */
    .container-cotizacion > *,
    .container-cotizacion * {
         visibility: visible !important;
    }

    /* Elementos específicos DENTRO de .container-cotizacion (en cotizacion.html) */
    .container-cotizacion .botones-accion { /* Botones de Imprimir/Cerrar dentro de cotizacion.html */
        display: none !important; 
    }

     .container-cotizacion .parentesis-info { /* Oculta el texto del porcentaje al imprimir */
        display: none !important;
    }

    .container-cotizacion #logoResultadoImpresoDetalle { 
        max-width: 150px !important; 
        display: block !important; 
        margin: 0 auto 15px auto !important; /* Centrado y con margen inferior */
    }

    .container-cotizacion #resImagenContainerDetalle {
        text-align: center !important;
        margin: 10px 0 !important; /* Margen reducido para impresión */
        page-break-inside: avoid !important; /* Evitar que la imagen se parta entre páginas */
    }

    .container-cotizacion #resImagenContainerDetalle img { 
        max-width: 250px !important; /* Ajusta según necesites */
        max-height: 180px !important; /* Ajusta según necesites */
        border: 1px solid #ddd !important; /* Borde sutil */
        padding: 3px !important;
    }

    /* Logo dentro de cotizacion.html */
    .container-cotizacion #logoResultadoImpresoDetalle {
        display: block; /* Necesario para que margin: auto funcione horizontalmente */
        max-width: 220px; /* O el ancho que prefieras para tu logo */
        height: auto;
        margin: 0 auto 25px auto; /* Centrado (0 arriba, auto derecha, 25px abajo, auto izquierda) */
    }

/* Título "Resumen de Cotización" */
.container-cotizacion h2 {
    color: #005A9C; 
    text-align: center; /* <<< CAMBIADO A CENTER >>> */
    margin-top: 0; 
    margin-bottom: 30px; /* Puedes ajustar este margen si es necesario */
    font-size: 1.75em; 
    font-weight: 600; 
    border-bottom: none; 
    padding-bottom: 0;
}

    .container-cotizacion p {
        margin: 5px 0 !important; /* Margen reducido entre párrafos */
        line-height: 1.4 !important;
        font-size: 10pt !important; 
        orphans: 3 !important; /* Mínimo de líneas de un párrafo al final de una página */
        widows: 3 !important;  /* Mínimo de líneas de un párrafo al inicio de una página */
    }

    .container-cotizacion hr {
        margin: 10px 0 !important; 
        border: 0 !important;
        border-top: 1px solid #ccc !important; /* HR más visible */
    }

    /* Estilos para moneda y porcentaje en cotizacion.html */
    .container-cotizacion .currency::before {
        content: "$";
        margin-right: 1px; /* Ajuste fino si es necesario */
        color: #000 !important;
    }
    .container-cotizacion .percentage::after {
        content: "%";
        margin-left: 1px; /* Ajuste fino si es necesario */
        color: #000 !important;
    }
    .container-cotizacion .currency, 
    .container-cotizacion .percentage {
        color: #000 !important; /* Asegurar que el número también sea negro */
    }


    .container-cotizacion .nota-final {
        font-size: 8pt !important; /* Nota más pequeña */
        text-align: center !important;
        margin-top: 15px !important;
        page-break-before: auto !important; /* Permitir salto de página antes si es largo */
    }



    

}
/* --- FIN: NUEVO BLOQUE DE ESTILOS DE IMPRESIÓN --- */

/* ======================================================== */
/* === ESTILOS PARA LA VISTA EN PANTALLA DE COTIZACION.HTML === */
/* ======================================================== */

/* Contenedor principal de la cotización en pantalla */
.container-cotizacion {
    background-color: #fff;
    padding: 25px 35px; /* Ajuste de padding */
    border-radius: 6px; /* Bordes ligeramente menos redondeados */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra más sutil */
    max-width: 700px; /* Un poco más angosto que antes, como en la imagen */
    margin: 40px auto; /* Centrado con buen margen */
}


/* Título "Resumen de Cotización" */
.container-cotizacion h2 {
    color: #005A9C; 
    text-align: center; /* Alineado al centro */
    margin-top: 0; /* Quitar margen superior si el padding del contenedor es suficiente */
    margin-bottom: 30px;
    font-size: 1.75em; /* Tamaño del título */
    font-weight: 600; /* Un poco más grueso */
    border-bottom: none; /* Sin borde inferior como en la imagen de destino */
    padding-bottom: 0;
}

/* Párrafos dentro de la cotización */
.container-cotizacion p {
    margin-bottom: 12px;
    font-size: 0.95em; /* Tamaño de fuente base para los detalles */
    line-height: 1.6;
    color: #333; /* Color de texto principal */
    display: flex; /* Usamos flex para alinear etiqueta y valor */
    justify-content: space-between; /* Separa la etiqueta del valor */
    flex-wrap: wrap; /* Permite que el contenido se ajuste si no cabe */
}

.container-cotizacion p strong {
    color: #383838; /* Color para las etiquetas */
    font-weight: 600; /* Negrita para etiquetas */
    margin-right: 10px; /* Espacio entre la etiqueta y el valor si están en la misma línea */
}

.container-cotizacion p span {
    color: #333; /* Color del valor */
    font-weight: normal; /* Asegurar que el valor no esté en negrita por defecto */
    text-align: right; /* Alinea el valor a la derecha del espacio disponible */
}
.container-cotizacion p span.currency,
.container-cotizacion p span.percentage {
    white-space: nowrap; /* Evita que el símbolo de moneda/porcentaje se separe del número */
}


.container-cotizacion #resImagenContainerDetalle {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    background-color: #fdfdfd;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

.container-cotizacion #resImagenContainerDetalle img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    border: 1px solid #e0e0e0;
    padding: 4px;
    background-color: #fff;
    border-radius: 3px;
}

/* Líneas horizontales (HR) */
.container-cotizacion hr {
    border: 0;
    border-top: 1px solid #e0e0e0; /* Color de la línea como en la imagen */
    margin: 18px 0; /* Espaciado para las líneas */
}

.container-cotizacion .currency::before {
    content: "$";
    margin-right: 2px;
    font-weight: normal; 
}

.container-cotizacion .percentage::after {
    content: "%";
    margin-left: 2px;
    font-weight: normal;
}

.container-cotizacion p.summary-highlight,
.container-cotizacion p.summary-highlight strong,
.container-cotizacion p.summary-highlight span {
    font-weight: 600 !important; 
    color: #151515 !important; 
    font-size: 1em; 
}

/* Estilo para el texto entre paréntesis (el porcentaje) para que no sea negrita */
.container-cotizacion p.summary-highlight span.detalle-porcentaje-para-pantalla, 
.container-cotizacion p.summary-highlight span.parentesis-info  {
    font-weight: normal !important;
    color: #444 !important; 
    font-size: 0.9em !important; /* Un poco más pequeño */
    margin-left: 4px; 
}


/* Nota final */
.container-cotizacion .nota-final {
    font-size: 0.8em; /* Más pequeña */
    color: #555;
    text-align: left; /* Alineada a la izquierda como en la imagen */
    margin-top: 25px;
    padding: 0; /* Sin padding de fondo */
    background-color: transparent; /* Sin fondo de color */
    border-top: none; /* Sin borde superior si no es necesario */
    display: block; /* Para asegurar que ocupe su línea */
}
.container-cotizacion .nota-final small { /* El texto dentro de la nota */
    line-height: 1.5;
}


/* Contenedor de botones de acción en cotizacion.html */
.container-cotizacion .botones-accion {
    text-align: center; /* Centra el botón (si no es de ancho completo) */
    margin-top: 30px;
    padding-top: 0; /* Sin padding superior si no hay borde */
    border-top: none; /* Sin borde superior como en la imagen */
}

/* Botón "Imprimir Cotización" */
.container-cotizacion .botones-accion button {
    display: block; /* Para que ocupe todo el ancho */
    width: 100%;    /* Ancho completo */
    padding: 12px 20px;
    font-size: 1em;
    font-weight: 500;
    margin: 0; /* Sin margen lateral si es de ancho completo */
    background-color: #007bff; /* Azul del botón */
    color: white;
    border: none;
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.container-cotizacion .botones-accion button:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar el mouse */
}

/* Si tienes un botón "Cerrar" y quieres ocultarlo para que solo se vea "Imprimir" */
.container-cotizacion .botones-accion button.cerrar {
    display: none; 
}