/* ================================
   THEME: Minimalista y Luminoso
   Basado en Saga
   ================================ */

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-y: hidden !important;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* ===== LOGIN ===== */
body.login-page, html.login-page {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.login-card {
    width: 100%;
    max-width: 920px;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.9);
    min-height: 460px;
    box-sizing: border-box;
}

.login-card .ui-inputfield {
    height: 60px;
    font-size: 16px !important;
    line-height: 1.4;
}

.login-card .ui-inputfield::placeholder {
    font-size: 16px !important;
}

.ui-inputgroup-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 25px;
}

/* Imagen de fondo del login */
.inicio-back {
    background-image: url("/javax.faces.resource/images/Imagen_fondo_acceso_sistema.png.box") !important;
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-login {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
}

.logo-login {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

#ingreso.ui-button {
    background-color: #136f98 !important;
    border: 1px solid #136f98 !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 30px !important;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

#ingreso.ui-button:hover {
    background-color: #0f5879 !important;
    border-color: #0f5879 !important;
}

/* ===== ENCABEZADOS Y ESTRUCTURA ===== */

.inicio-gral {
    background-image: url("/javax.faces.resource/images/fondo-blanco.png.box");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow-y: auto !important;
    width: 100%;
    min-height: 80vh;
    -webkit-overflow-scrolling: touch;
}

.header-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* importante: evita que el contenedor del header recorte los submenús */
.header-principal, .card-header, .acciones-container {
  overflow: visible !important;
}

/* ===== SECCIONES DE ACCIONES Y AVISOS ===== */

.acciones-container {
    margin-top: -10px;
    padding-top: 0;
}

.acciones-container > * {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 9px;
    color: #000000 !important;
    vertical-align: middle;
}

.acciones-container p {
    margin: 0;
    line-height: 1.2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    color: #000 !important;
}

.enviar-section {
    margin-top: 10px;
}

.aviso-container {
    background-color: #136f98 !important;
    color: white;
    padding: 7px 10px;
    border-radius: 10px;
    width: 99.6%;
    min-height: 4em;
    display: block;
    margin-top: 2px;
    margin-left: 3px;
    text-align: justify;
    font-size: 9px;
}

/* ===== BOTONES Y ELEMENTOS PRIMEFACES ===== */

.ui-button.ui-button-secondary {
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    color: #000000;
}

.ui-button.ui-button-secondary:hover {
    background-color: #E0E0E0;
    border-color: #AAAAAA;
}

/* Estados toggle */
.ui-toggleswitch-checked .ui-toggleswitch-slider {
    background-color: #5cb85c !important;
}

.label-success {
    background-color: #5cb85c;
}
.label-default {
    background-color: #999;
}

/* ======== 🎨 NUEVA TABLA RESPONSIVE (UI:REPEAT) ======== */

.table-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Header con título y botón */
.table-header-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 14px 18px;
    border-bottom: 2px solid #136f98;
    gap: 10px;
}

.table-header-custom h3,
.table-header-custom span,
.table-header-custom .ui-outputlabel {
    font-size: 27px !important;     /* tamaño visible para escritorio */
    font-weight: 700;
    margin: 0;
    flex: 1;                        /* ocupa el espacio restante */
}

/* 🔹 Botones dentro del facet */
.table-header-custom .ui-button,
.table-header-custom .ui-button .ui-button-text {
    font-size: 18px !important;     /* 🔹 fuerza tamaño del texto */
    padding: 6px 14px !important;   /* 🔹 espacio interno equilibrado */
    height: auto !important;
    line-height: normal !important;
}

/* 🔹 Ícono dentro del botón */
.table-header-custom .ui-button .ui-icon {
    font-size: 1rem !important;     /* 🔹 ícono proporcional */
    margin-right: 6px;
}

/* Scroll horizontal */
.table-scroll {
   width: 100%;
   max-height: 65vh;              /* Altura máxima visible de la tabla */
   overflow-x: auto;              /* permite desplazamiento horizontal */
   overflow-y: auto;            /* evita scroll vertical */
   -webkit-overflow-scrolling: touch;
   display: block;
   margin: 5px;                /* centra la tabla si hay márgenes */
   border-radius: 8px;
   margin-left: 5px; 
   margin-top: 5px;
   margin-right: 5px;
   background-color: #ffffff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   position: relative; /* crea un contexto para sticky */
}

