.app-sidebar__user-avatar {
    width: 65px;
    background: gray;
    padding: 6px;
}
.app-sidebar__toggle{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15pt;
}
.app-sidebar__toggle::before{
	display: none;
}

.headerRegister, .header-primary{
	background: #009688;
	color: #FFF;
}
.headerUpdate{
	background: #007bff;
	color: #FFF;
}


.textcenter{
	text-align: center;
}
.textright{
	text-align: right;
}
.textleft{
	text-align: left;
}
.bootstrap-select > .dropdown-toggle{
	border: 1px solid #CCC;
}
/*Estilos login*/
#divLoading{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(254,254,255, .65);
	z-index: 9999;
	display: none;
}
#divLoading img{
	width: 50px;
	height: 50px;
}
.required{
	color: red;
	font-size: 13pt;
	font-weight: bold;
}
/* style portada categoría */
.prevPhoto {
    display: flex;
    justify-content: space-between;
    width: 300px;
    height: 200px;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;
    background: url(../images/uploads/portada_categoria.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: auto;
}
.prevPortada{
	width: 100%;
	min-width: 200px;
	background: none;
}
.prevPhoto label{
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.prevPhoto img{
	width: 100%;
	height: 100%;
}
.upimg, .notblock{
	display: none !important;
}
.errorArchivo{
	font-size: 16px;
	font-family: arial;
	color: #cc0000;
	text-align: center;
	font-weight: bold; 
	margin-top: 10px;
}
.delPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 10;
}
#tbl_list_productos img{
	width: 50px;
}
.imgProductoDelete{
	width: 175px;
}

#imgCategoria{
	text-align: center;
}
#imgCategoria img{
	width: 200px;
	margin: auto;
}

/* Upload fotos*/
#containerImages{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
#containerImages > div{
	margin-right: 10px;
	margin-bottom: 8px;
}
.prevImage{
	border: 1px solid #CCC;
	width: 120px;
	height: 148px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.prevImage img{
	width: 100%;
}
.inputUploadfile{
	display: none;
}
.btnUploadfile, .btnDeleteImage{
	border: 0;
	background-color: #009688;
	text-align: center;
	padding: 2px 3px;
	color: #FFF;
	font-size: 9pt;
	cursor: pointer;
	width: 100%;
}
.btnDeleteImage{
	background-color: #dc3545;
}
.prevImage .loading{
	width: 30px;
	height: 30px;
}
#celFotos img{
	width: 150px;
	margin: 10px;
}

/* TIENDA VIRTUAL */
.divmetodpago label, #divCondiciones{
	width: 100%;
	display: flex;
}
.divmetodpago label input, #divCondiciones input{
	margin-right: 15px;
}
#divCondiciones a{
	margin-left: 5px;
}

