/*
    eminic.css
    Hoja de estilos base del sistema Eminic.
    Se carga en todas las pantallas ANTES de la hoja propia de cada pantalla.
    Colores tomados del logo:
        azul marino  #11375E  (la "E")
        azul claro   #87A5C9  (el panel de la izquierda)
        azul linea   #026093  (la linea bajo el logo)
        blanco       #FFFFFF
*/

:root {
    --azul-marino: #11375E;
    --azul-marino-oscuro: #0B2643;
    --azul-claro: #87A5C9;
    --azul-claro-suave: #E7EEF6;
    --azul-linea: #026093;
    --blanco: #FFFFFF;

    --fondo: #F2F5F9;
    --texto: #1F2A37;
    --texto-suave: #5B6B7D;
    --borde: #D6DFEA;

    --exito: #2E7D4F;
    --error: #B3261E;

    --radio: 8px;
    --sombra: 0 1px 3px rgba(17, 55, 94, .08), 0 4px 14px rgba(17, 55, 94, .06);
    --fuente: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente);
    font-size: 14px;
    line-height: 1.4;
    color: var(--texto);
    background: var(--fondo);
}

a {
    color: var(--azul-linea);
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
}

/* ---------- Titulos ---------- */

/* Titulo principal de la pantalla */
.form-titulo {
    margin: 0 0 16px;
    padding: 0 0 10px;
    color: var(--azul-marino);
    background: none;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .5px;
    text-align: left;
    border: none;
    border-bottom: 3px solid var(--azul-linea);
    border-radius: 0;
}

/* Titulo de seccion dentro de una tarjeta */
.form-titulo2 {
    width: 100%;
    margin: 18px 0 10px;
    padding: 8px 12px;
    color: var(--azul-marino);
    background: var(--azul-claro-suave);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-align: left;
    border: none;
    border-left: 4px solid var(--azul-linea);
    border-radius: 4px;
}

/* ---------- Tarjeta / formulario ---------- */

.form-register {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 20px;
    padding: 20px 24px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
}

/* ---------- Botones ---------- */

.button,
button.button {
    display: inline-block;
    min-width: 120px;
    margin: 4px;
    padding: 10px 22px;
    font-family: var(--fuente);
    font-size: 14px;
    font-weight: 600;
    color: var(--blanco);
    background: var(--azul-marino);
    border: 1px solid var(--azul-marino);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.button:hover {
    color: var(--blanco);
    background: var(--azul-linea);
    border-color: var(--azul-linea);
}

.button:focus-visible {
    outline: 3px solid var(--azul-claro);
    outline-offset: 2px;
}

/* Botones pequenos dentro de tablas */
.agregacli,
.agregapro,
.limpiacli2,
.botones-tabla {
    display: inline-block;
    margin: 2px;
    padding: 4px 10px;
    font-family: var(--fuente);
    font-size: 12px;
    font-weight: 600;
    color: var(--blanco);
    background: var(--azul-marino);
    border: 1px solid var(--azul-marino);
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

.agregacli:hover,
.agregapro:hover,
.limpiacli2:hover,
.botones-tabla:hover {
    color: var(--blanco);
    background: var(--azul-linea);
    border-color: var(--azul-linea);
}

/* Boton secundario (claro) */
.agregapro2 {
    display: inline-block;
    margin: 2px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--azul-marino);
    background: var(--azul-claro-suave);
    border: 1px solid var(--azul-claro);
    border-radius: 5px;
    cursor: pointer;
}

.agregapro2:hover {
    color: var(--blanco);
    background: var(--azul-marino);
    border-color: var(--azul-marino);
}

/* ---------- Campos ---------- */

input,
select,
textarea {
    font-family: var(--fuente);
    font-size: 13px;
    color: var(--texto);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Campo de busqueda grande */
.buscadores,
.buscars {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    text-align: left;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 6px;
}

.buscadores:focus,
.buscars:focus {
    border-color: var(--azul-linea);
    box-shadow: 0 0 0 3px rgba(2, 96, 147, .15);
}

/* Combos con flecha */
.despegable {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 30px 8px 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--texto);
    background-color: var(--blanco);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%3E%3Cpath%20fill%3D%22%2311375E%22%20d%3D%22M0%200h12L6%208z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px auto;
    border: 1px solid var(--borde);
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.despegable:focus {
    border-color: var(--azul-linea);
    box-shadow: 0 0 0 3px rgba(2, 96, 147, .15);
}

/* ---------- Tablas ---------- */

table {
    border-collapse: collapse;
}

.tablita {
    width: 100%;
    font-family: var(--fuente);
    background: var(--blanco);
    border-collapse: collapse;
}

.tablita th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--blanco);
    background: var(--azul-marino);
    white-space: nowrap;
}

