/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 3 ago 2025, 4:02:55 p.m.
    Author     : cesarivancruzmartinez
*/
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root{
--primary-app: #e08e27;
--primary-app-op5: rgba(224, 142, 39, 0.5);
--secondary-app: #f9b500;
--secondary-app-op5: rgba(249, 181, 0, 0.5);
--accent-app: #fdb400;
--accent-secondary-app: #fdce10;
--base-app: #ffffff; 
--black-app: #000000;
--gray-app: #636363;
--primary-app-container: #607d8b;
/*--primary-app-container: #E4DFDF;*/
--secondary-app-container: #C7BBA5;

--font-family-app: 'Montserrat', sans-serif;

--status-instock-bg: #c8e6c9;
--success-app: #018786;
--success-app: #018786;
--success-app: #018786;
--info-app: #17a2b8;
--warning-app: #ffc107;
--dange-appr: #dc3545;
--light-app: #f8f9fa;
--dark-app: #343a40;
--black-app: #000000;


--btn-info: #3f76a7;
--btn-success: #296235;
--btn-danger: #91243a;
--btn-warning: #E8BA2E;
--btn-secondary: #525252;
--btn-login: #203524;

--bg-filter: #c7bba5;
}

html {
  font-family: var(--font-family-app) !important;
}

body {
  font-family: var(--font-family-app) !important;
}

body .ui-widget {
  font-family: var(--font-family-app) !important;
}

.border-app{
    border: 1px solid #dee2e6;
}

.card-title {
  font-size:2em;
  color: var(--primary-app) !important;
}

.ui-button-text{
    font-weight: 400;
    font-size: 0.9em;
}

.ui-datatable thead th .ui-column-title {
    font-weight: 600 !important;
    font-size: .9em !important;
    color: var(--secondary);
}

.modal-title {
    padding: 5px 20px;
    color: var(--primary-app) !important;
    font-weight: 400 !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 10px !important;
}

.modal-header,
.ui-dialog-titlebar{
    border: 1px solid var(--primary-app) !important;
    background: var(--primary-app) !important;
    padding: 1rem 1.25rem !important;
    border-radius: 4px !important;
    font-size: 1.5em !important;
    color: #ffffff !important;
}

.modal-header  > button.close{
    color: #ffffff !important;
}

.product-badge {
    border-radius: 2px;
    padding: 0.25em 0.5rem;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .3px;
}

.product-badge.status-instock {
    background: var(--status-instock-bg);
    color: #256029;
}

.product-badge.status-lowstock {
    background: #feedaf;
    color: #8a5340;
}

.product-badge.status-averagestock {
    background: #7F8C8D;
    color: #ffffff;
}

.ui-chip-btn {
    border-radius: 16px !important;
    padding: 0 .5rem !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    width: auto !important;
}

.ui-chip-btn-icon {
    border-radius: 25% !important;
    padding: 0.65rem !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    width: auto !important;
}


.ui-chip-btn-icon > .ui-chip-icon {
     margin-right: .0rem !important;
}

.moduloLabel{
    background: var(--primary-app);
    padding: 10px 20px;
    font-size: 1.1em !important; 
    color: #fff;
    font-family: var(--fontfamilyapp);
    font-weight: 400;
    border-radius: 12px;
}

.costosLabel{
    background: var(--info-app);
    padding: 10px 20px;
    font-size: 1.5em;
    color: #fff;
    font-family: var(--font-family-app);
    font-weight: 400;
    border-radius: 12px;
}

.fechaLabel{
    background: var(--primary-app-container);
    padding: 10px 20px;
    font-size: 1.5em;
    color: #fff;
    font-family: var(--font-family-app);
    font-weight: 400;
    border-radius: 12px;
}

.encabezadoLabel{
    font-weight: 700;
    text-decoration: underline;
    font-size: 0.8em;
}