#divCondiciones  label{
	margin-bottom: 0;
}
.linkw:hover{
	text-decoration: none;
}
.container-title{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.container-title input{
	border: 1px solid #CCC;
	padding: 4px;
	border-radius: 5px;
	margin-right: 5px;
}
.dflex{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.ui-datepicker-calendar {
    display: none;
}

.page-content ul li { 
   list-style-type: disc;
   margin-left: 15px; 
   margin-bottom: 10px; 
}
.page-content ol li { 
   list-style-type: decimal;
   margin-left: 15px; 
   margin-bottom: 10px; 
}
.page-content ul li ul li, .page-content ol li ul li { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.page-content ol li ol li, .page-content ul li ol li { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

.page-error {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: calc(100vh - 110px);
    margin-bottom: 0;
}

.page-error h1 {
    margin: 10px;
    color: #dc3545;
    font-size: 42px;
}






/* =====================================================
   ESTILO BASE (COMPARTIDO)
===================================================== */
.css_yape,
.css_plin,
.css_efectivo,
.css_otros {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 1.1;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
}

/* =====================================================
   YAPE
===================================================== */
.css_yape {
    background-color: #7b2cbf; /* morado */
    box-shadow: 0 1px 3px rgba(123, 44, 191, 0.35);
    text-transform: lowercase;
}

/* =====================================================
   PLIN (estilo burbuja original)
===================================================== */
.css_plin {
    background: radial-gradient(circle at 30% 30%, #00f5d4, #00bbf9, #4361ee);
    border-radius: 45% 55% 50% 50% / 55% 60% 45% 50%;
    padding: 6px 10px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    text-transform: lowercase;
}

/* Burbuja inferior */
.css_plin::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 42%;
    width: 8px;
    height: 8px;
    background: inherit;
    border-radius: 50%;
    transform: rotate(25deg);
}

/* =====================================================
   EFECTIVO 💰
===================================================== */
.css_efectivo {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    box-shadow: 0 1px 3px rgba(46, 125, 50, 0.35);
}

/* =====================================================
   OTROS
===================================================== */
.css_otros {
    background: linear-gradient(135deg, #6c757d, #495057);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    text-transform: none;
}

/* =====================================================
   EFECTOS SUAVES (OPCIONAL)
===================================================== */
.css_yape:hover,
.css_plin:hover,
.css_efectivo:hover,
.css_otros:hover {
    transform: scale(1.05);
    transition: transform 0.15s ease-in-out;
}







/* ---- ICONO S/ ---- */
.icono_s {
    display: inline-block;
    background-color: #b9fbc0; /* verde claro */
    color: #7b2cbf; /* morado */
    border-radius: 50%;
    font-size: 0.55rem;  /* 🔹 más pequeño */
    font-weight: bold;
    padding: 1px 4px;
    margin-bottom: 2px;
    line-height: 1;
}



.total-general {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.total-general .linea1 {
  font-weight: 700;
  font-size: 1rem; /* más grande que antes */
  color: #000;     /* negro */
  letter-spacing: 0.5px;
}

.total-general .linea2 {
  font-weight: 600;
  font-size: 0.9rem; /* también un poco más grande */
  color: #000;       /* negro */
  text-transform: uppercase;
  letter-spacing: 0.6px;
}



.table-transaccion .table-bordered td:first-child {
  font-weight: 600;
  background-color: #f9f9f9;
  width: 35%;
}

.table-transaccion #celmonto {
  font-size: 1.1em;
  color: blue;
  font-weight: bold;
}

.table-transaccion #celbanco span {
  display: inline-block;
  text-align: center;
}


#empresaList {
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 0.25rem;
}

/* Solo para pantallas menores a 768px (móviles) CASO DE BUTTONS DEL DATATABLE EXCEL, ETC PARA Q ESTEN MAS SEPARADOS. */
/* Solo en pantallas menores a 768px (móviles) */
@media (max-width: 767px) {
    /* Separar los botones de la tabla */
    .dt-buttons {
        margin-bottom: 35px; /* espacio entre botones y tabla */
    }

    /* Opcional: separar input de búsqueda de los botones */
    div.dataTables_filter {
        margin-bottom: 30px;
    }
}

/* Estilo general para las imágenes del login */
.login-img-custom {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    cursor: default;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover */
.login-img-custom:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}


/* Fila resaltada en amarillo */
.tr-resaltada {
    background-color: #fff9c4; /* amarillo suave */
    font-weight: bold;
    color: #0047b3;
}

/* Celdas que parpadean */
.td-blink {
    /* no hace falta nada aquí, solo la usamos para identificarlas en JS */
}



.toast {
    min-width: 250px;
    margin-bottom: 10px;
    padding: 15px 20px;
    background: #333;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease;
    font-family: sans-serif;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}



/* Aplica scroll horizontal a la lista desplegable de selectpicker */
.bootstrap-select .dropdown-menu.inner {
    overflow-x: auto !important;   /* scroll horizontal */
    overflow-y: auto !important;   /* scroll vertical si hay muchas opciones */
    white-space: nowrap;            /* no dividir el texto */
    max-width: 100%;                /* que no se salga del modal */
}

/* Opcional: ancho máximo de cada opción */
.bootstrap-select .dropdown-menu.inner li a {
    display: block;
    max-width: 100%;
}


@media (max-width: 576px) {

    /* Ajuste general (ya lo tenías): */
    .tox .tox-toolbar button {
        padding: 3px 4px !important;
        min-width: 28px !important;
        height: 28px !important;
    }

    /* 👇 Ajuste específico para 3 botones problemáticos */

    /* Deshacer */
    .tox .tox-tbtn[aria-label="Undo"] svg,
    .tox .tox-tbtn[title="Undo"] svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Rehacer */
    .tox .tox-tbtn[aria-label="Redo"] svg,
    .tox .tox-tbtn[title="Redo"] svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Negrita */
    .tox .tox-tbtn[aria-label="Bold"] svg,
    .tox .tox-tbtn[title="Bold"] svg {
        width: 18px !important;
        height: 20px !important;
    }

    /* Cursiva */
    .tox .tox-tbtn[aria-label="Italic"] svg,
    .tox .tox-tbtn[title="Italic"] svg {
        width: 18px !important;
        height: 20px !important;
    }
}


.css_fecha_msj {
    color: blue;
    font-weight: bold;
}

.css_fecha_leido {
    color: green;
    font-weight: bold;
}

.css_fecha_respondido {
    color: purple;
    font-weight: bold;
}

.css_asunto_msj {
    background-color: #d9f1ff;   /* celeste claro */
    color: #005f8c;              /* azul suave para texto */
    font-size: 11px;             /* letra pequeña */
    font-weight: bold;           /* negrita */
    padding: 3px 6px;
    border: 1px solid #a6d4ef;   /* borde celeste */
    border-radius: 4px;          /* opcional (puedes dejar 0 si lo quieres rectangular) */
    display: inline-block;
}


.css_color_1  { background-color:#c7e8fb; border:1px solid #fff; } /* celeste */
.css_color_2  { background-color:#d7f0d2; border:1px solid #fff; } /* verde */
.css_color_3  { background-color:#ffe9b8; border:1px solid #fff; } /* amarillo */
.css_color_4  { background-color:#f8caca; border:1px solid #fff; } /* rojo suave */
.css_color_5  { background-color:#ddd2ff; border:1px solid #fff; } /* lila */

.css_color_6  { background-color:#d2e4e0; border:1px solid #fff; } /* azul petróleo */
.css_color_7  { background-color:#f4d6c8; border:1px solid #fff; } /* durazno */

.css_color_8  { background-color:#f8dcc5; border:1px solid #fff; } /* naranja */
.css_color_9  { background-color:#d2e6dc; border:1px solid #fff; } /* verde gris */
.css_color_10 { background-color:#dde5ff; border:1px solid #fff; } /* azul lavanda */

.css_color_11 { background-color:#f2ccd8; border:1px solid #fff; } /* rosa */
.css_color_12 { background-color:#dff0df; border:1px solid #fff; } /* menta */
.css_color_13 { background-color:#eee7d4; border:1px solid #fff; } /* beige */
.css_color_14 { background-color:#d7e3f1; border:1px solid #fff; } /* azul gris */
.css_color_15 { background-color:#e6ddff; border:1px solid #fff; } /* violeta */


.css_color_nulo {
    background-color: #f8d7da;  /* rojo suave */
    color: #c82333;             /* rojo texto */
    border: 1px solid #c82333;  /* borde rojo */
    font-weight: normal;        /* sin negrita */
}



.css_nombre_agrupado {
    font-size: 12px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}

/* Ocultar solo el selector "Mostrar XX registros */
#tableEmpresas_length {
    display: none !important;
}





/* Centra todo el contenido dentro de la celda */
.item-audio-container {
    width: 100%;
    display: flex;
    justify-content: center;  /* <-- CENTRAR */
    align-items: center;
}

/* Mantiene alineado el item + botón */
.item-audio-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botón dinámico */
.btn-audio-pago {
    width: 25px;
    height: 25px;
    background-image: url("../images/uploads/icons/ojo.png");
    background-size: contain;  /* importante */
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.btn-audio-pago:hover {
    transform: scale(1.15);
    opacity: 0.85;
}

.btn-audio-pago:active {
    transform: scale(0.92);
    opacity: 0.7;
}


/* Centrar en PC */
table.dataTable td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Centrar en móvil (modo responsivo) */
table.dataTable .dtr-data {
    text-align: center !important;
}



.fecha-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2em;
}

/* Fecha arriba */
.fecha-dia {
    font-weight: 600;
}

/* Hora abajo */
.fecha-hora {
    font-size: 0.9em;
    opacity: 0.8;
}

/* ---------------- Mensaje ---------------- */
.fecha-mensaje .fecha-dia {
    font-weight: 600;
    font-size: 0.95em;  /* un poco más pequeño */
    color: #007bff;      /* azul */
}

.fecha-mensaje .fecha-hora {
    font-size: 0.8em;    /* un poco más pequeño */
    opacity: 0.8;
    color: #007bff;      /* azul */
}

/* ---------------- Leído ---------------- */
.fecha-leido .fecha-dia {
    font-weight: 600;
    font-size: 0.95em;
     color: #800080;      /* morado */
}

.fecha-leido .fecha-hora {
    font-size: 0.8em;
    opacity: 0.8;
    color: #800080;      /* morado */
}


/* ---------------- Respondido ---------------- */
.fecha-respondido .fecha-dia {
    font-weight: 600;
    font-size: 0.95em;
    color: #008000;      /* verde intenso */
}

.fecha-respondido .fecha-hora {
    font-size: 0.8em;
    opacity: 0.8;
    color: #008000;      /* verde intenso */
}


/* Centrar la columna fecha en general */
th.fecha-col,
td.fecha-col {
    text-align: center !important;
}

/* Aumentar ancho de la columna fecha en móviles */
@media (max-width: 600px) {
    td.fecha-col,
    th.fecha-col {
        min-width: 65px !important;
        width: 65px !important;
    }

    .fecha-wrapper {
        align-items: center;
        text-align: center;
    }
}


.icon-editor {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
}

.icon-editor .icon-book {
    font-size: 22px;
    color: #0d6efd;
    position: absolute;
    top: 0;
    left: 0;
}

.icon-editor .icon-pencil {
    font-size: 11px;
    color: white;
    background: #0d6efd;
    padding: 2px;
    border-radius: 50%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.btn-audio-pago .icon-ojo {
    width: 26px;
    height: 26px;
    color: #6f42c1; /* morado profesional */
    transition: 0.2s ease-in-out;
}

.btn-audio-pago:hover .icon-ojo {
    color: #5a34a3; /* morado más oscuro en hover */
    transform: scale(1.1);
}




.tox-tinymce-aux {
    z-index: 999999 !important;
}

.tox-dialog {
    z-index: 999999 !important;
}



 /* ▓▓▓ GENERALES ▓▓▓ */
.form-group {
    margin-bottom: 10px;
}

.btn-sm {
    padding: 3px 8px;
    font-size: 0.75rem;
}



/* ============================================================
   📱 MÓVIL – FECHAS 50/50, SELECT 100%, BOTONES CENTRADOS
   ============================================================ */
@media (max-width: 768px) {

    /* GRUPO 1: Fechas en una sola línea y ocupan 50% cada una */
    #grupo1 {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
    }

    #grupo1 .form-group {
        flex: 1;               /* 🔥 Divide en partes iguales */
        min-width: 0;          /* Evita saltos */
    }

    /* Botones del grupo 1 abajo */
    #botones-grupo1 {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        gap: 10px;             /* Espaciado normal */
    }

    /* GRUPO 2: Select ocupa toda la fila */
    #grupo2 {
        width: 100%;
        display: flex;
        flex-direction: column;  /* Select arriba, botones abajo */
        gap: 10px;
    }

    #grupo2 .select-wrapper {
        width: 100%;            /* 🔥 Ocupa todo el ancho */
    }

    /* Botones del grupo 2 centrados */
    #botones-grupo2 {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
    }
}

/* Ajuste final: Botones más cerca del campo en móvil */
@media (max-width: 768px) {

    /* Botones del grupo 1 más arriba y con menos espacio */
    #botones-grupo1 {
        margin-top: -12px !important;   /* antes 10px */
        gap: 6px !important;          /* espaciado más natural */
    }

    /* Botones del grupo 2 más arriba y con menos espacio */
    #botones-grupo2 {
        margin-top: -12px !important;   /* antes 10px */
        gap: 6px !important;          /* espaciado más natural */
        margin-bottom: 5px !important; /* Espaciado natural */
    }
}



/* ============================================================
   🖥️ PC – TODO EN UNA SOLA LÍNEA
   ============================================================ */
@media (min-width: 769px) {

    #grupo1,
    #grupo2 {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 15px;
    }

    /* Anchos normales */
    #grupo2 .select-wrapper {
        min-width: 260px;
    }

    #botones-grupo1,
    #botones-grupo2 {
        display: flex;
        gap: 5px;   /* 🔥 Espaciado normal */
        margin-bottom: 15px;
        
    }
}

.btn-consolidado {
    background-color: #0dcaf0 !important; /* celeste */
    color: black; !important;
}



/* Botones personalizados */
.btn-filtrar {
    background-color: #0d6efd !important;
    color: white !important;
}

.btn-hoy {
    background-color: #198754 !important;
    color: white !important;
}

.btn-agregar {
    background-color: #20c997 !important;
    color: white !important;
}

.btn-filtrar-agrupados {
    background-color: #0dcaf0 !important;
    color: white !important;
}

.btn-historial {
    background-color: #6f42c1 !important;
    color: white !important;
}

.btn-eliminar {
    background-color: #dc3545 !important;
    color: white !important;
}




   /* PC */
  .agrupado-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .agrupado-input {
    margin-right: 15px;
  }

  .agrupado-btns {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    
    /* 🔼 Subir un poco los botones en PC */
    margin-top: -4px;
  }

  @media (max-width: 576px) {
    .agrupado-row {
      flex-wrap: wrap;
      justify-content: center;
    }

    .agrupado-input {
      flex: 1 1 100%;
      margin-right: 0;
    }

    .agrupado-btns {
      width: auto;
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 6px; /* móvil normal */
    }
  }

  /* Tamaño general de los botones del modal */
    .agrupado-btns .btn {
        padding: 6px 14px !important; /* Alto + ancho */
        font-size: 0.9rem !important; /* Texto un poco más grande */
    }

    /* Ícono algo más grande */
    .agrupado-btns .btn i {
        font-size: 1rem;
    }

    /* Separación entre botones */
    .agrupado-btns {
        gap: 10px !important;
    }



.swal2-container {
    z-index: 200000 !important;
}

.fila-bloqueada {
    background-color: #ffeb3b !important; /* amarillo sólido */
    color: #000 !important; /* texto negro para contraste */
    font-weight: 500;
}


/* Botones circulares */
.btn-circle {
    border-radius: 50% !important;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Icono centrado */
.btn-circle i {
    font-size: 12px;
}

/* Botón Agregar con fondo amarillo claro */
.btn-agregar-circle {
    background-color: #ffeb3b !important;
    color: #000 !important;
    border: 1px solid #ccc;
}

.btn-agregar-circle {
    background-color: #9b59b6 !important;
    color: white !important;
}
.btn-agregar-circle:hover {
    background-color: #8e44ad !important;
}

.css_tipo_agrupado {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    margin-left: 6px;
}




/* ==== ESTILOS PARA LOS RADIOS ==== */
.radio-container {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-weight: 600;
    cursor: pointer;
}

.radio-container input { display: none; }

.custom-radio {
    width: 15px;
    height: 15px;
    border: 2px solid #007bff;
    border-radius: 50%;
    margin-right: 6px;
    position: relative;
}

.radio-container input:checked + .custom-radio::after {
    content: "";
    width: 9px;
    height: 9px;
    background: #007bff;
    border-radius: 50%;
    position: absolute;
    top: 1.5px;
    left: 1.5px;
}

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

    /* El GRUPO ENTERO de fechas ocupará 12 columnas */
    #grupo1x .fechas-container {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }

    /* Cada fecha ocupará 50% dentro del bloque */
    #grupo1x .fechas-container .form-group {
        width: 50% !important;
        flex: 0 0 48%;
    }

    /* Radios → 12 columnas arriba */
    #grupo1x .radio-group {
        width: 100% !important;
        margin-bottom: 12px;
    }

    /* Botones grupo 1 → centrados */
    #botones-grupo1x {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px;
    }

    /* Grupo 2: select y botones también 12 columnas */
    #grupo2x .select-wrapper {
        width: 100% !important;
    }

    #botones-grupo2x {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px;
    }
}

/* =======================
   MÓVIL (TU HTML REAL)
   ======================= */
@media (max-width: 768px) {

    /* === SE AGRUPAN VISUALMENTE LAS FECHAS === */
    #grupo1x {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    /* Detecta las 2 fechas y las pone en fila */
    #grupo1x .fecha {
        width: 50%;               /* Cada una toma la mitad */
        padding: 0 5px;           /* Espacio entre ellas */
        box-sizing: border-box;
    }

    /* Asegurar que estén en la misma fila */
    #grupo1x .fecha:nth-of-type(2),
    #grupo1x .fecha:nth-of-type(3) {
        display: block;
    }

    /* Botones centrados */
    #grupo1x .botones {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
    }

    /* Select + botones siguen igual */
    #grupo2x .select-field {
        width: 100%;
    }

    #grupo2x .botones {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 10px;
    }

     /* Botones del select → mayor separación */
    #grupo2x .botones {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 14px !important;   /* separa los botones */
        margin-top: 8px;
    }

    #grupo2x .botones button {
        margin: 0 4px;          /* suaviza el espacio lateral */
    }
}





