/* --- Variables Globales y Reset Básico --- */
body {
    /* ... tus estilos de body existentes ... */
}

/* Clases para controlar visibilidad */
.print-only-text,
.print-only-block {
    display: none; /* Oculto en pantalla por defecto */
}

:root {
    --primary-color: #00529B; /* Un azul corporativo, ajusta según tu logo */
    --secondary-color: #003666;
    --accent-color: #FFC107; /* Amarillo para acentos, si aplica */
    --text-color: #333;
    --border-color: #ccc;
    --border-radius-inputs: 15px; /* Para inputs "capsula" */
    --border-radius-cards: 8px;
    --background-light: #f8f9fa;
    --font-family: Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: #e9ebee; /* Un fondo general para la página */
    padding: 20px;
    font-size: 14px; /* Tamaño base */
}
.autocomplete-wrapper {
    position: relative; /* MUY IMPORTANTE: El padre del dropdown debe ser relativo */
    /* Puedes ajustar el ancho del wrapper si es necesario, 
       o dejar que se ajuste al input si el input tiene un ancho definido */
}

/* Ajusta el ancho de tu input si es necesario, por ejemplo: */
/*
#razon-social {
    width: 100%;
    box-sizing: border-box; /* Para que el padding y border no añadan al ancho total */
/* }
*/

.sugerencias-dropdown {
    display: none; /* Oculto por defecto, JavaScript lo mostrará */
    position: absolute; /* Se posiciona relativo al .autocomplete-wrapper */
    background-color: white;
    border: 1px solid #ccc;
    border-top: none; /* Opcional, si quieres que se vea pegado al input */
    z-index: 1000;     /* Para que se muestre por encima de otros elementos */
    
    /* Posicionamiento y tamaño */
    left: 0;
    right: 0; /* Esto hará que tome el ancho del .autocomplete-wrapper */
    /* O puedes usar width: 100%; si el wrapper tiene el ancho deseado */
    /* width: 100%; */

    max-height: 200px; /* Altura máxima antes de mostrar scroll */
    overflow-y: auto; /* Scroll si hay muchas sugerencias */
    box-sizing: border-box;
}

.sugerencias-dropdown div { /* Estilo para cada item de sugerencia */
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.sugerencias-dropdown div:last-child {
    border-bottom: none;
}

.sugerencias-dropdown div:hover {
    background-color: #e9e9e9;
}

.proforma-container {
    max-width: 900px; /* Ancho máximo de la proforma */
    margin: 0 auto;
    background-color: #fff;
    padding: 25px;
    border-radius: var(--border-radius-cards);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

h1, h2, h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}
h3 { font-size: 1.2em; margin-top: 20px; }


/* --- Header --- */
.proforma-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 20px;
}
.logo-placeholder { /* Estilo para el texto del logo si no hay imagen */
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
    /* Añade aquí estilos para tu logo real si es imagen */
}
.proforma-header-alerta {
    background-color: #FF0000 !important; /* Rojo */
    color: white !important; /* Para que el texto sea legible */
    /* Puedes añadir una transición para un cambio más suave si quieres */
    transition: background-color 0.3s ease;
}

/* Opcional: Estilo para los textos dentro del header en alerta, si es necesario */
.proforma-header-alerta h1,
.proforma-header-alerta p,
.proforma-header-alerta .logo-placeholder {
    color: white !important;
}
.proforma-title-number h1 { margin-bottom: 5px; font-size: 1.8em;}
.proforma-title-number p { font-size: 1.1em; text-align: right;}

/* --- Divisores --- */
.section-divider {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 30px 0;
}
.subsection-divider {
    border: 0;
    height: 1px;
    background-color: #f0f0f0;
    margin: 20px 0;
}
table.pi-items-table td.item-descripcion {
    line-height: 1.3; /* Ajusta para mejor legibilidad de múltiples líneas */
    /* white-space: pre-line; // Podría ser útil si usaras \n en lugar de <br> */
}
.descripcion-detalle { /* Para las líneas de impresión, separadores, detalle adicional y medidas dentro de la descripción */
    display: block; /* Hace que cada uno tome una nueva línea */
    font-size: 0.9em; /* Un poco más pequeño si lo deseas */
    /* margin-left: 5px; */ /* Una pequeña sangría si quieres */
    color: #333; /* Color un poco más suave que el principal */
}

/* print */
table.pi-items-table td.item-medidas { /* La celda principal de Medidas */
    padding: 4px; /* Ajusta si es necesario */
    vertical-align: top;
}