.nota{
    font-family: var(--font-family-app);
    font-weight: 400;
    font-size: 1em !important;
    color: #3a4752;
}

.status-dark {
    color: #141619 !important;
    background-color: #d3d3d4 !important;
    border-color: #bcbebf !important;
}

.status-success {
    color: #0f5132 !important;
    background-color: #d1e7dd !important;
    border-color: #badbcc !important;
}

.status-danger {
    color: #842029 !important;
    background-color: #f8d7da !important;
    border-color: #f5c2c7 !important;
}

.loader-overlay {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.0);
    z-index: 1;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--primary-app) !important;
  --bs-tooltip-color: var(--bs-white);
}


body .ui-button {
    font-family: var(--font-family-app);
    background: var(--primary-app);
    border: 1px solid var(--primary-app);
    color: var(--base-app);
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
 
.ui-button-info{
    background: transparent !important;
    border: 1px solid var(--btn-info) !important;
}

.ui-button-info > .ui-button-text, .ui-button-info > .ui-icon{
    color: var(--btn-info) !important
}

.ui-button-info:hover{
    background: var(--btn-info) !important;
    color: #ffffff !important;
}

.ui-button-info:hover > .ui-button-text, .ui-button-info:hover > .ui-icon{
    color: #ffffff !important;
}

.ui-button-success{
    background: transparent !important;
    border: 1px solid var(--btn-success) !important;
}

.ui-button-success > .ui-button-text, .ui-button-success > .ui-icon{
    color: var(--btn-success) !important
}

.ui-button-success:hover{
    background: var(--btn-success) !important;
    color: #ffffff !important;
}

.ui-button-success:hover > .ui-button-text, .ui-button-success:hover > .ui-icon{
    color: #ffffff !important;
}

.ui-button-danger{
    background: transparent !important;
    border: 1px solid var(--btn-danger) !important;
}

.ui-button-danger > .ui-button-text, .ui-button-danger > .ui-icon{
    color: var(--btn-danger) !important
}

.ui-button-danger:hover{
    background: var(--btn-danger) !important;
    color: #ffffff !important;
}

.ui-button-danger:hover > .ui-button-text, .ui-button-danger:hover > .ui-icon{
    color: #ffffff !important;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: var(--primary-app);
    background: var(--primary-app);
    color: #fff;
}

.redInputValue{
    color: var(--btn-danger) !important;
    /*font-weight: 600 !important;*/
}

.bg-chip-custom{
    background-color: transparent !important;
    color: var(--accent-app) !important;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.5) !important;
    padding: 5px 20px !important;
}

.product-item-content-selected{
    border: 4px solid #256029  !important;
    box-shadow: 0px 4px 10px rgba(37,96,41,0.25);
    
}

/*.small-calendar {
    width: 80% !important;  
    transform: scale(0.80) !important;
    transform-origin: top left !important;
}*/

/* tamaño general de fuente */
.small-calendar.ui-datepicker {
    width: 370px !important;  
    font-size: 11px !important;
}

body .ui-datepicker .ui-datepicker-calendar td>a,
body .ui-datepicker .ui-datepicker-calendar td>span{
     width: 0.7rem !important;
     height: 0.7rem !important; 
     line-height: 0.7rem !important;
}

.p-datepicker .ui-datepicker-touch-ui, .ui-datepicker-touch-ui {
    min-width: 45vw !important;
}

.ui-datepicker table {
    font-size: 1.3em !important;
}

.ui-widget-overlay{
    z-index: 2 !important;
}

body .ui-accordion .ui-accordion-header,
body .ui-panel .ui-panel-titlebar{
    
    font-size: 1.2em;
    font-weight: 200;
    color: #0d89ec !important;
    background: transparent !important;
    border: 0px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0.5rem 1rem  !important;
        
}

.ui-panel-titlebar{
    font-size: 1.4em;
    font-weight: 400;
    color: #0d89ec;
    background: #F1F5F9;
    border: 0px solid #dee2e6 ;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1rem;
}