/* Scroll horizontal */
.table-scroll_2 {
   width: 100%;
   max-height: 75vh;              /* Altura máxima visible de la tabla */
   overflow-x: auto;              /* permite desplazamiento horizontal */
   overflow-y: auto;            /* evita scroll vertical */
   -webkit-overflow-scrolling: touch;
   display: block;
   margin: 5px;                /* centra la tabla si hay márgenes */
   border-radius: 8px;
   margin-left: 5px; 
   margin-top: 5px;
   margin-right: 5px;
   background-color: #ffffff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   position: relative; /* crea un contexto para sticky */
}

/* Scroll horizontal */
.table-scroll_mp {
   width: 100%;
   max-height: 85vh;              /* Altura máxima visible de la tabla */
   overflow-x: auto;              /* permite desplazamiento horizontal */
   overflow-y: auto;            /* evita scroll vertical */
   -webkit-overflow-scrolling: touch;
   display: block;
   margin: 5px;                /* centra la tabla si hay márgenes */
   border-radius: 8px;
   margin-left: 5px; 
   margin-top: 5px;
   margin-right: 5px;
   background-color: #ffffff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   position: relative; /* crea un contexto para sticky */
}



/* Para manejar scroll horizontal si hay muchas columnas */
.table-scroll-inner {
    width: 100%;
    overflow-x: auto;
}

/* Tabla base */
.tabla-custom {
    border-collapse: collapse;
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #ffffff;
    font-size: 13px;
  
}

.tabla-custom th {
    background-color: #136f98;
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: 10px 12px;
    white-space: nowrap;
    border-bottom: 2px solid #0f5879;
    position: sticky;              /* Fija encabezado si haces scroll vertical */
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); /* sutil sombra al borde inferior */
    background: linear-gradient(to bottom, #136f98 90%, #0f5879);
}

.tabla-custom td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}

/* Rayado alterno */
.tabla-custom tr:nth-child(even) td {
    background-color: #f9f9f9;
}

/* Hover */
.tabla-custom tr:hover td {
    background-color: #eaf3f8;
}

/* 🔹 Bordes redondeados y visual limpio */
.tabla-custom {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ddd;
}


/* Columna de acciones */
.acciones-col {
    min-width: 160px;
    white-space: nowrap;
}

/* Scrollbar personalizado */
.table-scroll::-webkit-scrollbar {
    height: 6px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px;
}

/* === Diálogo general === */
.invoice-dialog .ui-dialog-content {
    background-color: #f7f9fb !important;
    padding: 2rem !important;
    text-align: center;
    border-radius: 12px;
}

.upload-section {
    margin-top: 1.5rem;
    text-align: center;
}

.express-message {
    background: rgba(255, 243, 205, 0.7);
    border: 1px solid #ffe58f;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    color: #444;
    text-align: center;
}

/* === Tarjeta de subida === */
.upload-card {
    background-color: white !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 16px !important;
    padding: 2rem !important;
    border: none !important;
}

/* === Contenido interno === */
.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.upload-content h3 {
    color: #136f98;
    font-weight: 600;
    margin: 0.5rem 0 0;
}

.upload-content p {
    color: #555;
    margin: 0;
}

/* === Icono principal === */
.upload-icon {
    font-size: 3rem;
    color: #136f98;
    margin-bottom: 0.5rem;
}

/* === Botón elegante === */
.elegant-upload .ui-fileupload-buttonbar {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 1.5rem !important;
    text-align: center;
}

.elegant-upload .ui-fileupload-choose {
    background-color: #136f98 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
    transition: background-color 0.3s ease;
}

.elegant-upload .ui-fileupload-choose:hover {
    background-color: #0f5a7c !important;
}


/* Estilo personalizado para el botón 'Subir Factura' */
.ui-fileupload-choose.custom-upload-button {
    background-color: #136f98 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500;
    padding: 0.75rem 1.5rem !important;
}

