/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
.reqError {
  border: 1px solid red !important;
}

/* Define el color principal para reutilizarlo */
        :root {
            --datepicker-blue: #2EA300;
            --datepicker-blue-light: #2EA300;
        }

        /* 1. Contenedor para centrar el datepicker */
        #dates {
            display: flex;
            justify-content: center;
        }


        /* 2. Estilos base del datepicker: bordes y tema azul */
        #dates .datepicker-inline{
            border: 2px solid var(--datepicker-blue);
            border-radius: 15px; /* Borde redondeado */
            padding: 10px;
            width: auto;
        }

        /* Cabecera (Mes y Año) */
        .datepicker table thead tr:first-of-type {
            background-color: var(--datepicker-blue);
            color: white;
            border-radius: 10px 10px 0 0;
        }
        .datepicker table thead th.datepicker-switch:hover,
        .datepicker table thead th.next:hover,
        .datepicker table thead th.prev:hover {
            filter: brightness(115%);
            background-color: var(--datepicker-blue);
            color: #fff;

        }
        
        /* Días de la semana (Lu, Ma, Mi...) */
        .datepicker table thead tr:nth-of-type(2) {
             background-color: #f8f9fa;
        }

        /* Día seleccionado */
        .datepicker table tr td.active,
        .datepicker table tr td.active:hover {
            background-color: var(--datepicker-blue) !important;
            background-image: none;
            color: white;
            box-shadow: none;
            text-shadow: none;
        }
        
        /* Día de hoy */
        .datepicker table tr td.today {
             background-color: var(--datepicker-blue-light);
        }
        
        .datepicker table tr td {
        	padding: 10px;
        }
        /* Hover sobre los días */
        .datepicker table tr td.day:not(.disabled):hover {
            background-color: var(--datepicker-blue);
            color: #fff;
        }


        /* 3. Aumento de tamaño SÓLO en resoluciones grandes */
        @media (min-width: 992px) {
            #dates {
                /* Aumentamos el tamaño de la fuente base, lo que escala todo el componente */
                font-size: 1.15rem; 
            }
        }