.tablita td {
    padding: 4px 6px;
    font-size: 12px;
    border-bottom: 1px solid var(--borde);
}

.tablita tbody tr:nth-child(even) {
    background: #F7F9FC;
}

.tablita tbody tr:hover {
    background: var(--azul-claro-suave);
}

.tablita table thead tr th {
    position: static;
}

/* Contenedor con scroll para tablas anchas */
.detalle {
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
    overflow: auto;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 6px;
}

/* ---------- Componentes comunes de las pantallas ---------- */

/* Botones de los formularios de catalogos */
.btn-enviar,
.agregaus,
.aa,
.btn {
    display: inline-block;
    margin: 4px;
    padding: 10px 22px;
    font-family: var(--fuente);
    font-size: 14px;
    font-weight: 600;
    color: var(--blanco);
    background: var(--azul-marino);
    border: 1px solid var(--azul-marino);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    width: auto;
    transition: background .15s, border-color .15s;
}

.btn-enviar:hover,
.agregaus:hover,
.aa:hover,
.btn:hover {
    color: var(--blanco);
    background: var(--azul-linea);
    border-color: var(--azul-linea);
}

/* Botones chicos dentro de tablas */
.aa,
.tablita a,
td .agregaus {
    margin: 2px;
    padding: 4px 10px;
    font-size: 12px;
}

.tablita a {
    display: inline-block;
    font-weight: 600;
    color: var(--blanco);
    background: var(--azul-marino);
    border-radius: 5px;
    text-decoration: none;
}

.tablita a:hover {
    background: var(--azul-linea);
}

.botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

.botones .btn-enviar {
    margin: 0;
}

.btn2 {
    display: flex;
    justify-content: flex-end;
}

/* Titulos secundarios */
.titulocot,
.titulocot2 {
    margin: 0 0 12px;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--azul-marino);
    text-align: left;
    background: var(--azul-claro-suave);
    border-left: 4px solid var(--azul-linea);
    border-radius: 4px;
}

/* Contenedores con scroll para tablas */
.detalle2,
.detalle3,
.detallec {
    width: 100%;
    max-height: 420px;
    margin: 0 auto 12px;
    overflow: auto;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 6px;
}

.textareaubicacion {
    padding: 4px 8px;
    font-size: 12px;
    text-align: center;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 5px;
    resize: none;
}

/* Etiquetas sobre los campos (<p>, <label>, <span>) */
.contenedor-inputs > p,
.contenedor-inputs .caja p,
.juntitos > p,
.contenedor-inputs label > p {
    margin: 6px 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.caja-16 { width: 16%; }
.caja-20 { width: 19%; }
.caja-25 { width: 24%; }
.caja-30 { width: 32.5%; }
.caja-48 { width: 48%; }
.caja-100 { width: 100%; }

/* Filas vacias que reservan alto en tablas de captura */
.fila-relleno td {
    color: transparent;
}

/* Colores de estado (antes amarillo, verde y rojo en linea) */
.estado-amarillo { background-color: #FFE7A3 !important; }
.estado-verde { background-color: #C9EDB4 !important; }
.estado-verde-fuerte { background-color: #9EE09E !important; }
.estado-rojo { background-color: #F6B4B0 !important; }
.estado-blanco { background-color: var(--blanco) !important; }

/* ---------- Tablas de resultados (tablesorter) ---------- */

.tabla {
    width: 100%;
    font-family: var(--fuente);
    font-size: 12px;
    color: var(--texto);
    background: var(--blanco);
    border-collapse: collapse;
}

.tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 22px 9px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--blanco);
    background: var(--azul-marino);
}

.tabla td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--borde);
}

.tabla tbody tr:nth-child(even) td {
    background: #F7F9FC;
}

.tabla tbody tr:hover td {
    background: var(--azul-claro-suave);
}

/* Flechas de orden que agrega tablesorter */
.tabla th.tablesorter-header {
    position: sticky;
    cursor: pointer;
}

.tabla th.tablesorter-header::after {
    content: "\25B4\25BE";
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    letter-spacing: -1px;
    color: var(--azul-claro);
}

.tabla th.tablesorter-headerAsc::after {
    content: "\25B4";
    color: var(--blanco);
}

.tabla th.tablesorter-headerDesc::after {
    content: "\25BE";
    color: var(--blanco);
}

.tabla th.sorter-false::after {
    content: none;
}

/* Botones dentro de las tablas (Ver, Mostrar, PDF) */
.tabla a {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--blanco);
    background: var(--azul-marino);
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}