/* =======================
   SOLO PC (>= 769px)
   ======================= */
@media (min-width: 769px) {

    /* Contenedor principal horizontal */
    .filtros-container {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 15px;
        flex-wrap: wrap;
    }

    /* Cada grupo (radios/fechas/botones y select/botones) en línea */
    .grupo {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 15px;
        flex-wrap: wrap;
    }

    /* Radios uno debajo del otro en PC */
    .radios {
        display: flex;
        flex-direction: column !important;
        gap: 5px;
        margin-right: 15px;
    }

    /* Fechas separadas */
    .fecha {
        display: flex;
        flex-direction: column;
        margin-right: 10px;
    }

    .fecha label {
        margin-bottom: 3px;
    }

    /* Botones de fechas alineados en la misma línea */
    #botones-grupo1x {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;
    }

    /* Select en la misma línea */
    .select-field {
        display: flex;
        flex-direction: column;
    }

    /* Botones del select */
    #botones-grupo2x {
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

/* =======================
   SOLO MOVIL : BOTONES DE CABECERA NUEVO Y REFRESCAR
   ======================= */

@media (max-width: 768px) {

    /* Fuerza a que todo esté en una sola línea */
    .app-title {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* evita que algo baje */
        gap: 8px;
    }

    /* Bloque izquierdo (icono + título + botón Nuevo) */
    .app-title > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        white-space: nowrap !important;
    }

    /* Hace más compacto el h1 para que no bote a nadie */
    .app-title h1 {
        font-size: 1rem !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px;
        white-space: nowrap !important;
    }

    /* Íconos más pequeños */
    .app-title h1 i {
        font-size: 1rem !important;
    }

    /* Botón nuevo */
    .app-title h1 button {
        padding: 3px 6px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Contenedor de refrescar */
    .app-breadcrumb {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Botón refrescar */
    .app-breadcrumb .btn {
        padding: 4px 6px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

     /* Botón NUEVO */
    .app-title h1 button {
        padding: 6px 2px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }

    /* Botón REFRESCAR */
    .app-breadcrumb .btn {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }

    /* Íconos dentro de los botones */
    .app-breadcrumb .btn i,
    .app-title h1 button i {
        font-size: 1rem !important;
        margin-right: 3px !important;
    }

    /* Ajuste del H1 para que no se vea tan pequeño */
    .app-title h1 {
        font-size: 1.05rem !important;
    }

}


.ocultarFechas {
    display: none !important;
}


/* Solo afecta a select con clase select-pc en PC */
.select-pc {
    
}

/* En móvil se ignora */
@media (max-width: 768px) {
    .select-pc {
        width: 100% !important;
        min-width: auto;
        max-width: 100%;
    }
}


#txtMensaje {
    height: 120px;   /* más alto que el default */
    resize: vertical; /* permite al usuario cambiar altura si quiere */
}




/* PC: 4 columnas (25% = col-3) */
@media (min-width: 992px) {
    #contenedor_modulo_agrupado .col-div-agrupado {
        width: 25% !important;
        padding: 10px;
    }
}