.ui-shadow-panel{
    max-width: 100% !important;
    max-height: 100vh !important;
    overflow-y: visible !important;
}

.ui-shadow-panel > .ui-dialog-titlebar,
.ui-shadow-panel > .ui-dialog-content{
    
    left: 10%;
    width: 80%;
}

.ui-shadow-panel > .ui-dialog-titlebar{
    margin-top: 30px;
}

.ui-shadow-panel > .ui-dialog-content{
    
    margin-bottom: 30px;
}

body .ui-dialog .ui-dialog-content {
    /*padding: .2rem 0rem 2rem 0rem;*/
    padding: .2rem 0rem 0rem 0rem;
    background: #f6f8fa !important;
}

.mi-card {
    background-color: #ffffff;
    border-radius: 12px;              /* Bordes redondos */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra / elevación */
    padding: 20px;                    /* Espacio interno */
    margin: 0 15px;                   /* Margen izquierdo y derecho */
    transition: all 0.3s ease-in-out; /* Animación suave */
}

/* Efecto al pasar el mouse (más elevación) */
.mi-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    transform: translateY(-4px);
}

.active-reservation,
.active-reservation > .fc-event-main{
    color: #0f5132 !important;
    background: #d1e7dd !important;
    border: 1px solid #badbcc !important;
}

.inactive-reservation,
.inactive-reservation > .fc-event-main{    
    color: #41464b !important;
    background: #e2e3e5 !important;
    border: 1px solid #d3d6d8 !important;
}

.btn-active-reservation,
.btn-inactive-reservation {
    display: flex;
    margin-bottom: 10px;
}

.btn-active-reservation > .check{
    background: #d1e7dd !important;
    border: 1px solid #badbcc !important;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.btn-active-reservation{
    background: #d1e7dd !important;
    border: 1px solid #badbcc !important;
    padding: 5px;
    width: 60px;
    margin-right: 5px;
}

.btn-inactive-reservation > .check{
    background: #e2e3e5 !important;
    border: 1px solid #d3d6d8 !important;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.btn-inactive-reservation{
    background: #e2e3e5 !important;
    border: 1px solid #d3d6d8 !important;
    padding: 5px;
    width: 70px;
    margin-right: 5px;
}

.btn-active-reservation > .labelCheck,
.btn-inactive-reservation > .labelCheck{
    font-weight: 500;
}

.ui-fluid .ui-button {
    width: auto !important;
}

@media (max-width: 576px) {
    .ui-picklist-list::-webkit-scrollbar {
        width:30px;
    }
}

body .ui-chip {
    padding: 0.7rem;
    font-size: 1.5em;
}

.ui-datepicker {
    font-size: 11px !important; /* Ajusta este valor (ej. 10px o 12px) según necesites */
}

/* Reduce el padding entre los días para hacer el panel más compacto */
.ui-datepicker .ui-datepicker-calendar td {
    padding: 0.1em !important;
}



.card-container{
    padding:25px;
    border-radius:25px;
    /*background: rgba(255,255,255,.15);*/
    background-color: rgba(51, 51, 51, 0.602);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(12px);

    /* Borde suave */
    border:1px solid rgba(255,255,255,0.30);

    /* Sombras */
    box-shadow:
        0 8px 32px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.25);
    color: var(--base-app);
}


  
  .accordion-header{
      background: transparent;
    border-radius: 20px!important;
  }
  
  .accordion-item{
      margin-top: 20px;
    /* Sombras */
    box-shadow:
        0 8px 32px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.25);
  }
  
.accordion-button{
    font-weight: 700;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
}

.accordion-button:not(.collapsed) {
    font-weight: 700;
    color: var(--base-app) !important;
    background-color: var(--primary-app) !important;
    -webkit-box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color) !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color) !important;
    
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}


.requisitos{
    font-weight: 700;
    font-size: 1.3em!important;
}