:root {
  --color-g1: #6BAA75; /* Verde oliva suave - ingresos */
  --color-g2: #B55451; /* Rojo vino - morosidad */
  --color-g3: #5D8AA8; /* Azul acero - cuentas */
  --color-g4: #C9A227; /* Dorado apagado - facturas */
  --color-g5: #D9822B; /* Naranja ámbar suave - egresos */
  --color-g6: #7A7A7A; /* Gris neutro - listados */
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-solid-900.woff2") format("woff2");
  font-display: swap;
}




#cortina {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.7);
  z-index: 999;
}


.joined {
display: grid;
grid-template-columns: 1fr auto;
}    

/***************************************************/
.colorPrimary {color:#e91e63; }
.colorSecondary {color:#7b809a; }
.colorInfo {color:#03a9f4; }
.colorSucces {color:#4caf50; }
.colorDanger {color:#f44335; }
.colorWarning {color:#fb8c00; }

.navbar-vertical.navbar-expand-xs .navbar-collapse{
height: auto;
}


#rightModal .modal-dialog-slideout {
min-height: 100%; 
margin: 0 0 0 auto;
background: #fff;
}

.modal.fade .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(100%,0)scale(1);
transform: translate(100%,0)scale(1);
}

.modal.fade.show .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(0,0);
transform: translate(0,0);
display: flex;
align-items: stretch;
-webkit-box-align: stretch;
height: 100%;
}

.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body{
overflow-y: auto;
overflow-x: hidden;
}

.modal-dialog-slideout .modal-content{
border: 0;
}

.modal-dialog-slideout .modal-header, .modal-dialog-slideout .modal-footer {
height: 69px; 
display: block;
}

#rightModal .modal-dialog-slideout .modal-header h5 {
float:left;
color:blue;
}

#leftModal .modal-dialog-slideout { 
min-height: 100%; 
margin: 0 auto 0 0;
background: #fff;
}

#leftModal .modal-dialog-slideout .modal-header h5 {
float:left;
color:red;
}

#leftModal.modal.fade:not(.show) .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(100%,0)scale(1);
transform: translate(-100%,0)scale(1);
}


.selectWrapper{
border-radius:20px;
display:inline-block;
overflow:hidden;
background:#fff;
border:1px solid #cccccc;
color: #000;
}

.selectBox{
/*
width:140px;  */
height:30px;
border:solir 1px #fff;
outline:none;
}


.textoRotado {
writing-mode: vertical-rl;text-orientation: mixed;   
font-weight: bolder;
letter-spacing: 5px;
text-decoration: underline;
text-underline-position: top;
}


#resultado {
    background-color: red;
    color: white;
    font-weight: bold;
}
#resultado.ok {
    background-color: green;
}

.elHR { height:2px;border-width:0;background-color:aqua; }

  .layer
{
    margin-top:10px;
    margin-bottom:10px;
}

.line.simple
{
    width:90%; 
    height:0px; 
    display:block;
    position:relative;
    border-style:solid; 
    border-width:1px 0 0 0; 
    float:left;
    margin:15px 0 0px; 
}

.top_a
{ 
    padding-left:5px; 
    font:italic 12px/18px Tahoma, sans-serif;
}





.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
} 



ul#menuPredeterminados li {
  display:inline;
}



.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.custom-modal-width {
  max-width: calc(60% + 50px);  /* 10% más ancho que lg */
}



/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

input:focus-visible + label {
  outline: 2px solid rgba(0,102,204,1);
  border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

.tabset {
  max-width: 65em;
} 



#prod_EC0112 { resize: none; overflow-y: hidden; }   


.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}


