:root {
  /* 🌸 Rosados y corales */
  --rosa-empolvado: #F6C1CF;
  --rosa-nude: #EEC9D2;
  --coral-suave: #F8B6A6;
  --salmon-pastel: #F9C5B8;

  /* 🌿 Verdes suaves */
  --verde-menta-moderno: #BFE8D5;
  --salvia-claro: #C9D8C5;
  --pistacho-pastel: #D7E8BA;
  --verde-eucalipto: #B8D8C0;

  /* 🌊 Azules ligeros */
  --azul-cielo-suave: #C6E2F5;
  --azul-polvo: #BFD3E6;
  --azul-grisaceo-pastel: #C7D3DD;
  --azul-lavanda: #D6D6F5;

  /* 🌼 Amarillos y neutros cálidos */
  --amarillo-mantequilla: #F6E7B4;
  --vainilla-suave: #F3E5AB;
  --durazno-claro: #FAD4C0;
  --beige-rosado: #E8D8C3;

  /* 💜 Lilas y morados suaves */
  --lavanda-moderna: #E3D7F4;
  --lila-grisaceo: #D8CFE8;
  --malva-pastel: #DCC6E0;
  --violeta-suave: #CDB4DB;
}


@font-face{
	font-family:"lancelot";
	src:url("fonts/lancelot/Lancelot-Regular.ttf");
}

@font-face{
	font-family:"roboto";
	src:url("fonts/roboto/roboto-flex.ttf");
}

.font-lancelot{
    font-family: "lancelot" !important;
}


.font-roboto{
    font-family: "roboto" !important;
}

.align-v{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.text-green{
    color:#4BA234 !important;
}

.bg-green{
    background-color:#4BA234 !important;
}

.nav-link{
    border-bottom: 3px solid transparent !important;
}

.nav-link:hover{
    border-bottom: 3px solid #4BA234 !important;
}

.nav-link.active{
    border-bottom: 3px solid #FFFFFF !important;
    color: #FFFFFF !important;
    background-color:#4BA234 !important;
}

.navbar-menu{
    border-bottom: 3px solid #4BA234 !important;
    z-index: 100;
}


/* Botones Personalizados */

.btn-green{
    border: 1px solid #4BA234 !important;
    background-color: #FFFFFF !important;
    color:#4BA234;
    font-size:18px;
    border-radius: 0px;
    padding: 12px 25px;
    font-weight: lighter !important;
    cursor:pointer;
}

.btn-green:hover{
    border: 1px solid #4BA234 !important;
    background-color: #4BA234 !important;
    color:#FFFFFF;
    font-size:18px;
}

.custom-tooltip {
    --bs-tooltip-bg: #4BA234 !important;
    --bs-tooltip-color: #FFFFFF !important;
}

.icon-delete{
    color:#de272c; 
    font-size:16px;
    padding: 8px;
}

.icon-delete:hover{
    color:#a71c1e; 
    background-color: #DDDDDD;
    cursor:pointer;
}

.icon-edit{
    color:#45b39d; 
    font-size:16px;
    padding: 8px;
    text-decoration: none;
}

.icon-edit:hover{
    color:#45b39d; 
    background-color: #DDDDDD;
    cursor:pointer;
}

.item-btn-menu{
    margin:10px;
    background: rgb(75,162,52);
    background: linear-gradient(90deg, rgba(75,162,52,1) 0%, rgba(0,255,0,1) 100%);
    background-size: 300%;
    border-radius:0px;
    border:none;
    padding:15px 35px;
    color: #FFFFFF;
    text-decoration: none;
    font-size:14px;
    transition: all 0.15s ease-out !important;
}

.item-btn-menu:hover{
    animation: gradient-animation .75s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ── Datepicker jQuery UI dentro de modales Bootstrap 5 ──────────────────
   Bootstrap añade overflow:hidden al body cuando un modal está abierto.
   En Firefox y Safari los elementos position:absolute hijos del body
   se recortan al salir de sus límites. Usar position:fixed con z-index
   alto evita el recorte y garantiza que el calendario quede por encima
   del backdrop y del dialog del modal.
   El reposicionamiento preciso se hace en JS con getBoundingClientRect.
   ────────────────────────────────────────────────────────────────────── */
body.modal-open #ui-datepicker-div {
    position: fixed !important;
    z-index: 1100 !important;
}

/* ── Encabezados de tabla fijos (sticky) para listas largas ──────────────
   Envuelve la tabla en un contenedor con altura acotada y scroll interno;
   el <thead> queda pegado arriba de ese contenedor mientras se hace scroll
   por las filas. Usar .tabla-sticky-lg para listados muy largos (ej. Lotes).
   ────────────────────────────────────────────────────────────────────── */
.tabla-sticky-wrap {
    max-height: 420px;
    overflow-y: auto;
}

.tabla-sticky-wrap.tabla-sticky-lg {
    max-height: 65vh;
}

.tabla-sticky-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
}