.ui-fileupload-choose.custom-upload-button:hover {
    background-color: #0f5a7c !important;
}

/* === Ícono principal más grande y elegante === */
.upload-icon {
    font-size: 7rem !important;        /* Aumentamos tamaño para escritorio */
    color: #136f98;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);  /* Sombra sutil para resalte */
    transition: transform 0.3s ease, color 0.3s ease;
}

.upload-icon {
    background: rgba(19, 111, 152, 0.08);
    border-radius: 50%;
    padding: 1rem;
}

.upload-icon:hover {
    transform: scale(1.08);  /* Ligerísimo zoom al pasar el mouse */
    color: #0f5a7c;          /* Oscurece un poco en hover */
}

/* === Forzar mostrar texto "Subir Factura" en todas las versiones === */
.elegant-upload .ui-fileupload-choose .ui-button-text {
    display: inline !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-left: 0.5rem;
}


/* === Reemplazamos totalmente el texto "Choose" sin que ocupe espacio === */
.elegant-upload .ui-fileupload-choose .ui-button-text {
    display: none !important; /* elimina el texto original del flujo */
}

/* === Insertamos nuestro texto personalizado === */
.elegant-upload .ui-fileupload-choose::after {
    content: "Subir Archivo";
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-left: 0.4rem;
}

/* === Ajuste del ícono === */
.elegant-upload .ui-fileupload-choose .ui-icon {
    margin-right: 0.4rem;
    font-size: 1.3rem;
}

/* === Oculta la lista de archivos cargados en modo advanced === */
.elegant-upload .ui-fileupload-files,
.elegant-upload .ui-fileupload-content {
    display: none !important;
}

