/*Body*/
/* Reset básico */
* {
  box-sizing: border-box;
}

body {
    background-color: #e6e6e6;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    
}
body.datos-page {
    display: block;
}

/*Navegador*/
nav {
    align-items: center; /* Alinea verticalmente */
    background-color: #3E649B;
    color: white;
}
.imagen {
    display: flex;
    justify-content: center;
}
.imagen img {
    height: 120px;
}
.naveg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: space-between;
    padding: 3px 20px;
}
nav h2 {
    text-align: center; /* Centra el texto en su celda */
    grid-column: 2; /* Lo ubica en la columna central */
}
#nuevocl {
    justify-self: start; /* Asegura que el enlace esté a la izquierda */
}
#nuevocl2 {
    justify-self: right;
}
/*Contenedor Principal*/
.container {
    width: 95%;
    display: flex;
    padding: 20px;
    border-radius: 10px;
    transition: max-height 0.5s ease;
    overflow: hidden;
    margin: 0px auto;
}
.container-index {
    background-color: rgb(240, 240, 240);
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Sombra negra con desenfoque */
    margin-bottom: 25px;
    margin-top: 1%;
    overflow: hidden;
}
.container-datos{
    display: block;
    max-height: 5000px;
    background-color: #f7f7f7;
    margin: 30px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    justify-content: center;
    gap: 20px;
}
.container.collapsed {
    max-height: 60;
    overflow: hidden; /* Oculta el contenido cuando está achicado */
}
#datos {
    display: block;
}
/* Estilo para enlaces */
a {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}
#detallescol {
    color: #4c79af;
}
a:hover {
    text-decoration: underline;
}
/*Tdatos*/
.tdatos {
    gap: 20px;
    width: 100%;
    overflow-x: auto;
}
.tdatos-update {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3columnas */
    gap: 20px;
}
.tdatos-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 5 columnas */
    gap: 20px;
    width: 90% auto;
    justify-content: center;
}
#tdatos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    margin: 0 auto;
}
/*Formdata*/
.formdata {
    background-color: white;
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

.formdata label {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    width: 100%;
    max-width: 350px;
    margin-bottom: 10px;
    text-align: right;
}
.labelInput td{
    padding: 1px;
}
.formdata input {
    width: 70px;
    margin-left: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
#formdataobs {
    justify-content: center;
}
#formdatalol {
    padding: 15px;
    padding: 15px;
    width: 21%;
}
.formcontainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap; /* Esto ayuda en pantallas chicas */
}

.formdata.datos-pag {
    text-align: left;
}
.formdata.datos-pag.cristales p {
    margin: 8px 0;
    align-items: baseline;
}

/* Estilo para las etiquetas (D, ESF, CIL, etc.) */
.formdata.datos-pag.cristales strong {
    flex: 0 0 120px; /* Ancho fijo para las etiquetas */
    text-align: right;
    padding-right: 15px;
    font-weight: bold;
    color: #555;
}

/*Botones*/
.button-container {
    display: flex;
    justify-content: center;
    width: 100%;
    grid-column: span 5; /* Que ocupe todas las columnas */
    margin-top: 20px;
}
.btn-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%; /* Asegura que los botones ocupen todo el ancho disponible */
}
button, .btn {
    padding: 10px 20px;
    background-color: #4c79af;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover, .btn:hover {
    background-color: #4c63af;
    transform: scale(1.05);
}
button:focus, .btn:focus {
    outline: none;
}

.botonrojo {
    width: 125px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circle-toggle {
    width: 30px;
    height: 30px;
    background-color: black;
    border-radius: 50%; /* Hace el div un círculo */
    cursor: pointer; /* Cambia el cursor para indicar que es interactivo */
    position: absolute;
    margin-right: 85%;
}

/* Títulos */
h1, h2, h3 {
    text-align: center;
    color: #ffffff;
    margin-bottom: 15px;
}
.H3ind {
    margin: 0px;
}
body.datos-page h3 {
    color: #333;
}
h3 {
    font-size: 1.2em;
    color: white;
}
h4 {
    margin: 0;
}

/* Estilo de las tablas */
table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}
th, td {
    padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
    background-color:#f9f9f9 ;
}
th {
    background-color: #f2f2f2ad;
}
tr:nth-child(even) td {
    background-color: #f2f2f2; /* Un gris claro para filas pares */
}