.medida-print-contenedor {
    /* Contenedor general dentro de la celda de Medidas */
}

.medida-print-tipo {
    font-weight: bold;
    text-align: center; /* O como lo tengas en la imagen */
    margin-bottom: 4px; /* Espacio antes de la grilla de medidas */
    font-size: 0.9em;
}


.medida-print-grid {
    display: flex; /* Pone los items de medida en una fila */
    justify-content: space-around; /* O space-between */
    text-align: center; /* Centra el contenido de cada item */
}

.medida-print-item {
    display: flex;
    flex-direction: column; /* Etiqueta encima del valor */
    align-items: center; /* Centra etiqueta y valor */
    flex-basis: 30%; /* Divide el espacio, ajusta si es necesario */
    /* border: 1px solid #f0f0f0; /* Borde sutil para ver los items (opcional para depuración) */
}

.medida-print-etiqueta {
    font-size: 0.75em; /* Más pequeño para ANCHO, LARGO, ALTO */
    color: #333;
    display: block; /* Asegura que ocupe su línea */
    margin-bottom: 1px;
}

.medida-print-valor {
    font-size: 0.85em; /* Tamaño para los números */
    display: block; /* Asegura que ocupe su línea */
    font-weight: bold; /* Si quieres los números en negrita */
}
/**-------*/
/* --- Estructura de Formularios --- */
.form-row {
    display: flex;
    gap: 15px; /* Espacio entre form-groups en la misma fila */
    margin-bottom: 15px;
    flex-wrap: wrap; /* Para que se ajusten en pantallas pequeñas */
}
.form-row-center {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.form-group {
    flex: 1 1 200px; /* Flex-grow, flex-shrink, flex-basis */
    min-width: 150px; /* Mínimo ancho antes de envolver */
}
.form-group-inline { /* Para celular y RUC en la misma línea, más control */
    flex-basis: calc(50% - 7.5px); /* 50% menos la mitad del gap */
}

.form-group label,
.checkbox-group-legend label,
.additional-item > label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="email"], /* Si lo necesitaras */
.form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-inputs);
    font-size: 1em;
}
.form-group select { /* Flecha para select */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27292.4%27%20height%3D%27292.4%27%3E%3Cpath%20fill%3D%27%23333%27%20d%3D%27M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 10px;
    padding-right: 30px;
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 82, 155, 0.2);
}

/* Radio buttons y Checkboxes */
.centered-radios { /* Para Medidas Internas/Externas */
    justify-content: center;
    margin-bottom: 20px;
}
.radio-group, .checkbox-group-legend {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre radio/checkbox y su label */
}
.radio-group div { /* Contenedor de cada radio+label */
    display: flex;
    align-items: center;
    margin-right: 15px; /* Espacio entre opciones de radio */
}
.sr-only { /* Para etiquetas de accesibilidad que no se muestran visualmente */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.radio-group input[type="radio"],
.options-group input[type="checkbox"],
.additional-item > input[type="checkbox"],
.checkbox-final-option input[type="checkbox"] {
    margin-right: 5px;
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
}
.radio-group label, .checkbox-final-option label { /* Para que el label de radio/check no sea bold */
    font-weight: normal;
}


/* --- Secciones Condicionales (Impresión, Separadores) --- */
.options-group {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #e9e9e9;
    border-radius: var(--border-radius-cards);
}
.checkbox-group-legend {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 10px;
    cursor: pointer; /* Para indicar que es clickeable para JS */
}
.checkbox-group-legend label {
    font-weight: bold; /* Hereda, pero podemos ser explícitos */
    color: var(--primary-color);
}
.conditional-content {
    /* Por defecto oculto con JS, o puedes usar: display: none; */
    /* Aquí solo preparamos el estilo para cuando sea visible */
    padding-top: 10px;
    /* Transición suave si se usa JS para animar la altura */
    /* transition: max-height 0.3s ease-out, opacity 0.3s ease-out; */
    /* max-height: 0; */
    /* opacity: 0; */
    /* overflow: hidden; */
}
.conditional-content.visible { /* Clase que JS añadiría/quitaría */
    display: block; /* O la forma en que lo muestres con JS */
    /* max-height: 500px; */ /* Un valor suficientemente grande */
    /* opacity: 1; */
}
.error-message {
    color: #dc3545; /* Un color rojo para errores */
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
    min-height: 20px; /* Para que no salte la interfaz */
}
/* --- ESTILOS PARA EL MODAL DE ADMINISTRAR CLIENTES --- */

/* El fondo oscuro semi-transparente */
.modal-oculto {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo en la pantalla */
    z-index: 1000; /* Se pone encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el modal es muy grande */
    background-color: rgba(0,0,0,0.6); /* Fondo negro con 60% opacidad */
}

/* La caja blanca del modal */
.modal-contenido {
    background-color: #fefefe;
    margin: 10% auto; /* 10% desde arriba y centrado horizontalmente */
    padding: 25px;
    border: 1px solid #888;
    width: 80%; /* 80% del ancho de la pantalla */
    max-width: 900px; /* Un ancho máximo */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* El botón de cerrar (la 'x') */
.modal-cerrar {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 25px;
}

.modal-cerrar:hover,
.modal-cerrar:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Estilos para la tabla dentro del modal */
.modal-tabla-container {
    max-height: 400px; /* Altura máxima para la tabla, con scroll */
    overflow-y: auto;
    margin-top: 15px;
}

/* Estilos para los botones de acción en la tabla */
#modal-tabla-body .button-editar {
    background-color: #007bff; /* Azul */
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 0.9em;
}

#modal-tabla-body .button-eliminar {
    background-color: #dc3545; /* Rojo */
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
}