@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.bell{
  display:block;
  width: 15px;
  height: 15px;
  font-size: 15px;
  color: red;
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.valido{
  border-bottom: 2px solid #8BC34A;
}

.invalido{
  border-bottom: 2px solid #D32F2F;
}

.fc-daygrid-event .fc-event-title {
  white-space: normal;
  text-overflow: ellipsis;
  max-height:20px;
}

.fc-daygrid-event .fc-event-title {
  max-height:none !important;
}

.fc-event {
  font-size: 0.7em;
}

@media screen and (max-width: 500px) {
  .main-content {
    margin-left: 0 !important;
  }
}

.cuatroBordes {
  border: dashed 1px #ccc;
}

.margenBalance {
        margin: 0 5px; 
    }



@keyframes parpadeo {
    0%, 100% {
        opacity: 1; /* Opacidad al 100% */
    }
    50% {
        opacity: 0.2; /* Opacidad al 20% */
    }
}

.iconoParpadeo {
    animation: parpadeo 1s infinite; /* Aplicar la animación de parpadeo */
}



/* Estilo general de la tabla */
table.excel-style-table {
  width: 100%;
  border-collapse: collapse;
}

/* Estilo para las cabeceras */
table.excel-style-table th {
  border-bottom: 1px dashed #ccc;
  text-align: left;
  padding: 8px;
  font-weight: bold;
}

/* Estilo para las celdas de datos */
table.excel-style-table td {
  border-bottom: 1px dashed #ccc;
  padding: 8px;
}

/* Estilo para las filas vacías */
table.excel-style-table tr.empty-row th,
table.excel-style-table tr.empty-row td {
  border-bottom: none;
}

/* Estilo para los anchos de las columnas */
table.excel-style-table th,
table.excel-style-table td {
  width: 16%;
}




.btn-pastel-grey {
  background-color: #e0e0e0; 
  color: #424242; 
  border-color: #bdbdbd; 
}

.btn-check:checked + .btn-pastel-grey {
  background-color: #4682B4; 
  color: white; 
  border-color: #b3e5fc;
}



.checkbox-cell { width: 2% !important; }





.iconitoSaltarin { font-size: auto; display: inline-block; transition: transform 0.2s ease; }

@keyframes saltito { 
     0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.iconitoSaltarin:hover { animation: saltito 0.5s ease-in-out infinite; }




        .blink {
            /*font-size: 48px;*/
            animation: blink-animation 2s steps(3, start) infinite; /* Ajusta la duración si quieres parpadeos más lentos */
        }

        @keyframes blink-animation {
            to {
                visibility: hidden;
            }
        }


        .color-change {
            font-size: 48px;
            transition: color 0.5s;
        }





        .recibo-container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
            background-color: #ffffff;
            border: 2px solid #00a3cc;
            border-radius: 8px;
        }
        .header, .cliente-info, .datos-recibo {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .header h1 {
            font-size: 24px;
            color: #000;
            text-align: center;
            width: 100%;
        }
        .cliente-info div, .datos-recibo div {
            padding: 10px;
            flex: 1;
            background-color: #e0f7fa;
            border-radius: 6px;
            margin-right: 10px;
            font-size: 14px;
        }
        .cliente-info div:last-child, .datos-recibo div:last-child {
            margin-right: 0;
        }
        .section-title {
            font-size: 18px;
            color: #000;
            margin-top: 20px;
        }
        .tabla-desglose {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        .tabla-desglose th, .tabla-desglose td {
            border: 1px solid #00a3cc;
            padding: 3px;
            text-align: center;
        }
        .tabla-desglose th {
            background-color: #e0f7fa;
            color: #000;
        }
        .tabla-desglose tr:nth-child(even) {
            background-color: #f0f8ff;
        }
        .total {
            text-align: right;
            font-size: 16px;
            font-weight: bold;
            margin-top: 15px;
        }
        .footer-note {
            font-size: 12px;
            color: #900;
            text-align: center;
            margin-top: 20px;
        }



        /* Estilos específicos para la tabla con id tablaCompleta */
        #tablaCompleto {
            border-collapse: collapse;
            width: 100%;
            font-size: 12px;
            text-align: left;
        }

        /* Estilo del encabezado */
        #tablaCompleto thead th {
            color: white;
            padding: 4px;
            border: 1px dashed #ddd;
        }

        /* Estilo del cuerpo */
        #tablaCompleto tbody td {
            padding: 4px;
            border: 1px dashed #ddd;
        }

        /* Alternar color de filas (opcional) */
        #tablaCompleto tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        #tablaCompleto tbody tr:hover {
            background-color: #e2e2e2;
        }


/* Fondo de color */
.bg-blue { background-color: var(--bs-blue); }
.bg-indigo { background-color: var(--bs-indigo); }
.bg-purple { background-color: var(--bs-purple); }
.bg-pink { background-color: var(--bs-pink); }
.bg-red { background-color: var(--bs-red); }
.bg-orange { background-color: var(--bs-orange); }
.bg-yellow { background-color: var(--bs-yellow); }
.bg-green { background-color: var(--bs-green); }
.bg-teal { background-color: var(--bs-teal); }
.bg-cyan { background-color: var(--bs-cyan); }

/* Color de texto */
.text-blue { color: var(--bs-blue); }
.text-indigo { color: var(--bs-indigo); }
.text-purple { color: var(--bs-purple); }
.text-pink { color: var(--bs-pink); }
.text-red { color: var(--bs-red); }
.text-orange { color: var(--bs-orange); }
.text-yellow { color: var(--bs-yellow); }
.text-green { color: var(--bs-green); }
.text-teal { color: var(--bs-teal); }
.text-cyan { color: var(--bs-cyan); }

/* Bordes con color */
.border-blue { border: 2px solid var(--bs-blue); }
.border-indigo { border: 2px solid var(--bs-indigo); }
.border-purple { border: 2px solid var(--bs-purple); }
.border-pink { border: 2px solid var(--bs-pink); }
.border-red { border: 2px solid var(--bs-red); }
.border-orange { border: 2px solid var(--bs-orange); }
.border-yellow { border: 2px solid var(--bs-yellow); }
.border-green { border: 2px solid var(--bs-green); }
.border-teal { border: 2px solid var(--bs-teal); }
.border-cyan { border: 2px solid var(--bs-cyan); }