tr:nth-child(odd) td {
    background-color: #ffffff; /* Blanco para filas impares */
}

#search {
    padding: 12px;
    margin-top: 10px;
    margin-left: 10%;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
/* Contenedor de resultados */
#resultado {
    margin-top: 20px;
}

#tabla-container {
    width: 100%;
    height: 100%;  /* Aseguramos que el contenedor ocupe todo el alto disponible */
    overflow: hidden;  /* Previene el desbordamiento no controlado */
}
.tabla-cristales {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  
  .tabla-cristales td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
  }
  
  .tabla-cristales .primerafila td {
    font-weight: bold;
    background-color: #f0f0f0;
  }
  
/* Media Queries para responsive design */

@media (max-width: 1024px) {
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100%;
        box-sizing: border-box;
    }
    .container {
        width: 95%;  
        padding: 15px;
        flex-direction: column; 
    }
    table {
        overflow-x: auto;
        white-space: nowrap;
        width: 80%;
    }
    dialog table {
        display: block;
        width: 100%;
    }
    #datos {
        display: block;
    }
    #tdatos {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
    }
    .container-datos {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center; /* Centra los elementos */
    }

    /* Contenedor de datos */
    .tdatos-datos {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px; /* Reduce el espacio entre elementos */
        width: 100%; /* Ocupa todo el ancho disponible */
        margin: 12px auto;
    }

    /* Cada bloque de datos */
    .formdata {
        box-sizing: border-box; /* Incluye el padding en el ancho */
        margin-bottom: 10px; /* Espacio entre bloques */
    }

    /* Evita que el contenido se desborde */
    .formdata p {
        font-size: 24px;
        word-wrap: break-word; /* Rompe palabras largas para evitar desbordamiento */
    }
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    .tdatos {
        flex-direction: column;
    }

    table {
        width: 80%;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    dialog table {
        display: block;
        width: 100%;
    }
    #tabla-container table {
    display: block;
    width: 80%;
    }
    #search {
        width: 25%;
    }
    .formdata {
        padding: 10px; /* Reduce el padding para ahorrar espacio */
    }
    .formcontainer { 
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    .tdatos {
        flex-direction: column;
    }
    table {
        display: flex;
        justify-content: center;
        overflow-x: auto;
        white-space: nowrap;
    }
    dialog table {
        display: block;
        width: 100%;
    }
    #tabla-container table {
    display: block;
    width: 80%;
    }
    .formdata {
        padding: 10px; /* Reduce aún más el padding */
    }
}

.imagen {
    width: 100%;
}
.formdata input.input-cristal {
    width: 50px !important;
    padding: 3px;
    border: 1px solid gray;
    text-align: center;
    margin-left: 0;
}
td .checkbox-group label {
    font-size: 13px;
    width: auto;
}
table.tableCristal {
    width: auto;
}
.checkbox-group label {
    justify-content: flex-start;
}
.td-cristal {
    background-color: #fffbe6;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.primerafila td {
    padding: 0 12px 0 12px;
}

.LContactoGeneral {
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.LContacto {
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 205px;
    margin: 0 auto;
}

.LContInput {
    width: 60px;
}
#Eje {
    width: 40px;
}

.cositas {
    display: flex;
    border-radius: 5px;
    border: 2px solid #4c7aafa3;
    align-items: center; /* Alineación vertical central */
    padding: 5px;
    gap: 5px; /* Espacio entre elementos */
    margin-bottom: 3px;
}

.cositas label {
    display: flex;
    align-items: center; /* Alinea el texto y el input verticalmente */
    white-space: nowrap; /* Evita saltos de línea */
    margin: 0; /* Elimina márgenes por defecto */
}