/* Móvil: columnas completas */
@media (max-width: 991px) {
    #contenedor_modulo_agrupado .col-div-agrupado {
        width: 100% !important;
        padding: 5px 0;
    }
}




.fila-sin-declarar {
    background-color: #f4a7a7 !important; /* rojo rosado suave */
    color: #ffffff !important;
    font-weight: bold;
}



/* 🔹 Botón agregar SOLO breadcrumb */
.btn-breadcrumb-add {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: #ff9800; /* naranja */
    color: #fff;
    border: none;

    font-size: 13px;
    line-height: 1;
}

/* Hover exclusivo */
.btn-breadcrumb-add:hover {
    background-color: #fb8c00;
    color: #fff;
}

/* Evita el "/" SOLO para este botón */
.app-breadcrumb li.no-separator::before {
    content: none !important;
}



.span-tipo-m {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    margin-left: 4px;

    background-color: #000;
    color: #ffc107; /* amarillo */
    font-weight: bold;
    font-size: 11px;

    border-radius: 50%;
    border: none;

    cursor: default;
}
.span-tipo-m-bloqueado {
    background-color: #555 !important;  /* gris oscuro */
    color: #bbb !important;            /* amarillo apagado */

    opacity: 0.6;
    cursor: not-allowed !important;

    pointer-events: none; /* 🔥 bloqueo total */
}