/* === También elimina cualquier espacio extra debajo del botón === */
.elegant-upload .ui-fileupload {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* === Diálogo elegante para autorización de terceros === */
.dialog-pobox .ui-dialog-content {
    background: #f9fbfd !important;
    border-radius: 0 0 1rem 1rem !important;
    padding: 1.5rem 2rem !important;
    overflow-y: auto !important;
    max-height: 80vh !important;  /* Altura máxima visible */
    padding-right: 1rem;          /* Evita que el scroll tape contenido */
}

/* === Encabezado elegante azul corporativo === */
.dialog-pobox .ui-dialog-titlebar {
    background-color: #136f98 !important;
    color: #fff !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    padding: 1rem 0.5rem !important;
}

/* === Sombra y bordes del cuadro === */
.dialog-pobox .ui-dialog {
    border-radius: 1rem !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
    max-width: 500px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* === Botón "X" blanco visible en encabezado azul === */
.ui-dialog-titlebar-close {
    color: #ffffff !important;
    opacity: 0.95 !important;
    background: transparent !important;
    border: none !important;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

.ui-dialog-titlebar-close:hover {
    transform: scale(1.2);
    opacity: 1 !important;
    color: #ffffff !important;
}

/* === Footer unificado para todos los diálogos === */
.dialog-footer {
    text-align: center;
    padding: 1rem 0 !important;
    background: #f9fbfd !important;
    border-top: 1px solid #d1d9e0 !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.dialog-footer .ui-button {
    min-width: 130px;
    margin: 0.3rem;
}

/* ===== Scroll interno del cuerpo del diálogo ===== */
.responsive-dialog .ui-dialog {
  display: flex !important;
  flex-direction: column;
  max-height: 90vh !important;
  width: 90vw !important;
  border-radius: 12px;
  overflow: hidden !important;
}


/* No hagas scroll aquí; lo hará .dialog-content-scroll */
.responsive-dialog .ui-dialog-content {
  flex: 1 1 auto; /* ocupa el espacio restante */
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 1rem 1.2rem !important;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

/* Contenedor que SÍ hace scroll */
.dialog-content-scroll {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Footer visual (no se mueve) */
.dialog-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid #dce2e8;
  background: #f9fbfd;
  position: sticky;
  bottom: 0;
  z-index: 10;
}


/* Aumentamos tamaño en desktop */
@media (min-width: 1024px) {
    .elegant-upload .ui-fileupload-choose .ui-button-text {
        font-size: 1.1rem !important;
    }
    
    .elegant-upload .ui-fileupload-choose::after {
        font-size: 1.1rem;
    }
}

/* ======== RESPONSIVE (MÓVIL) ======== */
@media screen and (max-width: 768px) {

    html, body {
        overflow: hidden !important; /* evita desplazamiento global */
    	height: 100%;
    }

    .login-card {
        width: 99%;
        margin: 1rem auto;
        min-height: auto;
        padding-top: 0.2rem;
    }

    .header-login {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 30px;
        padding: 25px;
    }

    .header-text {
        font-size: 18px;
        white-space: nowrap;
    }

    .logo-login {
        max-width: 180px;
        max-height: 70px;
    }

    #ingreso.ui-button {
        font-size: 20px !important;
        padding: 12px 20px;
    }

    #recupera {
        font-size: 14px !important;
    }

    .inicio-gral {
        overflow-y: hidden !important;
        padding-right: 1px;
        padding-left: 1px;
        padding-bottom: 60px;        /* ≈ alto del footer */
        margin-top: 5px;
        margin-right: auto;
        margin-left: auto;
    }

    .acciones-container {
        margin-top: -28px !important;  /* 🔹 bien pegado en pantallas chicas */
        margin-bottom: 3px !important;
    }
    
	.acciones-container > * {
		position: relative;
	    min-height: 1px;
	    padding-right: 5px;
	    padding-left: 8px;
	    color: #000000 !important;       
	    vertical-align: top;
	}
	
	.acciones-container p .enviar-section p {
	    display: flex;
	    flex-wrap: wrap;  /* permite que los elementos bajen de renglón */
	    align-items: center;
	    gap: 3px;         /* espacio entre iconos y texto */
	    color: #000 !important;
	    margin-top: -4px;    
	}
	
	.acciones-container .ui-outputlabel,
	.aviso-container ui-outputlabel {
		font-size: 10px !important;
	    text-decoration: none;
	}
	
	.aviso-container > *{
		font-size: 13px !important;
	}
	
	
	.aviso-container .ui-outputlabel .enviar-section {
	    font-size: 10px !important;
	}
	
	.aviso-container {
	    background-color: #136f98 !important;
	    margin-left:6px;
	    color: white;
	    padding: 5px 7px;
	    border-radius: 10px;
	    width:96%;
	    min-height: 7em;          /* ≈ alto de 4 renglones */
	    display: block;              /* para alinear el contenido */
	    align-items: center;        /* centra verticalmente */
	    margin-top: 7px;
	    text-align: justify;   
	}
	
	.acciones-container p:first-of-type {
    	margin-bottom: 10px; /* más aire en pantallas pequeñas */
	}

    

    .tabla-custom {
        min-width: 800px !important;
        font-size: 12px;
        
    }
    
    .tabla-custom th,
    .tabla-custom td {
        padding: 6px 8px;
    }

    .table-scroll {
       max-height: 50vh;          /* Un poco más compacto */
       overflow-x: auto;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
    }
    
    .table-scroll_2 {
       max-height: 70vh;          /* Un poco más compacto */
       overflow-x: auto;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
    }
    
    .table-header-custom {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    background-color: #ffffff;
	    padding: 12px 12px;
	    border-bottom: 2px solid #136f98;
	    gap: 10px;
	}
    
    .table-header-custom h3,
	.table-header-custom span,
	.table-header-custom .ui-outputlabel {
	    font-size: 22px !important;     /* tamaño visible para escritorio */
	    font-weight: 700;
	    margin: 0;
	    flex: 1;                        /* ocupa el espacio restante */
	}
	
	/* 🔹 Botones dentro del facet */
	.table-header-custom .ui-button,
	.table-header-custom .ui-button .ui-button-text {
	    font-size: 13px !important;     /* 🔹 fuerza tamaño del texto */
	    padding: 5px 14px !important;   /* 🔹 espacio interno equilibrado */
	    height: auto !important;
	    line-height: normal !important;
	}
	
	/* 🔹 Ícono dentro del botón */
	.table-header-custom .ui-button .ui-icon {
	    font-size: 1 rem !important;     /* 🔹 ícono proporcional */
	    margin-right: 5px;
	}
	
	.dialog-pobox {
        width: 90% !important;
        left: 5% !important;
    }

    .upload-content h3 {
        font-size: 1.1rem;
    }
    
    .upload-icon {
        font-size: 3rem;  /* Tamaño más compacto en pantallas pequeñas */
        text-shadow: none;
    }
    
    .elegant-upload .ui-fileupload-choose .ui-button-text {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }
    
    .elegant-upload .ui-fileupload-choose::after {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .dialog-pobox .ui-dialog {
        width: 90% !important;
        max-width: none !important;
        margin: 0 auto !important;
        left: 50% !important;
	    top: 50% !important;
	    transform: translate(-50%, -50%) !important;
    }
    .dialog-pobox h3 {
        font-size: 1.1rem;
    }
    .dialog-pobox .pi-user {
        font-size: 2.4rem !important;
    }
    .dialog-pobox .ui-dialog-content {
        padding: 1rem !important;
    }
    .dialog-pobox .ui-dialog-titlebar {
        font-size: 1rem !important;
        padding: 0.8rem !important;
    }
    
    .dialog-footer {
        padding: 0.8rem 0.5rem !important;
    }
    .dialog-footer .ui-button {
        width: 90%;
        margin-bottom: 0.4rem;
    }
    
    .dialog-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dialog-buttons .ui-button {
        width: 90%;
        margin-bottom: 0.4rem;
    }
    
	.responsive-dialog .ui-dialog {
	    width: 90vw !important;
	    left: 5vw !important;
	    top: 6vh !important;
	    max-height: 80vh !important;
	}
	
	.dialog-content-scroll {
		max-height: 65vh;                /* calcula ~75vh (dialog) - ~header/footer */
	    padding-right: 4px;
	}

    .responsive-dialog .ui-dialog-content {
        max-height: 75vh !important;  /* 🔹 activa scroll cuando sobrepasa esta altura */
        overflow-y: auto !important;
        padding: 0.8rem 1rem !important;
        -webkit-overflow-scrolling: touch; /* scroll suave en iPhone */
    }

    .responsive-dialog .ui-dialog-titlebar {
        padding: 0.8rem 1rem !important;
        font-size: 1rem !important;
    }

    .responsive-dialog .ui-inputtext {
        font-size: 14px !important;
        height: 34px !important;
    }

    .dialog-footer {
        text-align: center;
        padding: 0.8rem 0.5rem !important;
    }
    
    .ui-dialog.ui-widget-content.ui-shadow {
      width: 95% !important;
      height: auto !important;
      max-height: 95vh !important;
	}
	.ui-dialog-content {
      overflow-y: auto !important;
	}
	
	.dialog-grid {
        grid-template-columns: 1fr;
    }

    .dialog {
        width: 95%;
        padding: 1rem 1.2rem;
    }

    .dialog h3 {
        font-size: 1.1rem;
        text-align: center;
    }

    .rounded-button {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .styled-table th,
    .styled-table td {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    
    /* Asegura que el contenedor permita scroll si el formulario es largo */
    .aviso-container2 {
        overflow-y: auto;
        padding: 1rem;
        max-height: calc(100vh - 150px); /* deja espacio para header/pie */
    }
    
    #reg_consulta .ui-outputlabel:first-of-type {
        margin-top: 1rem;
    }
    
    /* El panel grid ocupa todo el ancho */
    #reg_consulta.ui-panelgrid {
        width: 100% !important;
        display: block !important;
    }

    /* Cada columna ocupa el 100% del ancho */
    #reg_consulta .ui-grid-col-2,
    #reg_consulta .ui-grid-col-3,
    #reg_consulta .ui-grid-col-4,
    #reg_consulta .ui-grid-col-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: block !important;
        text-align: left !important;
        margin-bottom: 0.6rem;
    }

    /* Las etiquetas */
    #reg_consulta .ui-outputlabel {
        display: block;
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }

    /* Los inputs */
    #reg_consulta .ui-inputfield,
    #reg_consulta .ui-inputtext {
        width: 100% !important;
        box-sizing: border-box;
        border-radius: 6px;
    }

    /* Los botones */
    #reg_consulta .ui-button,
    #reg_consulta .p-button {
        width: 100% !important;
        margin-top: 0.8rem;
        border-radius: 10px;
    }

    /* Ajuste de texto general */
    #reg_consulta {
        font-size: 0.95rem;
    }
	
	.cotitulares-page .table-header-custom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
        border-bottom: 1px solid #136f98;
        padding-bottom: 0.8rem;
    }

    .cotitulares-page .table-header-custom h3 {
        font-size: 1.1rem;
        margin-bottom: 0.3rem;
    }

    .cotitulares-page .table-header-custom p {
        font-size: 0.9rem;
        line-height: 1.3;
        margin: 0.2rem 0;
    }
}