.cositas input {
    margin-left: 2px;
    height: 24px; /* Altura fija para consistencia */
    box-sizing: border-box; /* Incluye padding en la altura */
    padding: 3px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.lol label{
    justify-content: flex-start;
    align-items: center;
}
.accordion {
    margin: 5px 0 5px 0;
}

.lol td {
    display: flex;
}
#MaterialLContInput {
    width: 160px;
}

p {
    margin: 0;
    text-align: left;
    font-size: smaller;
}

#btnOD.activo, #btnOI.activo {
    background-color: #cc0000;
    color: white;
    font-weight: bold;
  }

.form-lente {
    display: flex;
    flex-flow: column;
}

.activo {
  background-color: #e74c3c; /* rojo medio */
  color: white;
  border: none;
}

button.activo {
  background-color: #e74c3c;
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}
input#fecha_nacimiento {
    width: 120px;
}

.cositas table {
    margin: 0px;
}
/*
@media print {
     body {
        margin: 0;
        padding: 0;
    }
    nav {
        display: none;
    }
    .tdatos {
        visibility: hidden;
    }
    .imagen, .naveg, .btn-container {
        display: none;
    }
} */

@media print {
    /* 1. Ocultar elementos que no queremos en la impresión */
    nav,
    body > h3, /* Oculta el título "Detalles del cliente - NombreCliente" */
    .btn-container, /* Oculta el contenedor de botones */
    #nuevocl, 
    #nuevocl2,
    .datos-page > input#search,
    .datos-page > #resultado h3,
    .datos-page > #resultado #tabla-container,
    .LContacto /* Oculta toda la sección Lente RGP (etiqueta y botones OD/OI) */
    {
        display: none !important;
    }

    /* 2. Configuración de la página y cuerpo para máxima compactación y orientación HORIZONTAL */
    @page {
        size: A4 landscape; /* Orientación horizontal */
        margin: 0.5cm !important; /* Márgenes de página MUY reducidos */
    }

    body {
        margin: 0 !important; /* Sin márgenes adicionales en el body */
        padding: 0 !important;
        font-size: 7pt !important; /* Tamaño de fuente base MUY pequeño. Ajusta si es ilegible (ej. 8pt) */
        line-height: 1.1 !important; /* Interlineado reducido */
        color: #000;
        width: 100%; /* Asegurar que el body ocupe el ancho disponible en landscape */
    }

    /* Contenedores principales sin espacio extra */
    .container-datos, #datos, #tdatos {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important; /* El contenedor general de datos sí ocupa todo el ancho */
        box-shadow: none !important;
    }
    .LContacto {
        box-shadow: none !important;
    }
    
    /* 3. Acordeones (compactos) */
    .accordion {
        background: none !important;
        border: none !important;
        border-bottom: 0.5px solid #ccc !important;
        padding: 2px 0 !important;
        font-weight: bold !important;
        color: black !important;
        text-align: left !important;
        width: 100%; /* Acordeones ocupan el ancho de su contenedor formdata */
        font-size: 8pt !important;
    }

    .accordion::after, .accordion img { display: none !important; }

    .accordion-content {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        padding: 2px 0 5px 0 !important;
    }
    
    /* 4. Tablas (compactas y con ancho ajustado) */
    #tdatos table {
        /* width: 100% !important; */  /* Comentado para que no ocupe el 100% */
        width: 70% !important;        /* La tabla toma el ancho de su contenido */
        max-width: 100%;               /* No se desborda del formdata */
        border-collapse: collapse !important;
        margin-top: 2px !important;
        margin-bottom: 6px !important;
        margin-left: auto;                /* Alineación izquierda dentro del formdata */
        margin-right: auto;
    }

    #tdatos th, #tdatos td {
        border: 0.5px solid #555 !important;
        padding: 0px 2px !important; /* Padding vertical 0, horizontal 2px */
        text-align: left !important;
        vertical-align: top;
        font-size: 7.5pt !important; 
        line-height: 1 !important; 
    }
    
    /* Intentar dar un ancho máximo a la columna de etiquetas (primera celda td) */
    #tdatos tr > td:first-child {
        /* width: 30% !important; */ /* Prueba con porcentajes */
        max-width: 65px !important;   /* O un valor fijo. Ajusta este valor. Ejemplo: 65px */
        white-space: nowrap;          /* Evita que el texto de la etiqueta se parta, si cabe */
                                      /* Si las etiquetas son muy largas, podrías necesitar 'normal' y ajustar el max-width */
    }

    #tdatos th {
        background-color: #f8f8f8 !important;
        font-weight: bold;
        /* Hereda font-size y line-height de #tdatos td */
    }

    #tdatos .label { /* Si usas una clase .label directamente en el td */
        font-weight: bold;
        padding-right: 4px !important; /* Espacio a la derecha de la etiqueta */
        /* max-width: 65px !important; */ /* Aplicar también si es necesario */
        /* white-space: nowrap; */
    }
    
    .tabla-cristales { /* Las tablas de cristales podrían necesitar su propio manejo de ancho */
        width: auto !important; /* O un porcentaje específico, ej: width: 95% !important; */
    }

    .tabla-cristales td {
        font-size: 6pt !important; 
        padding: 0px 1px !important; 
        line-height: 1 !important; 
    }
    .tabla-cristales .primerafila td {
        font-weight: bold;
        /* Hereda font-size y line-height de .tabla-cristales td */
    }

    /* 5. Títulos de sección formdata y estilos de formdata */
    .formdata > p { /* Título como "Datos del cliente:" */
        margin: 0 0 2px 0 !important; /* Margen inferior pequeño antes de la tabla */
        padding: 0 !important;
    }
    .formdata > p > strong {
        display: block;
        font-size: 8pt !important; /* Un poco más pequeño que antes para compactar */
        margin-top: 4px !important;
        margin-bottom: 2px !important;
        border-bottom: 0.5px solid #333;
        padding-bottom: 1px;
    }
    .formdata:first-child > p > strong {
        margin-top: 0 !important;
    }

    .formdata {
        margin-bottom: 6px !important;
        padding: 4px !important; /* Padding interno del formdata reducido */
        background-color: transparent !important; 
        box-shadow: none !important; 
        border: 0.5px solid #ccc !important; 
        /* Considera si el formdata también necesita un width: auto o max-width */
        /* para que se ajuste a sus tablas internas si estas son angostas. */
        /* Por ejemplo: width: fit-content; o display: inline-block; (requiere ajustes de layout) */
    }

    #tdatos p { /* Párrafos dentro de #tdatos, podrían estar dentro de celdas */
        margin: 0 !important; 
        padding: 0 !important;
        font-size: inherit !important; 
        line-height: inherit !important; 
    }

    /* Saltos de página (igual que antes, permitiendo flujo) */
    table, tr, td, th, .formdata, .accordion-content {
        page-break-inside: auto !important;
    }
     .formdata, #tdatos table, .accordion {
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    /* Eliminar el borde rojo en lente de contacto */
    .formdata .cositas {
        border: none !important; 
        padding: 0 !important; 
    }
    .formdata .cositas table { /* Las tablas dentro de .cositas (lente de contacto) */
        width: auto !important; /* También se ajustan a su contenido */
        margin-top: 1px !important;
        margin-bottom: 3px !important;
    }
    .formdata .cositas table th,
    .formdata .cositas table td {
        border: none !important; 
        padding: 0 2px 0 0 !important; /* Padding mínimo, principalmente a la derecha del label */
        font-size: 6pt !important; /* Fuente muy pequeña para estas sub-tablas */
        line-height: 1 !important;
    }
    .formdata .cositas table td:first-child { /* Etiquetas dentro de .cositas */
         max-width: 50px !important; /* Ancho máximo para estas etiquetas más pequeñas */
         /* white-space: nowrap; */ /* Descomentar si es necesario y ajustar max-width */
    }

    .datos-armazon table {
        width: 70% !important;
    }
    .datos-pago table {
        width: 50% !important;
    }
}

.contLC {
    display: flex;
    gap: 5px;
}

.cositas td {
    padding: 5px;
}
.ODOI {
    width: 100%;
    display: flex;
}
.ODOI button {
    margin: 0 auto;
}