/* ========================================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ======================================================== */
:root { 
    --color-primary-light:#797f92;
    --color-primary:#384365;
    --color-primary-dark:#0e1f54;
    --color-secondary:#d91a2a;
    --color-dark:#2d3748; 
    --font-principal:"Open sans";
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}

body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:14px; line-height:24px; font-family:var(--font-principal), sans-serif; color:#4a5568; overflow-x:hidden; background-color:#f4f5f7; margin:55px 0px 0px; padding:0px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-principal), cursive; margin:0px; padding:0px; margin-bottom:10px; color: var(--color-primary-dark); font-weight: 600; }
h3, .h3 { font-size: 32px; }
a, a:visited, a:focus, a:active { text-decoration:none; outline:none; }
a { font-weight:600; color:var(--color-primary); transition:all 0.3s ease; cursor:pointer; }
a:hover { color:var(--color-secondary); }

/* ========================================================
   2. UTILIDADES Y CLASES DE FORMATO (Márgenes, padding, colores)
   ======================================================== */
.font10{ font-size:10px;line-height:12px; }
.font12{ font-size:12px;line-height:14px; }
.font16{ font-size:16px;line-height:18px; }
.font22{ font-size:22px;line-height:24px; }
.font28{ font-size:28px;line-height:30px; }
.font150{ font-size:150%;}
.uppercase { font-weight:600;text-transform:uppercase; letter-spacing: 0.5px;}
.number { font-family:"Lato",  Helvetica, Arial, sans-serif; }
.bold{ font-weight:bold; }
.text-sombra{ text-shadow: 0 2px 4px rgba(0,0,0,0.15); }

.vertical-center, .centerTotal, .rounded10px, .rounded25px, .rounded50px, .redondo { display: flex;justify-content: center;align-content: center;flex-direction: column; text-align:center;}
.rounded10px{ border-radius:8px; }
.rounded25px{ border-radius:25px; }
.rounded50px{ border-radius:50px; }
.redondo{ border-radius:50%; }

.fillheight{ height:100%; }
.fillwidth{ width:100%; }

/* Bordes */
.b1-primary, .b1-top-primary{ border-top:1px solid var(--color-primary-light); }
.b1-primary, .b1-bottom-primary{ border-bottom:1px solid var(--color-primary-light); }
.b1-primary, .b1-right-primary{ border-right:1px solid var(--color-primary-light); }
.b1-primary, .b1-left-primary{ border-left:1px solid var(--color-primary-light); }
.b1-dark, .b1-top-dark{ border-top:1px solid var(--color-dark); }
.b1-dark, .b1-bottom-dark{ border-bottom:1px solid var(--color-dark); }
.b1-dark, .b1-right-dark{ border-right:1px solid var(--color-dark); }
.b1-dark, .b1-left-dark{ border-left:1px solid var(--color-dark); }

/* Márgenes */
.m1{ margin:1px; } .m4{ margin:4px; } .m8{ margin:8px; } .m12{ margin:12px; } .m20{ margin:20px; }
.mt1{ margin-top:1px; } .mt4{ margin-top:4px; } .mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt20{ margin-top:20px; }
.mb1{ margin-bottom:1px; } .mb4{ margin-bottom:4px; } .mb8{ margin-bottom:8px; } .mb12{ margin-bottom:12px; } .mb20{ margin-bottom:20px; }
.ml1{ margin-left:1px; } .ml4{ margin-left:4px; } .ml8{ margin-left:8px; } .ml12{ margin-left:12px; } .ml20{ margin-left:20px; }
.mr1{ margin-right:1px; } .mr4{ margin-right:4px; } .mr8{ margin-right:8px; } .mr12{ margin-right:12px; } .mr20{ margin-right:20px; }

/* Paddings */
.p1{ padding:1px; } .p4{ padding:4px; } .p8{ padding:8px; } .p12{ padding:12px; } .p20{ padding: 25px 20px 20px; }
.pt1{ padding-top:1px; } .pt4{ padding-top:4px; } .pt8{ padding-top:8px; } .pt12{ padding-top:12px; } .pt20{ padding-top:20px; }
.pb1{ padding-bottom:1px; } .pb4{ padding-bottom:4px; } .pb8{ padding-bottom:8px; } .pb12{ padding-bottom:12px; } .pb20{ padding-bottom:20px; }
.pl1{ padding-left:1px; } .pl4{ padding-left:4px; } .pl8{ padding-left:8px; } .pl12{ padding-left:12px; } .pl20{ padding-left:20px; }
.pr1{ padding-right:1px; } .pr4{ padding-right:4px; } .pr8{ padding-right:8px; } .pr12{ padding-right:12px; } .pr20{ padding-right:20px; }