.elegant-upload .ui-button {
    background-color: #136f98 !important;
    border-radius: 8px !important;
    color: white !important;
    border: none !important;
    transition: 0.3s ease;
}

.elegant-upload .ui-button:hover {
    background-color: #0f5d7f !important;
}


/* === Ajuste general del botón === */
.elegant-upload .ui-fileupload-choose {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;           /* se adapta al contenido */
    min-width: 180px !important;      /* tamaño mínimo elegante */
    max-width: 240px !important;      /* límite para pantallas grandes */
    padding: 0.7rem 1.5rem !important;
    background-color: #136f98 !important;
    border-radius: 30px !important;
    border: none !important;
    transition: background-color 0.3s ease-in-out;
}

.elegant-upload .ui-fileupload-choose:hover {
    background-color: #0f5a7c !important;
}

.dialog-pobox .ui-dialog-content {
    overflow: visible !important;
}

/* === Botones dentro del card === */
.dialog-buttons {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #dce2e8;
}

.dialog-buttons .ui-button {
    min-width: 130px;
    margin: 0.3rem;
    border-radius: 6px !important;
}


/* ==========================================================
   ESTILOS UNIFICADOS — TABLAS Y DIÁLOGOS (COMPRAS, TARIFAS, PAQUETES)
   ========================================================== */