.monto-cero {
    color: red; /* rojo */
}

.monto-positivo {
    color: blue; /* azul */
}

.monto-negrita {
    font-weight: bold;
}


.pdf-body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
}



/* ==== ENCABEZADO ==== */
.pdf-header {
    border-bottom: 2px solid #000;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.pdf-header-table {
    width: 100%;
    border-collapse: collapse;
}

.pdf-header-table td {
    vertical-align: middle;
    padding: 5px;
}

.pdf-header-left {
    width: 33%;
    text-align: left;
    font-size: 10px;
}

.pdf-header-center {
    width: 34%;
    text-align: center;
    font-size: 11px;
}

.pdf-header-right {
    width: 33%;
    text-align: right;
}

.pdf-header-right img {
    max-height: 60px;
}

/* ==== TABLA ==== */
.pdf-table {
    width: 100%;
    border-collapse: collapse;
}

.pdf-table th,
.pdf-table td {
    border: 1px solid #333;
    padding: 6px;
    word-wrap: break-word;
}

.pdf-table th {
    background-color: #e0e0e0;
    font-weight: bold;
}

.pdf-table tr {
    page-break-inside: avoid;
}


/* ==== TEXTO ==== */
.pdf-text-center { text-align: center; }
.pdf-text-left { text-align: left; }
.pdf-text-right { text-align: right; }