.tabla a:hover {
    background: var(--azul-linea);
}

/* ---------- Ventanas modales (<dialog>) ---------- */

.modalDialog {
    width: 95vw;
    max-width: 1200px;
    padding: 0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.modalDialog::backdrop {
    background: rgba(11, 38, 67, .55);
}

.modalDialog > div {
    padding: 20px 24px;
    background: var(--blanco);
}

.modalDialog .form-titulo {
    padding-right: 44px;
}

.modalDialog .form-register {
    padding: 0;
    border: none;
    box-shadow: none;
}

.label-in {
    display: block;
}

.span-in {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--texto-suave);
}

.nomclicss {
    text-align: left;
}

/* ---------- Boton X de los modales ---------- */

/* Boton X para cerrar, en la esquina superior derecha del modal */
.modal-cerrar {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--texto-suave);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.modal-cerrar:focus {
    outline: none;
}

.modal-cerrar:focus-visible {
    outline: 2px solid var(--azul-claro);
}

.modal-cerrar:hover {
    color: var(--blanco);
    background: var(--azul-marino);
}

/* ---------- Mensajes ---------- */

.error {
    display: inline-block;
    padding: 8px 14px;
    color: var(--error);
    background: #FDECEA;
    border: 1px solid #F5C2BE;
    border-radius: 6px;
    font-size: 13px;
}

/* ---------- Utilidades ---------- */

.oculto {
    display: none;
}

.ancho-completo {
    width: 100%;
}

.centrado {
    justify-content: center;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

/* ---------- Ajustes de pantallas antiguas ---------- */

/* Tabla dentro de otra tabla (cotizaciones hechas) */
.tablita .tablita th {
    position: static;
    color: var(--texto);
    background: var(--azul-claro-suave);
}

/* Totales al pie de los reportes */
.tabla tfoot td {
    font-weight: 600;
    background: var(--azul-claro-suave);
}

/* Tabla anidada del reporte de complementos de pago */
.tabla .tabla2 {
    width: 100%;
    margin: 2px 0;
    box-shadow: none;
}

.tabla .tabla2 td {
    text-align: left;
    background: transparent;
}

/* Campos de texto que solo muestran informacion */
.detalle3 .textareaubicacion {
    width: 150px;
    text-align: left;
    background: none;
    border: none;
}

/* Si en el modal solo queda un boton, se alinea a la derecha */
.modalDialog .caja:has(> .caja-48:only-child) {
    justify-content: flex-end;
}

/* Lineas separadoras (<hr color="black">) con el color de los bordes */
hr {
    height: 0;
    margin: 8px 0;
    border: none;
    border-top: 1px solid var(--borde);
}

/* Selector de color: muestra solo la muestra del color */
input[type="color"] {
    width: 90px;
    height: 38px;
    padding: 3px;
    cursor: pointer;
}

/* Los botones de enviar no se estiran aunque la hoja de la pantalla
   ponga todos los input al 100% */
input.btn-enviar,
input.agregaus {
    width: auto;
}

/* Buscador de la parte de arriba de los catalogos */
#buscar > form:not(.form-register) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 8px;
    padding: 14px 18px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

#buscar > form:not(.form-register) label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--texto-suave);
}

#buscar > form:not(.form-register) input {
    flex: 1 1 260px;
    width: auto;
    margin: 0;
}

/* ---------- Clases de apoyo (antes estilos en linea) ----------
   Sustituyen los style="..." que tenian las etiquetas. Llevan !important
   para conservar la prioridad que tenia el estilo en linea. */

/* Anchos */
.h-50 { height: 50px !important; }
.w-50 { width: 50px !important; }
.w-60 { width: 60px !important; }
.w-80 { width: 80px !important; }
.mw-100 { max-width: 100px !important; }
.w-100 { width: 100px !important; }
.w-125 { width: 125px !important; }
.w-150 { width: 150px !important; }
.w-180 { width: 180px !important; }
.w-200 { width: 200px !important; }
.w-250 { width: 250px !important; }
.w-300 { width: 300px !important; }
.mh-350 { max-height: 350px !important; }
.w-500 { width: 500px !important; }
.w-1000 { width: 1000px !important; }
.w-20p { width: 20% !important; }
.w-22p { width: 22% !important; }
.w-24-5p { width: 24.5% !important; }
.w-24p { width: 24% !important; }
.w-30p { width: 30% !important; }
.w-40p { width: 40% !important; }
.w-48p { width: 48% !important; }
.w-50p { width: 50% !important; }
.w-70p { width: 70% !important; }
.mw-80p { max-width: 80% !important; }
.w-80p { width: 80% !important; }
.w-90p { width: 90% !important; }
.w-95p { width: 95% !important; }
.mw-100p { max-width: 100% !important; }
.w-100p { width: 100% !important; }
.w-120p { width: 120% !important; }
.w-200p { width: 200% !important; }