/* Colores de Fondo y Texto */
.bg-primary { background:var(--color-primary) !important; }
.bg-primary-light { background:var(--color-primary-light) !important; }
.bg-primary-dark { background:var(--color-primary-dark) !important; }
.bg-dark { background:var(--color-dark); color:white; }
.bg-red { background:#e53e3e; }
.bg-white { background:#fff;background-color:#fff; }
.degradado{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(45, 55, 72, 0.9) 100%); }

.color-primary { color:var(--color-primary) !important; }
.color-primary-light { color:var(--color-primary-light) !important; }
.color-primary-dark { color:var(--color-primary-dark) !important; }
.color-primary-dark a{ color:var(--color-primary-dark) !important; }
.color-primary-dark ul a{ color:var(--color-primary) !important; }
.color-dark { color:var(--color-dark); }
.color-red { color:#e53e3e !important; }
.color-white { color:#fff; }

.link-white a{color:white;}
.link-white a:hover{color:#e2e8f0; text-decoration: underline;}

/* Otros */
* > .hover{display:none;}
*:hover > .hover{display:block;}
.hideLG{display:none;}
.ancla:before { display: block; content: " "; margin-top: -65px; height: 65px; visibility: hidden; }

/* ========================================================
   3. BOTONES Y PANELES
   ======================================================== */
.btn, button[type="submit"] { font-family:var(--font-principal), sans-serif;background:var(--color-primary);border:none;padding:0 26px;height:44px;min-width:150px;line-height:44px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#ffffff;text-align:center;transition:all 0.3s ease;margin-right:8px;margin-bottom:24px; border-radius:6px; box-shadow: var(--shadow-sm);}
.btn:hover, button[type="submit"]:hover { background:var(--color-primary-dark);color:white; transform: translateY(-1px); box-shadow: var(--shadow-md);}
.btn:last-child, .btn:last-of-type { margin-right:0; }

.btn-primary{ height:40px;line-height:40px;background-color:var(--color-primary);color:white;border:none;padding:0 24px; border-radius:6px;font-size:14px;font-weight:600; box-shadow: var(--shadow-sm); transition: all 0.3s ease; cursor: pointer; text-transform: uppercase;}
.btn-primary:hover{ background-color:var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md);}
.btn-primary-sm{background-color:var(--color-primary);color:white;border:none;padding:4px 12px; border-radius:6px;font-size:12px;font-weight:600; box-shadow: var(--shadow-sm); transition: all 0.2s ease; cursor: pointer;}
.btn-primary-sm:hover{background-color:var(--color-primary-dark); transform: translateY(-1px);}
.btn-gr{ font-size:12px;width:auto;margin-left:8px;background-color:var(--color-primary);color:white;border-radius:12px; padding: 4px 12px; font-weight: 600; box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
.btn-gr:hover{ background-color:var(--color-primary-dark); transform: translateY(-1px);}
.btn-map-home{text-transform:uppercase;color:var(--color-primary);border:2px solid var(--color-primary);background:white;position:relative;border-radius:24px;height:44px;display:inline-block;padding:0 24px; line-height: 40px; font-size:14px;font-weight:700;margin:10px; transition: all 0.3s ease; box-shadow: var(--shadow-sm);}
.btn-map-home:hover{color:white;background:var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md);}

/* Paneles Bootstrap-like */
.panel-primary { border:none; box-shadow: var(--shadow-sm); border-radius: 8px; overflow: hidden; background: #fff;}
.panel-primary > .panel-heading { border:none; background-color:var(--color-primary); color: white; text-align:left; font-size:16px; padding: 15px 20px; font-weight: 600;}
.panel-primary-light { border:none; box-shadow: var(--shadow-sm); border-radius: 8px; overflow: hidden; background: #fff;}
.panel-primary-light > .panel-heading{ border:none; background-color:var(--color-primary-light); color: white; text-align:left; font-size:16px; padding: 15px 20px; font-weight: 600;}
.panel-primary-dark { border:none; box-shadow: var(--shadow-sm); border-radius: 8px; overflow: hidden; background: #fff;}
.panel-primary-dark > .panel-heading { border:none; background-color:var(--color-primary-dark); color: white; text-align:left; font-size:16px; padding: 15px 20px; font-weight: 600;}
.panel-dark { border:none; box-shadow: var(--shadow-sm); border-radius: 8px; overflow: hidden; background: #fff;}
.panel-dark > .panel-heading { border:none; background-color:var(--color-dark); color: white; text-align:left; font-size:16px; padding: 15px 20px; font-weight: 600;}
.panel-red { border:none; box-shadow: var(--shadow-sm); border-radius: 8px; overflow: hidden; background: #fff;}
.panel-red > .panel-heading { border:none; background-color:#e53e3e; color: white; text-align:left; font-size:16px; padding: 15px 20px; font-weight: 600;}
.panel-white { border:1px solid #e2e8f0; box-shadow: var(--shadow-sm); border-radius: 8px; overflow: hidden; background: #fff;}
.panel-white > .panel-heading { border-bottom:1px solid #e2e8f0; background-color:#FFF; color: var(--color-primary); text-align:left; font-size:16px; padding: 15px 20px; font-weight: 600;}

/* ========================================================
   4. FORMULARIOS Y ELEMENTOS DE ENTRADA
   ======================================================== */
input, button, select, textarea { font-family:var(--font-principal), sans-serif; color:var(--color-dark); }
input[type="text"], button,textarea, select, input[type="password"] { -webkit-appearance:none;-moz-appearance:none;appearance:none; }
.bg-primary input[type="text"], .bg-primary textarea, .bg-primary select { background:#fff; }
.input-with-label span { font-family:var(--font-principal), sans-serif;font-size:11px;text-transform:uppercase;color:#4a5568;letter-spacing:1px;font-weight:700;display:block;cursor:default; margin-bottom: 5px;}
input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="time"] { background:#ffffff; border:1px solid #cbd5e0; width:100%; height:46px; padding:0 16px; font-weight:400; margin-bottom:20px; border-radius:6px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); transition: all 0.3s ease;}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="time"]:focus { border-color:var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 67, 101, 0.1); outline:none; }
textarea { width:100%; border:1px solid #cbd5e0; background:#ffffff; margin-bottom:20px; border-radius:6px; padding:16px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); transition: all 0.3s ease; resize: vertical; min-height: 120px;}
textarea:focus { border-color:var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 67, 101, 0.1); outline:none; }

input[type="submit"], button[type="submit"] { height:46px;line-height:46px;border:none;background:var(--color-primary);color:#fff;width:100%;font-size:13px;text-transform:uppercase;font-weight:700;letter-spacing:1px; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-sm);}
.bg-primary input[type="submit"], .bg-primary button[type="submit"] { background:#fff;color:var(--color-primary); }
input[type="submit"]:focus, button[type="submit"]:focus { outline:none; }
input[type="submit"].hollow, button[type="submit"].hollow { background:transparent;border:2px solid var(--color-primary);color:var(--color-primary); }
input[type="submit"].hollow:hover, button[type="submit"].hollow:hover { background:var(--color-primary);color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-md);}

select { height:46px;background:#ffffff;width:100%;border-radius:6px;border:1px solid #cbd5e0;outline:none;padding-left:16px;position:relative;color:#4a5568;transition:all 0.3s ease;cursor:pointer;margin-bottom:20px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23718096%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 12px auto; padding-right: 40px;}
select:focus { border-color:var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 67, 101, 0.1); outline:none; }

/* Radio Buttons y Checkboxes */
input[type=radio] + label, input[type=checkbox] + label{ cursor:pointer; background-color:#f1f5f9;border-radius:20px;height:auto;padding:8px 24px; border: 1px solid #e2e8f0; color: #4a5568; transition: all 0.2s ease; font-weight: 600;}
input[type=radio]:hover + label, input[type=checkbox]:hover + label{ background-color:#e2e8f0; color:var(--color-dark);}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{ background-color:var(--color-primary); color:white; border-color: var(--color-primary); box-shadow: var(--shadow-sm);}
input[type=radio]:disabled + label, input[type=checkbox]:disabled + label{ cursor: not-allowed;background-color:#edf2f7; color:#a0aec0;}
input[type=radio] + label .check, input[type=checkbox] + label .check{ display:none;}
input[type=radio] + label .uncheck, input[type=checkbox] + label .uncheck{ display:block;}
input[type=radio]:checked + label .check, input[type=checkbox]:checked + label .check{ display:block;}
input[type=radio]:checked + label .uncheck, input[type=checkbox]:checked + label .uncheck{ display:none;}
input[type=checkbox]:checked + label img{filter: brightness(0) invert(1);}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance:textfield; }

/* Alertas de Formulario */
.form-error, .form-success { background:#48bb78;padding:15px 20px;width:100%;color:#fff;clear:both;display:block;max-width:700px;position:relative;margin:0 auto 20px;word-break:break-word; border-radius: 6px; font-weight: 500; box-shadow: var(--shadow-sm);}
.form-error { background:#e53e3e; }
.form-error a, .form-success a { display:inline-block;color:#fff; text-decoration: underline;}
.attempted-submit .field-error { outline:1px solid #e53e3e !important; }
.form-loading { border:3px solid #ffffff;border-radius:30px;height:30px;left:50%;opacity:0;margin:0px auto;top:50%;width:30px;-webkit-animation:pulsate 1s ease-out;-webkit-animation-iteration-count:infinite;animation:pulsate 1s ease-out;animation-iteration-count:infinite;z-index:99999; }
button[type="submit"] .form-loading { height:25px;width:25px;display:inline-block;top:9px;position:relative;left:0; }

/* Placeholders */
input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea:-moz-placeholder, textarea::-moz-placeholder, textarea:-ms-input-placeholder, textarea::-ms-input-placeholder { color:#a0aec0; }
.bg-primary input::-webkit-input-placeholder, .bg-primary input:-moz-placeholder, .bg-primary input::-moz-placeholder, .bg-primary input:-ms-input-placeholder, .bg-primary input::-ms-input-placeholder { color:rgba(255,255,255,0.7); }

/* ========================================================
   5. HEADER, LOGO Y NAVEGACIÓN PRINCIPAL
   ======================================================== */
.logo { height:100px; display: flex; align-items: center;}
.logotipo { float: left; padding: 0px; display: block; position: relative; }
.logotipo img { max-height:50px; border: 0px; transition: transform 0.3s ease;}
.logotipo a:hover img { transform: scale(1.02); }

.nav-container { max-width:100%; }
nav { background-color: var(--color-primary-dark) !important; border-bottom: none !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; transition: all 0.3s ease;}

/* Estructura básica de columnas del menú */
.module { display:inline-block; padding:0 24px; }
.module-group { display:inline-block; }
.module.left, .module-group.left { float:left; }
.module.right, .module-group.right { float:right; }
.nav-bar { height:auto; max-height:65px; line-height:65px; }
.nav-bar .module, .nav-bar .module-group { height:65px; }
.nav-bar a { display:inline-block; height:65px; }

/* Opciones principales de la barra */
.menu { width:100%; height:65px; line-height:65px; list-style:none; margin-bottom:0;}
.menu > li { margin-right:24px; float:left; position:relative; }
.menu > li:last-child { margin-right:0; }
.nav-container ul.menu > li > a { color: rgba(255, 255, 255, 0.85) !important; font-weight: 500 !important; padding: 8px 16px !important; border-radius: 6px !important; transition: all 0.2s ease !important; margin-top:15px; height:auto; line-height:normal;}
.nav-container ul.menu > li > a:hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.1) !important; }

/* Flecha y Submenú Desplegable */
.has-dropdown { padding-right:18px; position:relative; }
.nav-container .has-dropdown:after { color: rgba(255, 255, 255, 0.7) !important; top: 22px !important; right: 2px; position:absolute; font-size:11px; content:"\e114"; font-family:'Glyphicons Halflings'; }
.nav-container ul.menu > li > ul { position:absolute; z-index:99; opacity:0; visibility:hidden; width:220px; background: #ffffff !important; border-radius: 8px !important; box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; border: 1px solid #e2e8f0 !important; padding: 8px 0 !important; margin-top: 5px !important; transition:all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transform:translate3d(0, 15px, 0); }
.nav-container ul.menu > li:hover > ul { opacity:1; visibility:visible; transform:translate3d(0, 0px, 0); }
.nav-container ul.menu > li > ul > li { position:relative; width:100%; border:none !important; line-height:normal;}

/* Enlaces dentro del desplegable (Cualquier link o link dentro de form) */
.nav-container ul.menu > li > ul > li a,
.nav-container ul.menu > li > ul > li form a { color: #1a202c !important; font-weight: 600 !important; font-size: 13px !important; background-color: transparent !important; padding: 10px 20px !important; margin: 0 !important; display: block !important; text-decoration: none !important; transition: all 0.2s ease !important; text-shadow: none !important; height:auto; line-height:normal;}
.nav-container ul.menu > li > ul > li a i,
.nav-container ul.menu > li > ul > li a span,
.nav-container ul.menu > li > ul > li form a i,
.nav-container ul.menu > li > ul > li form a span { color: var(--color-primary) !important; margin-right: 8px !important; font-size: 15px !important; }
.nav-container ul.menu > li > ul > li a:hover,
.nav-container ul.menu > li > ul > li form a:hover { color: var(--color-primary-dark) !important; background-color: #f8fafc !important; padding-left: 25px !important; }

/* Iconos especiales (Redes / Top) */
.menu_sup{ text-align:right; line-height:20px; height:20px; margin-top: 10px;}
.menu_sup a{ margin-top:0px; height:100%; font-size:11px; }
.menu_sup a.redes{ background-color:#edf2f7; color: var(--color-primary); border-radius: 50%; width: 25px; height: 25px; line-height: 25px;}
.menu_sup a.redes:hover{ background-color:var(--color-primary); color: white;}
.module.widget-handle { border-left:1px solid rgba(0,0,0,0.1); padding:0 24px; cursor:pointer; position:relative;}
.module.widget-handle i { font-size:24px; line-height:65px; color: white !important; transition:all 0.3s ease; }
.module.widget-handle:hover i { transform: scale(1.1); }

/* ========================================================
   6. PANTALLA DE LOGIN
   ======================================================== */
.login-bg { padding: 30px 20px; min-height: calc(100vh - 153px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-card { background: #ffffff; width: 100%; max-width: 450px; margin: 0 auto; padding: 40px 30px; border-radius: 12px; box-shadow: var(--shadow-lg); text-align: left; border: 1px solid #e2e8f0; }
.login-card input[type="text"], .login-card input[type="password"] { background: #f8fafc; border: 1px solid #cbd5e0; border-radius: 8px; height: 48px; padding: 10px 16px; margin-bottom: 20px; }
.login-card input[type="text"]:focus, .login-card input[type="password"]:focus { background: #ffffff; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 67, 101, 0.1); }
.login-card button[type="submit"] { width: 100%; height: 50px; background-color: var(--color-primary); color: #ffffff; border: none; border-radius: 8px; margin-top: 20px; margin-right: 0; font-size: 15px; box-shadow: 0 4px 6px rgba(56, 67, 101, 0.2); }
.login-card button[type="submit"]:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 8px rgba(56, 67, 101, 0.3); }


/* ========================================================
   7. CALENDARIO, TAREAS Y FILTROS
   ======================================================== */
/* Barra de Fechas y Navegación del Calendario */
.btn-filtro { background-color: #f1f5f9; color: var(--color-primary); padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; transition: all 0.2s ease;}
.btn-filtro:hover { background-color: var(--color-primary); color: #ffffff !important; border-color: var(--color-primary);}
.btn-nav-fecha { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: #f8fafc; color: var(--color-primary); border-radius: 8px; border: 1px solid #e2e8f0; transition: all 0.2s ease; font-size: 14px;}
.btn-nav-fecha:hover { background-color: var(--color-primary); color: #ffffff !important; border-color: var(--color-primary);}
.input-nav-fecha { width: 130px !important; height: 36px !important; margin: 0 !important; text-align: center; border-radius: 8px !important; font-weight: 600; color: var(--color-primary-dark) !important; cursor: pointer; box-shadow: none !important; background-color: #ffffff;}

/* Cuadrícula del Calendario */
.calendario_desglose{ border:1px solid #e2e8f0;background-color:#fff;padding:10px;vertical-align:top; border-radius: 8px; box-shadow: var(--shadow-sm);}
.calendario_desglose > .dia_tit{display:inline-block;text-align:center;background-color:#f1f5f9;padding:8px 0;width:13.8%;margin:0.2%; color: var(--color-dark); font-weight: 600; border-radius: 4px;}
.calendario_desglose > .dia{position:relative;display:inline-block;text-align:center;background-color:#fff;padding:5px;height:85px;width:13.8%;border:1px solid #e2e8f0;margin:0.2%;vertical-align:top;line-height:16px; border-radius: 4px; transition: all 0.2s ease;}
.calendario_desglose > .dia:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-light); transform: translateY(-2px); z-index: 2;}
#div_por_dia { 
    flex: 1 1 auto;            /* Ocupa la altura restante del flex padre (ver sección 15) */
    min-height: 0;             /* CRÍTICO en flexbox: permite que el hijo se recorte */
    background-color: #ffffff; 
    overflow: auto !important; /* Mantiene scroll vertical Y horizontal cuando hace falta */
}

/* 1. Ocultar el botón de filtros duplicado correctamente */
.hideLG.btn-filtro { display: none !important; }
@media all and (max-width: 790px) {
    .hideLG.btn-filtro { display: flex !important; }
    .hideSM.btn-filtro { display: none !important; }
}

/* 2. Calendario desplegable sólido y opaco (Datepicker) */
#ui-datepicker-div, .ui-datepicker.ui-widget-content {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border-radius: 8px !important;
    z-index: 999999 !important; /* Muy alto para que pase por encima de las tareas */
    padding: 10px !important;
}

/* 3. Hacer los botones un poco más finos */
.btn-nav-fecha { height: 32px !important; width: 32px !important; }
.input-nav-fecha { height: 32px !important; }
.btn-filtro { padding: 4px 12px !important; }
.fecha_dia{ position:absolute; top:5px; left:5px; font-weight: 600; color: var(--color-dark);}

/* Tareas del Calendario (Diseño 3D Moderno) */
.cal_tarea_div { 
    position: relative;
    display: inline-block;          /* igual que las vacías (antes inline-table) */
    vertical-align: top;
    width: 200px !important;         /* mismo ancho exacto que las vacías */
    box-sizing: border-box !important; /* borde y padding NO desplazan el carril */
    margin: 0 !important;            /* sin margin lateral: columnas exactas */
    padding: 4px 6px !important;
    z-index: 100;
    font-size: 11px !important; line-height: 1.3 !important; text-align: center; color: #ffffff;
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    white-space: normal !important;  /* evita heredar nowrap del contenedor de fila */
    word-break: break-word !important;
}
/* Cajas vacías de relleno: idénticas en caja y flujo a las reales para alinear */
.cal_tarea_div:not([id]), .cal_tarea_vacia {
    width: 200px !important;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: transparent !important; background-color: transparent !important;
    box-shadow: none !important;
    border: 1px solid transparent !important; /* borde fantasma: mismo ancho que las reales */
    pointer-events: none !important;
}
.cal_tarea_div:hover { box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important; transform: translateY(-2px); z-index: 110; filter: brightness(1.08); cursor: pointer; }
.cal_tarea_div a, .cal_tarea_div span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); font-weight: 600; text-decoration: none; }

/* Invisibilidad Cajas Vacías de Relleno */
.cal_tarea_div:not([id]), .cal_tarea_vacia {
    width: 200px; display: inline-block; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; pointer-events: none !important;
}
/* Colapsa el espacio en blanco entre tarjetas inline-block -> alineación perfecta */
#div_por_dia [id^="detalle-"] > div { 
    font-size: 0 !important; 
    white-space: nowrap;        /* impide que un carril salte de línea */
}
#div_por_dia [id^="detalle-"] > div > * { 
    font-size: 11px;            /* restaura el tamaño de letra en el contenido */
}

/* ========================================================
   8. COMPONENTES VARIOS (Bloques, Listados, Galerías)
   ======================================================== */
.page-title{ padding:15px 20px; color:#ffffff;background-color:var(--color-primary);font-weight:bold; box-shadow: var(--shadow-sm);}
.page-title h1{ font-size:22px;margin-bottom:0px;margin-left:50px; color: white;}
.tit-primary{font-size:32px;margin:40px auto 30px;padding-bottom:15px;border-bottom:3px solid var(--color-primary);display:inline-block; color: var(--color-dark); font-weight: 700;}
.tit-bloque-primary{font-size:28px;font-weight:600;color:white;background:var(--color-primary);padding:20px 30px;line-height:36px; border-radius: 8px 8px 0 0; margin-bottom: 0; box-shadow: var(--shadow-sm);}
.titular{ background-color:var(--color-primary-light);color:white;font-size:22px; font-weight: 600;}
.titular > b{display:inline-block;padding:15px 20px;}
.titular > div{width:100%;height:180px;background-size:cover;background-position:center;vertical-align:bottom;}
.titular > i{ position:relative; top:-45px; margin-left: 39px; width: 0px; height: 0px; border-style: solid; border-width: 0 12.5px 12px 12.5px; border-color: transparent transparent var(--color-primary-light) transparent; }

/* Items, Cards y Listados */
.item{ min-height:250px; padding:15px; margin:0.5%; width:98%; display:inline-table; border-radius:8px; vertical-align:top; background: #fff; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0;}
.item_cat{ min-height:250px; padding:15px; margin:1%; width:98%; display:inline-table; border-radius:8px; vertical-align:top; background: #fff; box-shadow: var(--shadow-sm); transition: all 0.3s ease; border: 1px solid #e2e8f0;}
.item_cat:hover{ cursor:pointer; box-shadow: var(--shadow-lg); transform: translateY(-3px);}
.item_cat.item3xlinea{ padding:0%;margin:1%;width:31.3%; border:none; border-radius:8px; background-size:cover; overflow: hidden;}
.item_cat.item3xlinea h3, .item_cat.item4xlinea h3{ padding:15px;font-size:18px;margin-top:160px;background-color:rgba(255,255,255,0.95);color:var(--color-primary-dark);font-weight:bold; transition: all 0.3s ease;}
.item_cat.item3xlinea:hover h3, .item_cat.item4xlinea:hover h3{ background-color:var(--color-primary);color:white;}
.item_cat.item3xlinea h5, .item_cat.item4xlinea h5{ background-color:rgba(255,255,255,0.95);color:var(--color-dark);font-weight:bold;}
.item_cat.item4xlinea.item_imagen{ height:200px;min-height:200px;}
.item_cat.item4xlinea{ padding:0%;margin:1%;width:23%; border:none; border-radius:8px; background-size:cover; overflow: hidden;}

.item_imagen { height:220px;overflow:hidden;background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:6px;margin-bottom:15px; transition: transform 0.5s ease;}
.item2xlinea, .item3xlinea, .item4xlinea, .item5xlinea{ background: #fff; border-radius: 8px; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; transition: all 0.3s ease;}
.item2xlinea:hover .item_imagen, .item3xlinea:hover  .item_imagen, .item4xlinea:hover .item_imagen, .item5xlinea:hover .item_imagen{ transform: scale(1.05);}
.item2xlinea:hover, .item3xlinea:hover, .item4xlinea:hover, .item5xlinea:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: #cbd5e0;}

.item_desc{font-size:14px;color:#718096;line-height:1.6;text-align:left;font-weight:400;}
.item2xlinea h5, .item3xlinea h5, .item4xlinea h5, .item5xlinea h5{ padding:5px 0; color: var(--color-primary-dark); font-size: 16px;}
.item2xlinea{ padding:15px;margin:1%;width:48%;}
.item3xlinea{ padding:15px;margin:1%;width:31.3%;}
.item4xlinea{ padding:15px;margin:1%;width:23%;}
.item5xlinea{ padding:15px;margin:1%;width:18%;}
.item_imagen_detalle { float: left; width:100%;height:450px;overflow:hidden;background-repeat:no-repeat; background-size: cover; background-position: center center!important; display: block; position: relative; border-radius: 8px; box-shadow: var(--shadow-sm);}
.itemCarro{ border:1px solid #e2e8f0;padding:15px;text-align:right; border-radius: 8px; box-shadow: var(--shadow-sm); background: #fff; margin-bottom: 15px;}
.itemCarro input[type=text],.itemCarro input[type=number],.itemCarro input[type=time]{ height:35px; margin-bottom: 0;}

/* Bloques de Columnas */
.block25{display:inline-block;width:22%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;text-align: left;}
.block33{display:inline-block;width:30.3%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
.block50{display:inline-block;width:47%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
.block75{display:inline-block;width:72%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
.block100{display:inline-block;width:97%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
.bloques_cuatro{width:23%;margin:1%;display:inline-block;vertical-align:top;min-height:290px;}

/* Componentes Interactivos */
.PDIactivo { transition: all 0.3s ease; border-radius: 8px; overflow: hidden; border: 1px solid transparent;}
.PDIactivo:hover{ background-color:var(--color-primary-light); color: white; transform: translateY(-2px); box-shadow: var(--shadow-md);}
.PDIactivo:hover h5{ background-color:transparent; color: white;}

.boton, .boton_pq{ margin-top:10px;color:white; background: var(--color-primary-light); line-height:40px;padding:0 12px;border-radius:20px;width:40px;height:40px;overflow:hidden; display: flex; align-items: center; white-space: nowrap; transition: background 0.3s ease; box-shadow: var(--shadow-sm); cursor: pointer;}
.boton:hover{ background-color:var(--color-primary);width:180px;animation-name: abrirboton; animation-duration: 0.4s;animation-timing-function: ease-out;animation-iteration-count:1;}
.boton_pq:hover{ background-color:var(--color-primary);width:140px;animation-name: abrirboton_pq; animation-duration: 0.4s;animation-timing-function: ease-out;animation-iteration-count:1;}
@keyframes abrirboton { from {width: 40px;} to {width:180px;} }
@keyframes abrirboton_pq { from {width: 40px;} to {width:140px;} }

/* Etiquetas y Elementos Extras */
.placeholders{color:white;background-color:var(--color-primary-dark);position:absolute;padding:2px 8px;margin:5px; border-radius:5px; font-weight: 600; font-size: 11px; letter-spacing: 0.5px;}
.labelGris{background:#f8fafc;width:100%;padding:12px 15px;cursor:pointer; border-radius: 6px; border: 1px solid #e2e8f0; transition: all 0.2s ease;}
.labelGris:hover{background:#edf2f7; border-color: #cbd5e0;}
.labelHora{ background-color:#f8fafc;padding:6px 15px; border-radius: 20px; border: 1px solid #e2e8f0; font-weight: 600; transition: all 0.2s ease; color: #4a5568;}
.labelHora:hover{ background-color:var(--color-primary);cursor:pointer;color:white; border-color: var(--color-primary);}

/* Galerías, Carruseles e Imágenes */
.carousel{ width:50%; height:300px; overflow:hidden; border-radius: 8px; box-shadow: var(--shadow-md);}
.carousel-indicators{ top:auto; bottom:15px; left:0; right:0; text-align:center; }
.carousel-indicators li{ background-color:rgba(255,255,255,0.5); border:none; width: 10px; height: 10px; margin: 0 4px;}
.carousel-indicators li.active{ background-color:white; transform: scale(1.2);}
.item-txt{ position:absolute;left:5%;top:auto; bottom:15%; color:white; }
.item-txt h1{color:var(--color-primary-dark);background-color:rgba(255,255,255,0.95);margin-bottom:5px;padding:8px 15px; border-radius: 4px; box-shadow: var(--shadow-sm);}
.item-txt h2{color:#FFF;background-color:var(--color-primary);padding:6px 15px; border-radius: 4px; font-size: 16px; font-weight: normal;}

#galeria{ background-size:contain;background-repeat:no-repeat;background-position:center center;vertical-align:top; }
#galeria_desc{ text-align:center;color:var(--color-primary-dark);font-weight:bold;font-size:18px; margin-top: 15px;}
#sig, #ant{ display:inline-block;width:50%;height:100%;opacity:0;background-color:rgba(0,0,0,0.4);vertical-align:top;font-size:50px; color: white; transition: all 0.3s ease;}
#ant i,#sig i{margin-top:50%;}
#ant{padding-left:5%; text-align: left; background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}
#sig{padding-right:5%; text-align: right; background: linear-gradient(to left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}
#galeria:hover #sig, #galeria:hover #ant { opacity: 1; }
#sig:hover, #ant:hover{ color: var(--color-primary-light); cursor: pointer;}
#sig_listado,#ant_listado,.sig_listado,.ant_listado{ margin-top:-50px;padding-top:50px;display:inline-block;width:25%;height:100%;opacity:0.2;vertical-align:top;font-size:50px; color: white; transition: all 0.3s ease;}
#detalle_listado, .detalle_listado{ margin-top:-50px;display:inline-block;width:50%;height:100%;opacity:0.1;vertical-align:top;font-size:50px;}
#ant_listado i,#sig_listado i,.ant_listado i,.sig_listado i{margin-top:50%;}
#ant_listado, .ant_listado{padding-left:2%;text-align:left; background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);}
#sig_listado,.sig_listado{padding-right:2%;text-align:right; background: linear-gradient(to left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);}
#sig_listado:hover, #ant_listado:hover, .sig_listado:hover, .ant_listado:hover{ opacity:1; cursor: pointer; color: var(--color-primary-light);}

.thumb { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;}
.thumb img { width:80px; height: 80px; object-fit: cover; border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-sm);}
.thumb img:hover { border-color: var(--color-primary); transform: scale(1.05);}
.img100 img {max-width:100%; border-radius: 8px;}

.fotosTop{overflow:hidden;height:460px; border-radius: 12px; box-shadow: var(--shadow-md); margin-bottom: 30px;}
.fotoTop{border-left:2px solid #fff; background-position:center center;background-size:cover;height:100%;width:50vw;display:inline-block;}
.fotosTopPDI{overflow:hidden;height:400px; border-radius: 12px; box-shadow: var(--shadow-md);}
.fotoTopPDI{border-left:2px solid #fff; background-position:center center;background-size:cover;height:400px;width:auto;display:inline-block;}

/* Noticias, Comentarios y Extras */
.noticias_comentario{ margin-left:3px; background-color:#fff; border-radius:8px; padding:15px; margin-bottom:10px; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; transition: all 0.3s ease;}
.noticias_comentario > .noticias_comentario:hover{ box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.noticias_comentario > .noticias_comentario{ border-left:4px solid var(--color-primary-light); background: #f8fafc; margin-top: 10px;}
.noticias_comentario h4{ color:var(--color-primary-dark); padding:0px; margin-bottom:5px; font-size: 15px;}
.noticias_comentario_detalle {padding:0px; color: #4a5568;}

.txt_anuncio{ position:relative;background-color:#ffffff;overflow:hidden; max-height:140px; cursor:zoom-in; transition: all .5s ease-out; border-radius: 8px; padding: 15px; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; }
.txt_anuncio > .content_anuncio{ margin-top:-10px;  }
.txt_anuncio:before{content:"Leer más";color:white;position:absolute;left:50%; bottom: 15px; transform: translateX(-50%); background-color:var(--color-primary);padding:6px 15px;border-radius:20px;box-shadow: 0 -15px 30px 15px #ffffff; z-index: 10; font-weight: 600; font-size: 13px; transition: all 0.3s ease;}
.txt_anuncio:hover:before{background-color:var(--color-primary-dark); transform: translateX(-50%) translateY(-2px);}
.txt_anuncio:hover{ box-shadow: var(--shadow-md);  }
.txt_activo{overflow:visible; max-height:none; cursor:zoom-out; transition: all .5s ease-out; }
.txt_activo:before{content:none;}
.txt_activo > .content_anuncio{ margin-top:0px;  }

.SUB{padding:15px;padding-bottom:10px;text-align:center;background-color:white; border-bottom: 1px solid #e2e8f0; margin-bottom: 20px;}
.SUB a{ background-color:#f8fafc;padding:10px 20px;margin-right:5px;color:#4a5568;border-radius:8px 8px 0 0; border: 1px solid #e2e8f0; border-bottom: none; font-weight: 600; transition: all 0.2s ease; display: inline-block;}
.SUB a:hover{background-color:#edf2f7;color:var(--color-primary);}
.SUB a.SUBactivo{ background-color:var(--color-primary);color:white; border-color: var(--color-primary);}

.menucats{ padding:10px; }
.menucats a{ font-size:16px;color:#718096;font-weight:600; padding: 5px 10px; border-radius: 6px; transition: all 0.2s ease;}
.menucats a:hover { background: #edf2f7; color: var(--color-primary);}

.menuServicios{height:85vh;background-color:white;position:fixed;display:inline-block;width:25%;vertical-align:top;padding:20px;z-index:999; border-right: 1px solid #e2e8f0; box-shadow: 2px 0 10px rgba(0,0,0,0.05);}
.menuServiciosDentro{ max-height:95%;overflow-y:auto; padding-right: 10px;}
.menuServiciosDentro::-webkit-scrollbar, .customScroll::-webkit-scrollbar { width: 8px; }
.menuServiciosDentro::-webkit-scrollbar-track, .customScroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px;}
.menuServiciosDentro::-webkit-scrollbar-thumb, .customScroll::-webkit-scrollbar-thumb { background-color: #cbd5e0; border-radius: 4px;}
.menuServicios a > div{color:#4a5568;padding:10px 15px;margin-bottom:5px; border-radius: 6px; transition: all 0.2s ease;}
.menuServicios a > div:hover{color:var(--color-primary);background:#f1f5f9; transform: translateX(5px);}
.listServicios{display:inline-block;width:100%;vertical-align:top;padding-left:27%;min-height:82vh; padding-top: 20px;}
.detailServicios{display:inline-block;width:100%;vertical-align:top;padding-left:27%; padding-top: 20px;}

.desglose{ padding:12px 15px;border-bottom:1px solid #e2e8f0;background-color:#fff;}
.desglose > big:last-child{ float:right; font-weight:700;color:var(--color-primary-dark); font-size: 16px;}
.pvp{position:absolute;bottom:5px;right:5px;font-size:12px;background-color:var(--color-primary);padding:2px 6px;color:white; border-radius: 4px; font-weight: 600;}
.pvp_especial{background-color:var(--color-secondary);}

.paginacion{text-align:center;margin-top:30px;}
.paginacion .paginacion_sel{ background-color:var(--color-primary-dark); color: white; min-width:40px;height:40px; border-radius: 6px;}
.paginacion button{text-align:center; border:0px; background-color:white; color:var(--color-primary); margin-left:4px; min-width:40px;height:40px; border-radius: 6px; box-shadow: var(--shadow-sm); font-weight: 600;}
.paginacion button:hover{ background-color:var(--color-primary-light); color: white;}
.pagination { margin:0; display: flex; justify-content: center; gap: 5px;}
.pagination li { font-family:"Lato", Helvetica, Arial, sans-serif; display: inline-block;}
.pagination li a { width:36px;height:36px;padding:0;text-align:center;line-height:36px; color:#4a5568;font-weight:600; background: white; border-radius: 6px; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; transition: all 0.2s ease;}
.pagination li a:hover, .pagination li.active a, .pagination li.active:hover a { background:var(--color-primary);color:#fff;border-color:var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md);}

/* Top Right Fixed Items */
.item-fixed-top-right{ position:relative; right:15px;top:10px;z-index:1000; }
.item-fixed-top-right > div, .item-fixed-top-right > form{ height:38px;float:right;margin-left:8px;padding:4px 15px;background-color:var(--color-primary);color:white;border-radius:20px; box-shadow: var(--shadow-sm);}
.item-fixed-top-right > div { border:1px solid #e2e8f0; background-color:#ffffff; color:var(--color-primary);} 
.item-fixed-top-right > div:hover{ background-color:var(--color-primary);color:white;}
.item-fixed-top-right > form > input, .item-fixed-top-right > form > button{ border:0px;background-color:transparent;display:inline-block; padding:2px;margin:0px;height:30px;width:auto; color: white;}
.item-fixed-top-right > form > input::placeholder { color:rgba(255,255,255,0.7); }

/* Búsqueda */
.buscador{ padding:10% 15%; height:80vh; background-attachment: fixed; display: flex; align-items: center; justify-content: center;}
.buscador > form{ z-index:99; background-color:rgba(255,255,255,0.95); border-radius:12px; padding:10px 20px; width: 100%; max-width: 800px; box-shadow: var(--shadow-lg); display: flex; align-items: center;}
.buscador > form > input[type=text], .form_busca_top > input[type=text]{ flex-grow: 1; background-color:transparent; color:var(--color-dark); margin-bottom:0px; border:0px; font-size:24px; height: 60px; outline: none;}
.buscador > form > input::placeholder, .form_busca_top > input::placeholder{ color:#a0aec0; }
.buscador > form > button, .form_busca_top > button{ width:60px; height:60px; background-color:var(--color-primary); color:white; margin-bottom:0px; border:0px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 24px;}
.buscador > form > button:hover, .form_busca_top > button:hover { background-color: var(--color-primary-dark); transform: scale(1.05);}

.form_busca_top{ background-color:white; border-radius:20px; padding:2px 15px; height:45px; margin-top:5px; display:none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); border: 1px solid #e2e8f0;}
.form_busca_top > input[type=text]{ height:40px; font-size: 16px;}
.form_busca_top > button{ height: 35px; width: 35px; border-radius: 5px; font-size: 16px;}

.home_form{padding-top:80px;padding-left:100px;height:400px;}

.ion-primary120{margin:20px auto;border-radius:50%;padding-top:25px;font-size:60px;height:120px;width:120px;background-color:var(--color-primary-light);color:white; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; padding: 0;}

/* Tarjetas 3D */
.container { position: relative; float: left; width: 22%; height: 240px; margin: 1%; perspective: 1000px; }
.card { width: 100%; height: 100%; position: absolute; cursor: pointer; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
.card.flipped { transform: rotateY( 180deg ); }
.card .front, .card .back { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; width: 100%; color: white; text-align: center; font-size: 2em; padding: 20px; position: absolute; backface-visibility: hidden; border-radius: 12px; box-shadow: var(--shadow-md); }
.card .back { width: 100%; font-size: 15px; line-height: 1.6; background: var(--color-primary); transform: rotateY( 180deg ); }
.card .front { background: var(--color-primary-light); }

/* JQuery UI Extras */
.ui-widget.ui-widget-content{border:0px;width:100%;max-width:280px; background: transparent;}
.ui-datepicker-header, .ui-datepicker-header select{ background-color:transparent;border:0px;color:var(--color-primary-dark);font-size:15px; font-weight: bold;}
.ui-datepicker-next, .ui-datepicker-prev{ cursor:pointer;background-color:white;margin-top:10px;border:none; border-radius: 4px; box-shadow: var(--shadow-sm);}
.ui-accordion-content.ui-widget-content,.ui-tabs.ui-widget-content{max-width:100%; background: #fff;}
.ui-accordion-header-active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{ background:var(--color-primary);border-color:var(--color-primary); color: white;}

.select2{ max-width: 100%;}
.select2-container--open { z-index: 99999999999; }

.formTarea h5{margin-bottom:10px;margin-top:20px; font-size: 16px;}
.notasDesplegable{line-height:16px;font-size:13px;height:55px;overflow:hidden; color: #4a5568;}
.notasDesplegable>*{margin-bottom:0px;}

.girando, .giro-infinito{ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; display:inherit; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.subtxt{ font-size:24px;opacity:0;background-color:rgba(56, 67, 101, 0.9);color:white;padding:15px; border-radius: 8px; font-weight: 600;}
.itemNEW:hover > .subtxt{ opacity:1;animation-name: hoverCat; animation-duration: 0.4s;animation-timing-function: ease-out;}
@keyframes hoverCat { from {opacity:0;font-size:18px;} to {opacity:1;font-size:24px;} }

/* ========================================================
   9. POPUPS Y MODALES
   ======================================================== */
.visor{ max-width:100vw;max-height:100vh;width:100vw;height:100vh;background-color:rgba(14,31,84,0.9);position:fixed;top:0px;left:0px;z-index:999999999999; backdrop-filter: blur(5px);}
.visor_cerrar{ border:none; color:white; padding:8px 20px; background-color:#e53e3e; z-index:9999999999999; border-radius: 20px; font-weight: bold; position: absolute; top: 20px; right: 20px; cursor: pointer; box-shadow: var(--shadow-md);}
.visor > iframe{ width:100vw;height:100%;border:0px;}

.overlay { background: rgba(14,31,84,0.7); backdrop-filter: blur(4px); position: fixed; top: 0; bottom: 0; left: 0; right: 0; align-items: center; justify-content: center; display: flex; visibility: hidden; z-index:999999999999999999; opacity: 0; transition: all 0.3s ease; }
.overlay.active { visibility: visible; opacity: 1; }

.popup { 
    background: #ffffff; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
    border-radius: 12px; 
    padding: 25px; 
    width: 95%; 
    max-width: 850px; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Importante para pasar el control al hijo */
    transform: scale(0.8) translateY(20px); 
    opacity: 0; 
}
.infotarea-wrapper {
    overflow-y: auto !important;
    max-height: 75vh;
    padding-right: 10px;
}
/* Forzar al contenedor nativo de tu plantilla a que no genere scrolls fantasmas */
.ui-dialog, .ui-widget-content, .visor, .overlay {
    overflow: hidden !important; 
}

/* Personalizar la única barra de scroll de la modal para que sea elegante */
.popup::-webkit-scrollbar { width: 6px; }
.popup::-webkit-scrollbar-track { background: transparent; }
.popup::-webkit-scrollbar-thumb { background-color: #cbd5e0; border-radius: 4px; }
.popup.active { transform: scale(1) translateY(0); opacity: 1; }

.popup .btn-cerrar-popup { font-size: 24px; line-height: 24px; display: block; text-align: right; transition: .3s ease all; color: #a0aec0; cursor: pointer; margin-bottom: -15px; position: relative; z-index: 10; }
.popup .btn-cerrar-popup:hover { color: #e53e3e; }
.popup h3 { font-size: 32px; font-weight: 700; margin-bottom: 15px; opacity: 0; color: var(--color-primary-dark); }
.popup h4 { font-size: 22px; font-weight: 400; margin-bottom: 15px; opacity: 0; color: #4a5568; }
.popup form .contenedor-inputs { opacity: 0; }
.popup form .btn-submit { padding: 0 24px; height: 46px; line-height: 46px; border: none; color: #fff; background: var(--color-primary); border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .3s ease all; box-shadow: var(--shadow-sm);}
.popup form .btn-submit:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md);}

.popup.active h3 { animation: entradaTitulo .6s cubic-bezier(0.165, 0.84, 0.44, 1) .3s forwards; }
.popup.active h4 { animation: entradaSubtitulo .6s cubic-bezier(0.165, 0.84, 0.44, 1) .4s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs .8s linear .5s forwards; }

@keyframes entradaTitulo { from { opacity: 0; transform: translateY(-20px); } to { transform: translateY(0);opacity: 1; } }
@keyframes entradaSubtitulo { from { opacity: 0; transform: translateY(20px); } to { transform: translateY(0); opacity: 1; } }
@keyframes entradaInputs { from { opacity: 0; } to { opacity: 1; } }

/* ========================================================
   10. PIE DE PÁGINA (Footer)
   ======================================================== */
.pie{ background-color:var(--color-primary-dark);padding:0 40px;font-size:16px;line-height:30px;font-weight:300;}
.pie *{color:#e2e8f0;}
.pie > .row{ padding-top:30px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.1);}
.pie a{ font-weight:400;color:white;}
.pie a:hover{ color: #a0aec0;}
.pie h4, .pie h5{font-weight:600; color: white;}

/* ========================================================
   11. MEDIA QUERIES (ADAPTACIONES A DISPOSITIVOS MÓVILES)
   ======================================================== */

@media all and (max-width:990px) { 
	.nav-container ul.menu > li > a:hover,
		.nav-container ul.menu > li > a:active,
		.nav-container ul.menu > li > a:focus {
			color: var(--color-primary) !important; /* Azul corporativo */
			background-color: #f8fafc !important; /* Gris súper clarito de fondo */
		}
    /* Lo mismo para cuando tocas una opción de un submenú (Alojamientos, Tareas...) */
    .nav-container ul.menu > li > ul > li a:hover,
    .nav-container ul.menu > li > ul > li form a:hover {
        color: var(--color-primary-dark) !important;
        background-color: #edf2f7 !important;
    }
    .logo { height:60px; }
    nav.fixed { position:absolute !important;opacity:1 !important;visibility:visible !important; }
    nav.outOfSight { transform:translate3d(0, 0px, 0) !important;-webkit-transform:translate3d(0, 0px, 0) !important;-moz-transform:translate3d(0, 0px, 0) !important;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease; }
    .nav-bar,.nav-bar .module-group,.nav-bar .module { height:auto;overflow:hidden; }
    .nav-bar .module { padding:0 16px; }
    .nav-bar .module-group { width:100%;padding:0; background: white; }
    .nav-bar .module-group .module { display:block;float:none;width:100%; }
    
    .menu { height:auto; padding: 10px 0;}
    .menu.inline-block { width:100%; }
    .nav-container ul.menu > li > a { height:auto;line-height:24px;padding:12px 20px !important; border-bottom: 1px solid #f1f5f9; color: var(--color-dark) !important;}
    .menu > li { line-height:24px;float:none;display:block;width:100%;max-width:100%; margin-right: 0;}
    
    .nav-container ul.menu > li > ul { position:relative;width:100%;opacity:1;visibility:visible;transform:none; left:0; box-shadow: none !important; border: none !important; border-radius: 0 !important; background: #f8fafc !important; padding: 0 !important;}
    .menu > li > ul { display:none; }
    .nav-container .has-dropdown:after { content:"\e114" !important; color:#a0aec0 !important;}
    .menu > li > ul > li > ul { left:0;display:none;padding:0; }
    .nav-container ul.menu > li > ul > li a { padding:12px 20px !important; }
    .has-dropdown .has-dropdown li { padding-left:18px; }
    .has-dropdown { padding-right:0; }
    
    .toggle-sub > ul, .toggle-sub .mega-menu ul { display:block !important; }
    .module.widget-handle { border-left:none; line-height:60px;min-height:60px; }
    .module.widget-handle .menu { line-height:60px; }
    .module.widget-handle .menu li { line-height:60px; }
    .module.widget-handle i { line-height:60px; color: var(--color-dark) !important;}
    .bg-primary .module.widget-handle i { color: white !important;}
    .module.widget-handle .title { display:inline-block;position:relative;bottom:3px;margin-left:8px; }
    .widget-handle .function { width:100%;position:relative;opacity:1;transform:translate3d(0, 0px, 0);-webkit-transform:translate3d(0, 0px, 0);-moz-transform:translate3d(0, 0px, 0);visibility:visible;margin-top:0;display:none;box-shadow:none !important; }
    .toggle-widget-handle .function { display:block !important; }
    .widget-handle .cart .label { width:22px;height:22px;font-size:12px;line-height:22px;top:18px; }
    .mobile-toggle { border: none !important; }
    .mobile-toggle i { line-height:60px !important; }
}

@media all and (max-width: 790px) {
	.infotarea-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .infotarea-content > h5,
    .infotarea-content > .infotarea-box,
    .infotarea-grid-2 {
        grid-column: span 1 !important;
    }
    .block25.carru{display:inline-block;width:47%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
    .block25.carru > h5 {font-size:14px;line-height:18px;}
    .block25.mantenerSM{display:inline-block;width:32%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
    .block75.mantenerSM{display:inline-block;width:62%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
    .block25.carru > div {height:120px;}
    .block25, .block33, .block50, .block75, .block100{display:inline-block;width:97%;margin:1.2% 1.5%;font-size:16px;vertical-align:top;}
    .btn-map-home{ position:static; margin-left:0px !important;}
    .hideLG{display:inherit;}
    .hideSM{display:none;}
    .item_cat.item3xlinea{ width:98%;}
    .item_cat.item3xlinea > h3{ font-size:16px;}
    .ui-widget.ui-widget-content{ min-width:200px;max-width: 98%;margin:0 auto;}
    .home_form{padding-top:40px;padding-left:0px;}
    .home_form_dentro{margin:20px auto;}
    .item_imagen_detalle{height:250px;}
    
    .fotosTop{height:250px;}
    .fotoTop{width:100vw;}
    .fotosTopPDI{height:250px;}
    .fotoTopPDI{height:250px;}

    .titular{ font-size:20px;}
    .titular > div{height:200px;background-position:center;}
    .titular > i{ top:-55px;}
    
    .calendario_desglose > .dia{ height:50px;}
}

@media all and (max-width: 690px) { 
    .cont-titular { height:120px; } 
    .titular span { font-size: 24px; padding-left: 20px;}
    .carousel{ width:100%; height:200px; overflow:hidden; }
    .thumb img { width:60px; height: 60px;}
    .item-txt{ top:auto; bottom: 10px; }
    .item-txt h1{ font-size:18px; padding: 5px 10px;}
    .item-txt h2{ font-size:14px; padding: 5px 10px;}
}

/* ========================================================
   12. PANEL LATERAL DE FILTROS (OFFCANVAS MODERNO)
   ======================================================== */
#filtros_left {
    position: fixed !important; /* Fixed lo saca del 100% de la web. NUNCA moverá el calendario */
    top: 0 !important;
    left: 0 !important;
    z-index: 9999999 !important; /* Por encima de todo, menú superior incluido */
    width: 340px !important; /* Más ancho para que quepan bien textos largos */
    height: 100vh !important; /* Ocupa el 100% del alto de la pantalla */
    max-height: 100vh !important;
    background-color: #ffffff !important;
    box-shadow: 10px 0 40px rgba(0,0,0,0.15) !important;
    border: none !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    overflow: hidden !important; /* El scroll lo metemos dentro del form */
}

/* Animación de entrada suave desde la izquierda */
#filtros_left[style*="display: block"], 
#filtros_left[style*="display:block"] {
    animation: slideInLeft 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

#filtros_left form {
    background-color: transparent !important; 
    padding: 30px 25px;
    margin: 0;
    height: 100%;
    overflow-y: auto; /* Scroll interno solo para la zona de filtros */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Separación automática de los bloques */
}

/* Título virtual para encabezar el panel de filtros */
#filtros_left form::before {
    content: "Filtros Avanzados";
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-dark);
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

/* Estilizar el contenido interior de los filtros */
#filtros_cal {
    color: #4a5568;
    font-size: 14px;
    line-height: 1.6;
}

/* Scrollbar fina e invisible que solo aparece si hay muchos valores */
#filtros_left form::-webkit-scrollbar { width: 6px; }
#filtros_left form::-webkit-scrollbar-track { background: transparent; }
#filtros_left form::-webkit-scrollbar-thumb { background-color: #cbd5e0; border-radius: 4px; }
#filtros_left form::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary-light); }

#filtros_left form {
    background-color: transparent !important; 
    padding: 30px 25px 80px 25px; /* Más espacio abajo para que no se corte el último elemento */
    margin: 0;
    height: 100vh; 
    box-sizing: border-box; /* ESTO ES LA MAGIA: Obliga a que el padding se calcule hacia adentro, sin romper el alto */
    overflow-y: auto; /* Activa el scroll */
    display: flex;
    flex-direction: column;
    gap: 20px; 
}


/* ========================================================
   13. DETALLE DE TAREA (FICHA MODERNA - VERSIÓN ULTRA COMPACTA)
   ======================================================== */
.infotarea-wrapper { 
    text-align: left; 
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    font-size: 12px; /* Letra general un punto más pequeña */
    line-height: 1.4;
}
.infotarea-header { 
    background-color: var(--task-color, var(--color-primary)); 
    color: white; 
    padding: 10px 15px; /* Más estrecho */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.infotarea-header b { font-weight: 700; font-size: 14px; letter-spacing: 0.5px;}

.infotarea-status-bar { 
    background-color: #f8fafc; 
    padding: 8px 15px; /* Más compacto */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #e2e8f0; 
    color: #4a5568; 
}
.infotarea-status-bar .badge-estado { padding: 2px 10px; border-radius: 20px; font-weight: 700; font-size: 10px; text-transform: uppercase; }

.infotarea-actions { display: flex; gap: 6px; }
.infotarea-actions a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #edf2f7; color: var(--color-primary); transition: all 0.2s; font-size: 13px; }
.infotarea-actions a:hover { background: var(--color-primary); color: white; transform: translateY(-1px); }
.infotarea-actions a.btn-danger { background: #fee2e2; color: #e53e3e; }
.infotarea-actions a.btn-danger:hover { background: #e53e3e; color: white; }

/* Contenedor interno con rejilla inteligente para aprovechar el espacio a lo ancho */
.infotarea-content { 
    padding: 15px; 
    color: #4a5568; 
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide el contenido en 2 columnas en PC */
    gap: 12px;
}

/* Forzar que ciertos elementos ocupen el ancho completo (como títulos o tablas) */
.infotarea-content > h5,
.infotarea-content > table,
.infotarea-content > ul,
.infotarea-content > div[style*="text-align:right"],
.infotarea-content > .infotarea-table {
    grid-column: span 2; 
}

.infotarea-content h5 { 
    font-size: 11px; 
    color: var(--color-primary-dark); 
    margin: 15px 0 5px 0; 
    border-bottom: 2px solid #edf2f7; 
    padding-bottom: 4px; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

.infotarea-box { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    padding: 10px 12px; /* Reducido para evitar cajas gigantes */
    border-radius: 8px; 
    margin-bottom: 0; /* Controlado por el gap del grid */
}
.infotarea-box.warning { background: #fffaf0; border-left: 4px solid #ed8936; border-radius: 0 8px 8px 0; border-top: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;}
.infotarea-grid-2 { 
    grid-column: span 2; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
}

.infotarea-table { width: 100%; border-collapse: collapse; margin-top: 5px; font-size: 11px; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.infotarea-table th, .infotarea-table td { padding: 6px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.infotarea-table th { background: #f1f5f9; font-weight: 600; color: #4a5568; text-transform: uppercase; font-size: 10px; }
.infotarea-table tr:last-child td { border-bottom: none; }
.infotarea-table tr:hover td { background: #f8fafc; }

/* Adaptación para pantallas de móvil (Vuelve a una sola columna si no hay espacio) */
@media all and (max-width: 790px) {
    .infotarea-content { grid-template-columns: 1fr; gap: 10px; }
    .infotarea-content > h5, .infotarea-content > table, .infotarea-content > ul, .infotarea-content > div[style*="text-align:right"], .infotarea-content > .infotarea-table { grid-column: span 1; }
    .infotarea-grid-2 { grid-template-columns: 1fr; }
}

/* ========================================================
   14. CONFIGURACIÓN, ALINEACIÓN Y LIMPIEZA DE TABLA USUARIOS
   ======================================================== */

/* 14.1. Unificación de fondo de pantalla y reactivación del scroll global */
body,
.main-content,
#page-wrapper {
    background: #f8fafc !important; /* Fondo gris claro */
    overflow-y: auto !important;   /* Devuelve el scroll vertical a la web */
    overflow-x: hidden !important; /* Evita que la pantalla baile de lado a lado */
    height: auto !important;
    min-height: 100vh;
}

/* Limpieza de contenedores intermedios de la plantilla antigua */
.pt20, 
.container,
.container-fluid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

/* 14.2. CENTRADO GENERAL DE TODAS LAS SECCIONES DE LA PÁGINA */
.page-title,
.card,
.dataTables_wrapper, /* Añadimos la envoltura nativa de la tabla */
div[style*="display:flex; gap:10px; margin-bottom:20px;"] {
    max-width: 1400px !important; /* Ancho máximo idéntico para todos */
    margin-left: auto !important;  /* Centrado automático izquierdo */
    margin-right: auto !important; /* Centrado automático derecho */
    width: 100% !important;
    box-sizing: border-box;
}

/* Ajustes específicos de márgenes de separación entre bloques centrados */
.page-title {
    background: #ffffff !important; 
    padding: 20px 25px !important; 
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    display: flex !important; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 20px !important;
    margin-bottom: 20px !important; 
}

#tablaDatos {
    width: 100% !important;
    margin: 0 auto !important;
}

/* Ajuste de la barra de filtros por roles para que no se pegue */
div[style*="display:flex; gap:10px; margin-bottom:20px;"] {
    margin-bottom: 20px !important;
}

/* 14.3. Control de la tarjeta blanca de la tabla */
.card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
    padding: 25px !important;
    overflow: visible !important; 
}

/* 14.4. Centrado vertical y espaciado de celdas internas */
#tablaDatos th, 
#tablaDatos td {
    vertical-align: middle !important;
    text-align: left !important;
    padding: 10px 12px !important;
    height: 54px !important; /* Altura fija simétrica */
    box-sizing: border-box;
}

/* Margen extra para despegar el ID del borde izquierdo de la tabla */
#tablaDatos th:first-child, 
#tablaDatos td:first-child {
    padding-left: 20px !important;
}

/* Columnas explícitamente configuradas para centrarse */
#tablaDatos .text-center,
#tablaDatos th.text-center, 
#tablaDatos td.text-center {
    text-align: center !important;
}

/* 14.5. Corrección del bloque de Control Horario (Formulario inline) */
#tablaDatos td form {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
}

#tablaDatos td form span,
#tablaDatos td form button {
    vertical-align: middle !important;
    display: inline-block !important;
}

#tablaDatos td form span {
    margin-right: 5px;
}

#tablaDatos td form button {
    background: #edf2f7 !important;
    border: 1px solid #e2e8f0 !important;
    color: #718096 !important;
    border-radius: 6px;
    padding: 4px 8px !important;
    cursor: pointer;
    line-height: 1 !important;
    transition: all 0.2s ease;
}

#tablaDatos td form button:hover {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* 14.6. Bloque de acciones del final (Ficha, Editar, Eliminar) */
#tablaDatos td.infotarea-actions {
    text-align: center !important;
    white-space: nowrap !important;
}

#tablaDatos td.infotarea-actions a {
    display: inline-flex !important;
    vertical-align: middle !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 2px !important;
}

/* 14.7. Alineación de píldoras de Roles y Permisos */
#tablaDatos td .badge-estado {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 2px !important;
}

/* 14.8. Textos auxiliares de DataTables (Buscador y Selector de filas) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px !important;
    color: #4a5568 !important;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_length { padding-left: 5px !important; }
.dataTables_wrapper .dataTables_filter { padding-right: 5px !important; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #cbd5e0 !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    outline: none !important;
    color: #4a5568 !important;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 8px !important;
}
/* ========================================================
   15. FIX DOBLE SCROLL EN CALENDARIO (FLEXBOX FULL HEIGHT)
   ========================================================
   Aplica únicamente a la página que contiene #div_por_dia.
   El resto de páginas conservan el scroll natural de 14.1.
   ======================================================== */

/* 15.1 Página del calendario: altura completa del viewport, sin scroll en body */
html:has(#div_por_dia),
body:has(#div_por_dia) {
    height: 100% !important;
    overflow: hidden !important;   /* Anula overflow-y:auto de 14.1 SOLO aquí */
}

body:has(#div_por_dia) {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;          /* Anula margin:55px del body */
    min-height: 0 !important;      /* Anula min-height:100vh de 14.1 */
}

/* 15.2 La barra de navegación mantiene altura natural */
body:has(#div_por_dia) > .nav-container {
    flex: 0 0 auto !important;
}

/* 15.3 CUALQUIER div ancestro de #div_por_dia se convierte en flex column
        que ocupa el espacio restante. Esto cubre los dos wrappers sin clase
        que hay en index.php entre <body> y .bg-white, sin tener que
        modificar el HTML. */
body:has(#div_por_dia) div:has(#div_por_dia) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 15.4 .bg-white es el último contenedor antes del calendario:
        oculta el desbordamiento porque el scroll vive dentro de #div_por_dia */
body:has(#div_por_dia) .bg-white:has(#div_por_dia) {
    overflow: hidden !important;
}

/* 15.5 Hermanos del calendario dentro de .bg-white (barra de filtros / fecha)
        NO deben crecer: mantienen su altura natural */
body:has(#div_por_dia) .bg-white:has(> #div_por_dia) > *:not(#div_por_dia) {
    flex: 0 0 auto !important;
}

/* 15.6 Scrollbar elegante para el calendario (vertical y horizontal) */
#div_por_dia::-webkit-scrollbar { width: 10px; height: 10px; }
#div_por_dia::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 5px; }
#div_por_dia::-webkit-scrollbar-thumb { background-color: #cbd5e0; border-radius: 5px; }
#div_por_dia::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary-light); }
#div_por_dia::-webkit-scrollbar-corner { background: #f1f5f9; }


/* ========================================================
   16. FIX SCROLL INNECESARIO EN LOGIN (FLEXBOX FULL HEIGHT)
   ========================================================
   Mismo patrón que la sección 15 pero para .login-bg.
   Hace que la pantalla de login encaje exactamente en el
   viewport: nav arriba, login-bg ocupa el centro flexible,
   .pie (footer) abajo. Cero scroll en el <body>.
   ======================================================== */

/* 16.1 Página de login: altura completa, sin scroll en body */
html:has(.login-bg),
body:has(.login-bg) {
    height: 100% !important;
    overflow: hidden !important;
}

body:has(.login-bg) {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* 16.2 Nav y footer mantienen su altura natural */
body:has(.login-bg) > .nav-container,
body:has(.login-bg) > .pie {
    flex: 0 0 auto !important;
}

/* 16.3 Cualquier div ancestro de .login-bg crece para llenar el espacio
        intermedio (cubre wrappers sin clase entre body y .login-bg) */
body:has(.login-bg) div:has(.login-bg) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 16.4 .login-bg ocupa exactamente el hueco disponible. 
        Anulamos el cálculo en píxeles del bloque 6, que es lo que
        provocaba el desfase de altura entre Linux y Windows. */
body:has(.login-bg) .login-bg {
    flex: 1 1 auto !important;
    min-height: 0 !important;      /* Anula el min-height: calc(100vh - 153px) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}