/* ==== TOTALES ==== */
.pdf-total {
    font-weight: bold;
    background-color: #e9ecef;
}

@page {
    margin-bottom: 60px;
}

.pdf-footer {
    position: fixed;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #555;
}

.pdf-footer:after {
    content: "Página " counter(page) " de " counter(pages);
}



.categoria-col {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.col-item {
    width: 25px;
    text-align: center;
    white-space: nowrap;
}




.pdf-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 🔥 CLAVE */
}

.pdf-table th,
.pdf-table td {
    border: 1px solid #000;
    padding: 6px;
    font-size: 11px;
}

.pdf-table tr {
    page-break-inside: avoid; /* 🔥 EVITA CLONADO */
}

.categoria-col {
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
}

.software-title {
    font-family: 'Arial Narrow', 'Helvetica Neue', sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: #f1c40f !important; /* amarillo elegante */
    margin-top: 4px !important;
    letter-spacing: 1px;    
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    line-height: 1.2;
}





.dashboard-filtros {
    max-width: 420px;
    margin-bottom: 20px;
}

.dashboard-botones button {
    margin-bottom: 8px;
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border-radius: 12px;
    color: #fff;
    margin-bottom: 15px;
}

.kpi-card i {
    font-size: 32px;
}

.kpi-card.success { background: linear-gradient(135deg,#2ecc71,#27ae60); }
.kpi-card.info    { background: linear-gradient(135deg,#3498db,#2980b9); }
.kpi-card.warning { background: linear-gradient(135deg,#f39c12,#e67e22); }


.filtros-botones {
    display: flex;
    gap: 8px;            /* separación horizontal */
}

.filtros-botones button {
    margin-bottom: 0;   /* mata el estilo anterior */
}


.dashboard-section-header {
    border-bottom: 3px solid #fd7e14;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.dashboard-section-header h5 {
    font-weight: 600;
    color: #fd7e14;
}



.banco-card {
    position: relative;
    border-radius: 12px;
    padding-top: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transition: transform .2s ease;
}

.banco-card:hover {
    transform: translateY(-3px);
}

.banco-porcentaje {
    position: absolute;
    top: 8px;
    right: 10px;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    padding: 3px 8px;
    border-radius: 12px;
}

/* Colores por banco */
.banco-yape { border-top: 4px solid #7b1fa2; }
.banco-yape .banco-porcentaje { background: #7b1fa2; }

.banco-plin { border-top: 4px solid #1976d2; }
.banco-plin .banco-porcentaje { background: #1976d2; }

.banco-efectivo { border-top: 4px solid #2e7d32; }
.banco-efectivo .banco-porcentaje { background: #2e7d32; }

.banco-otros { border-top: 4px solid #6c757d; }
.banco-otros .banco-porcentaje { background: #6c757d; }

/* Tarjeta Total General */
.banco-total {
    border-top: 4px solid #343a40; /* gris oscuro elegante */
}

.banco-total .banco-porcentaje {
    background: #343a40;
}

/* Monto total más destacado */
.banco-total .banco-monto {
    font-size: 1.6rem;   /* más grande que los demás */
    font-weight: 700;
}




.btn-purple {
  background-color: #6f42c1;
  color: #fff;
}
.btn-purple:hover {
  background-color: #ffc107;
}







/* Layout base */
.grupo-fechas-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 992px) {

    /* Contenedor general */
    .grupo-fechas-acciones {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 🔥 Forzar fechas lado a lado */
    .campo.fecha {
        flex: 0 0 48%;
        max-width: 48%;
    }

    /* Botonera en nueva fila y centrada */
    .grupo-botones-acciones {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 4px;
    }

    /* Ajuste botones */
    .grupo-botones-acciones button {
        font-size: 11px;
        padding: 6px 9px;
        white-space: nowrap;
    }
}



@media (min-width: 992px) {
    .grupo-fechas-acciones {
        align-items: flex-end;
    }
}


/* Móviles altos (iPhone X, 11, 12, 13, 14, etc.) */
@media (max-width: 480px) and (min-height: 750px) {

    .grupo-botones-acciones {
        margin-top: 8px;
    }
}



#contenedorBancos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.banco-col {
    width: 100%;
}


/* Corrección general para tablas responsive */
.table {
    table-layout: auto !important;
}

/* Tabla de Pagos sin Usuario */
#tablaSinUsuario th,
#tablaSinUsuario td {
    word-break: break-word;
}

/* La fecha nunca debe romperse feo */
#tablaSinUsuario th:first-child,
#tablaSinUsuario td:first-child {
    white-space: nowrap;
}

/* El monto alineado a la derecha se mantiene limpio */
#tablaSinUsuario th:last-child,
#tablaSinUsuario td:last-child {
    white-space: nowrap;
}




/* La tabla puede adaptar ancho según contenido */
.table {
    table-layout: auto !important;
}

/* Columna Fecha: que nunca se comprima feo */
#tablaCajasSinCerrar td:first-child,
#tablaCajasSinCerrar th:first-child {
    white-space: nowrap;
}

/* Permitir que las otras columnas sí se adapten */
#tablaCajasSinCerrar td,
#tablaCajasSinCerrar th {
    word-break: break-word;
}

/* Centrar columna "Total de pagos" en tabla Cajas sin cerrar */
#tablaCajasSinCerrar td:nth-child(2),
.table thead th:nth-child(2) {
    text-align: center;
}


/* Ajuste general para tablas responsive */
.table td,
.table th {
    white-space: nowrap;
}

/* Permitir que Cliente (col 2) y Banco (col 4) sí hagan salto de línea */
#tablaSinUsuario td:nth-child(2),
#tablaSinUsuario th:nth-child(2),
#tablaSinUsuario td:nth-child(4),
#tablaSinUsuario th:nth-child(4) {
    white-space: normal;
    min-width: 120px;
}

/* Fecha más compacta */
#tablaSinUsuario td:nth-child(1),
#tablaSinUsuario th:nth-child(1) {
    white-space: nowrap;
}

/* Código compacto */
#tablaSinUsuario td:nth-child(3),
#tablaSinUsuario th:nth-child(3) {
    white-space: nowrap;
}

/* Monto siempre alineado a la derecha */
#tablaSinUsuario td:nth-child(5),
#tablaSinUsuario th:nth-child(5) {
    text-align: right;
    white-space: nowrap;
}