/* Margenes */
.m-0 { margin: 0 !important; }
.m-auto { margin-left: auto !important; margin-right: auto !important; }
.mb-0 { margin-bottom: 0px !important; }
.mb-5 { margin-bottom: 5px !important; }
.ml-5 { margin-left: 5px !important; }
.mt-5 { margin-top: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.ml-10 { margin-left: 10px !important; }
.mr-10 { margin-right: 10px !important; }
.mt-10 { margin-top: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.ml-15 { margin-left: 15px !important; }
.mt-15 { margin-top: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.ml-20 { margin-left: 20px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-50 { margin-top: 50px !important; }

/* Rellenos */
.pt-0 { padding-top: 0px !important; }
.p-2 { padding: 2px !important; }
.p-3 { padding: 3px !important; }
.p-5 { padding: 5px !important; }
.p-7 { padding: 7px !important; }
.pb-8 { padding-bottom: 8px !important; }
.pt-8 { padding-top: 8px !important; }
.p-10 { padding: 10px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pl-10 { padding-left: 10px !important; }
.pr-10 { padding-right: 10px !important; }
.pt-10 { padding-top: 10px !important; }
.pl-15 { padding-left: 15px !important; }
.pr-15 { padding-right: 15px !important; }
.p-20 { padding: 20px !important; }

/* Texto */
.negrita { font-weight: 600 !important; }
.ta-centro { text-align: center !important; }
.ta-fin { text-align: right !important; }
.ta-izq { text-align: left !important; }
.texto-blanco { color: var(--blanco) !important; }
.texto-rojo { color: var(--error) !important; }
.texto-transparente { color: transparent !important; }
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-15 { font-size: 15px !important; }
.fs-25 { font-size: 25px !important; }

/* Flex */
.ac-inicio { align-content: start !important; }
.d-flex { display: flex !important; }
.fd-columna { flex-direction: column !important; }
.jc-alrededor { justify-content: space-around !important; }
.jc-centro { justify-content: center !important; }
.jc-entre { justify-content: space-between !important; }
.jc-fin { justify-content: flex-end !important; }

/* Bordes y fondos */
.borde { border: 1px solid var(--borde) !important; }
.borde-grueso { border: 2px solid var(--azul-claro) !important; }
.borde-inferior { border-bottom: 1px solid var(--borde) !important; }
.borde-resaltado { border: 2px solid var(--azul-claro) !important; }
.fondo-claro { background: var(--azul-claro-suave) !important; }
.fondo-marino { background: var(--azul-marino) !important; color: var(--blanco) !important; }
.fondo-transparente { background-color: transparent !important; }
.redondeado { border-radius: var(--radio) !important; }
.sin-borde { border: none !important; }

/* Desbordes */
.ov-oculto { overflow: hidden !important; }
.ovx-auto { overflow-x: auto !important; }

/* Barras de scroll discretas */
.detalle::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.detalle::-webkit-scrollbar-thumb {
    background: var(--azul-claro);
    border-radius: 10px;
    border: 2px solid var(--blanco);
}

.detalle::-webkit-scrollbar-track {
    background: var(--fondo);
}

/* Titulo con nombre (pagos a proveedores / clientes): un solo estilo, a todo el ancho */
.juntos:has(> .titulocot2) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.titulocot2:has(> .titulocot) {
    flex: 1 1 300px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.titulocot2 > .titulocot {
    width: 100% !important;
    margin: 0 0 6px;
    text-align: left !important;
}

/* Contenedor de tabla dentro de otro (tablas que llegan por AJAX): solo se ve un recuadro y una barra */
.detalle:has(> .detalle, > .detalle2, > .detalle3, > .detallec),
.detalle2:has(> .detalle, > .detalle2, > .detalle3, > .detallec),
.detalle3:has(> .detalle, > .detalle2, > .detalle3, > .detallec),
.detallec:has(> .detalle, > .detalle2, > .detalle3, > .detallec) {
    max-height: none;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
}

/* Botones dentro de columnas: nunca mas anchos que su columna */
.caja-25 > input.agregaus,
.caja-25 > .agregaus {
    max-width: 100%;
    white-space: normal;
}