/* 🔸 Encabezado con título y botón (ya compatible con el existente) */
.table-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 1rem 1.2rem;
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid #136f98;
    gap: 10px;
}

.table-header-custom h3 {
    color: #136f98;
    font-size: 1.3rem;
    margin: 0;
    font-weight: 700;
}

/* ==========================================================
   TABLA ESTÁNDAR (HTML — reemplazo de p:dataTable)
   ========================================================== */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    font-size: 13px;
}

.styled-table th {
    background-color: #136f98;
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 2px solid #0f5879;
    white-space: nowrap;
}

.styled-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}

/* Rayado alterno */
.styled-table tr:nth-child(even) td {
    background-color: #f9f9f9;
}

/* Hover */
.styled-table tr:hover td {
    background-color: #eaf3f8;
}

.styled-table .center {
    text-align: center;
}

.actions {
    text-align: center;
}

/* ==========================================================
   BOTONES REDONDEADOS (UNIFICADOS)
   ========================================================== */
.rounded-button {
    border-radius: 20px !important;
    color: #ffffff !important;
    background-color: #136f98 !important;
    border: none !important;
    padding: 6px 14px !important;
    font-size: 0.9rem !important;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}



/* ==========================================================
   DIÁLOGOS HTML MODERNOS (sin <p:dialog>)
   ========================================================== */
.dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.dialog {
    background: #ffffff;
    border-radius: 12px;
    width: 85%;
    max-width: 900px;
    padding: 1.5rem 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: fadeIn 0.3s ease;
}

.dialog h3 {
    color: #136f98;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: left;
}

.dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    margin-top: 1rem;
}

.dialog-grid label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.3rem;
}

.dialog-footer {
    text-align: right;
    margin-top: 1.5rem;
}