#modal-tabla-body .button-editar:hover {
    background-color: #0056b3;
}
#modal-tabla-body .button-eliminar:hover {
    background-color: #c82333;
}

/* --- Botones --- */
.button-primary, .button-secondary, .button-thirdy {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-inputs);
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
}
.button-primary {
    background-color: var(--primary-color);
    color: white;
}
.button-primary:hover {
    background-color: var(--secondary-color);
}
.button-secondary {
    background-color: #6c757d; /* Gris para secundario */
    color: white;
}
.button-secondary:hover {
    background-color: #5a6268;
}
.button-thirdy {
    background-color: #6c757d; /* Gris para secundario */
    color: white;
    margin-left: 50px;
}
.button-thirdy:hover {
    background-color: #5a6268;
}

/* --- Tabla de Items Agregados --- */
#added-items-section h3 { 
    text-align: center;
 }

 
.items-table-container {
    overflow-x: auto; /* Para que la tabla sea responsive en horizontal */
    text-align: center;
}
#proforma-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;

    
}
#proforma-items-table th, #proforma-items-table td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: center;
}
#proforma-items-table th,  #proforma-items-table td  {
    background-color: var(--background-light);
    color: var(--primary-color);
    font-weight: bold;
}
#proforma-items-table .remove-item-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
}
#proforma-items-table .remove-item-btn:hover {
    background-color: #c82333;
}


/* --- Costos Adicionales --- */
.additional-costs h3 { text-align: center; }
.additional-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid #f0f0f0;
    border-radius: var(--border-radius-cards);
    margin-bottom: 10px;
}
.additional-item > label { /* Label principal del checkbox */
    font-weight: bold;
    flex-grow: 1; /* Para que ocupe espacio y empuje los campos */
}
.additional-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* Para que se ajusten */
}
.additional-fields label {
    font-weight: normal;
    font-size: 0.85em;
    margin-bottom: 0; /* Quitar margen inferior si es en línea */
}
.additional-fields input[type="number"] {
    padding: 6px 8px;
    width: 80px; /* Ancho fijo para cantidad y precio pequeños */
    border-radius: var(--border-radius-inputs);
}

/* --- Opciones Finales y Footer de Totales --- */
.summary-options h3 { text-align: center; }
.checkbox-final-option {
    display: flex;
    align-items: center; /* Alinear checkbox con su label */
    padding-top: 20px; /* Para alinear con la base de los otros inputs */
}
.proforma-totals {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--primary-color);
}
.total-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-size: 1.1em;
}
.total-row .label {
    font-weight: bold;
    margin-right: 15px;
    color: #555;
}
.total-row .amount {
    min-width: 100px; /* Para alinear los montos */
    text-align: right;
}
.total-row.main-total .label,
.total-row.main-total .amount {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.2em;
}
/* --- ESTILOS PARA EL MENSAJE DE ÉXITO --- */
.notificacion-bonita {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745; /* Verde de éxito */
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: Arial, sans-serif;
    font-size: 15px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease; /* Animación suave */
}

.notificacion-bonita.mostrar {
    opacity: 1;
    transform: translateY(0);
}