.dialog-footer button {
    margin-left: 0.5rem;
}

/* Animación de aparición */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* Estilo de botón eliminar */
.ui-button-danger {
    color: #c0392b !important;
}

.ui-button-danger:hover {
    background-color: #e74c3c !important;
    font-weight: bold;
    color: white !important;
}


.ui-button-regular {
    color: #136f98 !important;
}

.ui-button-regular:hover {
    background-color: #136f98 !important;
    font-weight: bold;
    color: white !important;
}


.ui-button-flat {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease-in-out !important;
}

/* ============================
   BOTONES DE ACCIÓN UNIFICADOS
   ============================ */

/* Estilo base para botones redondeados tipo icono plano */
.rounded-icon-button {
    border: none;
    background: transparent;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

/* Íconos */
.rounded-icon-button .ui-button-icon-left {
    font-size: 1.2rem;
}

/* Hover con ligero fondo */
.rounded-icon-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Azul para Editar */
.rounded-icon-button.edit {
    color: #136f98 !important;
}

/* Rojo para Eliminar */
.rounded-icon-button.delete {
    color: #d32f2f !important;
}

/* Verde (por si más adelante usas “Aceptar” o “Nuevo”) */
.rounded-icon-button.success {
    color: #2e7d32 !important;
}

/* Hover leve con mismo tono */
.rounded-icon-button.edit:hover {
    background-color: rgba(19, 111, 152, 0.08);
}
.rounded-icon-button.delete:hover {
    background-color: rgba(211, 47, 47, 0.08);
}
.rounded-icon-button.success:hover {
    background-color: rgba(46, 125, 50, 0.08);
}

/* === Ajustes específicos para el dialogo de edición === */
.edit-grid .ui-selectonemenu {
    width: 100%;
    max-width: 100%;
}

/* ===== Solo afecta el dialogo Edita Compra ===== */
@media (min-width: 992px) {
    .dialog-editar-compra.ui-dialog {
        width: 80vw !important;      /* ancho mayor, 80% del viewport */
        max-width: 1100px !important; /* límite máximo */
    }

    /* Ajusta la rejilla interna para que no quede apretada */
    .dialog-editar-compra .ui-panelgrid .ui-grid-col-2 {
        flex: 0 0 20%; /* columnas de etiquetas */
        max-width: 20%;
    }

    .dialog-editar-compra .ui-panelgrid .ui-grid-col-4 {
        flex: 0 0 30%; /* columnas de campos */
        max-width: 30%;
    }

    /* Alinea etiquetas y da respiro a los campos */
    .dialog-editar-compra .ui-outputlabel {
        text-align: right;
        padding-right: 0.8rem;
        font-weight: 600;
    }

    .dialog-editar-compra .ui-inputfield,
    .dialog-editar-compra .ui-selectonemenu {
        width: 100%;
    }
}

/* En pantallas móviles se mantiene el comportamiento normal */
@media (max-width: 991px) {
    .dialog-editar-compra.ui-dialog {
        width: 95vw !important;
    }
}

/* ======================================================
   Co-Titulares Page — Estilos exclusivos y responsivos
   ====================================================== */

/* === Encabezado principal === */
.cotitulares-page .table-header-custom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #136f98;
}

.cotitulares-page .table-header-custom h3 {
    color: #136f98;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
}

.cotitulares-page .table-header-custom p {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
    margin: 0.2rem 0;
}

.dialog-pobox.dialog-wide {
    width: 65vw !important;   /* Más ancho, ajusta si lo quieres aún mayor */
    max-width: 1200px !important;
}

/* ====== Personalización calendario PrimeFaces ====== */
.ui-datepicker,
.p-datepicker {
    font-size: 0.95rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.p-datepicker .p-datepicker-header {
    background-color: #136f98;
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.p-datepicker table td > span {
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}

.p-datepicker table td > span:hover {
    background-color: #136f98 !important;
    color: white !important;
}

.p-datepicker-today > span {
    background-color: #dfeffc !important;
    color: #136f98 !important;
    font-weight: bold;
}

.date-field {
    width: 100%;
    max-width: 240px;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}