/* +--------------------------------------------------------------------------+
|  2026 GENBIB.CSS - BIBLIOTECA FCEJYS UNSA                                   |
|  Master Stylesheet - Clean & Refactored (100% COMPLETE & FINAL)             |
+--------------------------------------------------------------------------+ */

/* ========================================================= */
/* --- 01. VARIABLES, RESET Y GENERAL --- */
/* ========================================================= */
:root { --primary: #1f2a30; --accent: #34ccff; --white: #ffffff; --light-bg: #f5f7fa; --text-dark: #333333; --text-light: #666666; --border: #e0e0e0; --shadow: 0 4px 12px rgba(0,0,0,0.08); --font-main: 'Montserrat', sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body, body#pmbopac { font-family: var(--font-main); background-color: var(--light-bg); color: var(--text-dark); font-size: 14px; line-height: 1.6; min-height: 100vh !important; display: flex !important; flex-direction: column !important; margin: 0 !important; }
#container { flex: 1 0 auto !important; width: 100% !important; display: flex !important; flex-direction: column !important; }
a { text-decoration: none; color: var(--primary); transition: 0.3s; }
a:hover { color: var(--accent); }
#novedades, #info, #wrapper, .cms_module, #main { width: 100% !important; max-width: 1300px !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }

/* ========================================================= */
/* --- 02. HEADER Y NAVEGACIÓN (LOGOS IGUALES + APILADO) --- */
/* ========================================================= */
#header { background: var(--white); position: relative; z-index: 10000 !important; }
.header-top { background: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 15px 0; position: relative !important; z-index: 10000 !important; }
.container-flex { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }

/* Contenedor general */
.top-info { display: flex !important; align-items: center !important; gap: 15px !important; }

/* Enlaces de los logos */
.unsa-link, .facultad-link { display: flex !important; align-items: center !important; gap: 15px !important; text-decoration: none !important; transition: opacity 0.3s ease !important; }
.unsa-link:hover, .facultad-link:hover { opacity: 0.8 !important; }

/* Ambos logos exactamente iguales */
.logo-unsa, .logo-facultad { height: 55px !important; width: auto !important; object-fit: contain !important; }

/* Separador entre logos */
.header-divider { height: 40px !important; width: 2px !important; background-color: #e0e0e0 !important; margin: 0 5px !important; }

/* Textos Apilados */
.text-titles { display: flex !important; flex-direction: column !important; justify-content: center !important; }

/* Textos del mismo tamaño */
.title-unsa { font-size: 15px !important; font-weight: 700 !important; color: #666666 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 2px !important; }
.title-facultad { font-size: 15px !important; font-weight: 800 !important; color: var(--primary) !important; letter-spacing: 0.3px !important; }

.top-login { display: flex; align-items: center; justify-content: flex-end; }
.navbar { padding: 0; background: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.navbar .container-flex { justify-content: center; }
.nav-menu { display: flex; list-style: none; gap: 0; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu > li > a { color: #ffffff; font-weight: 600; font-size: 14px; padding: 18px 25px; display: block; text-transform: uppercase; transition: all 0.3s ease; }
.nav-menu > li > a:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.nav-menu > li > a i { font-size: 10px; margin-left: 5px; opacity: 0.7; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: #ffffff; min-width: 250px; padding: 10px 0; border-top: 3px solid var(--accent); box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 1001; text-align: left; }
.nav-menu li:hover > .dropdown { display: block; }
.dropdown li { list-style: none; position: relative; }
.dropdown li a { color: #333333; padding: 10px 20px; display: block; font-size: 13px; border-bottom: 1px solid #f0f0f0; transition: 0.2s; }
.dropdown li a:hover { background: #f9f9f9; color: var(--primary); padding-left: 25px; }
.dropdown ul { display: none; position: absolute; left: 100%; top: 0; background: #fff; min-width: 220px; border-top: 3px solid var(--accent); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.dropdown li:hover > ul { display: block; }
.nav-toggle, .nav-toggle-label { display: none !important; }

@media (max-width: 992px) {
    .header-top { padding: 10px 0; }
    .header-top .container-flex { flex-direction: column; gap: 15px; justify-content: center; text-align: center; }
    .top-info { flex-direction: column; }
    .logo-unsa, .logo-facultad { height: 45px !important; }
    .header-divider, .text-titles { display: none !important; }
    .top-login { justify-content: center; }
    .navbar { position: relative; z-index: 1001; }
    .nav-toggle-label { display: block !important; cursor: pointer; color: #fff; font-size: 26px; text-align: center; padding: 12px 0; margin: 0; }
    .nav-toggle:checked ~ .nav-toggle-label i::before { content: "\f00d"; }
    .nav-menu { position: absolute; top: 100%; left: -100%; width: 100%; background: var(--primary); flex-direction: column; transition: left 0.3s ease-in-out; box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 9999; max-height: 70vh; overflow-y: auto; }
    .nav-toggle:checked ~ .nav-menu { left: 0; }
    .nav-menu > li { width: 100%; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .nav-menu > li > a { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
    .dropdown { position: static; box-shadow: none; background: rgba(0,0,0,0.2); width: 100%; border: none; padding: 0; display: none; }
    .nav-menu li:hover > .dropdown, .nav-menu li:focus-within > .dropdown { display: block; }
    .dropdown li a { color: #e0e0e0 !important; border: none; text-align: left; padding: 12px 20px 12px 40px !important; font-size: 14px !important; border-bottom: 1px solid rgba(255,255,255,0.02); }
    .dropdown ul { position: static; box-shadow: none; border: none; background: rgba(0,0,0,0.3); }
    .dropdown ul li a { padding-left: 60px !important; }
}

/* ========================================================= */
/* --- 03. MENÚ DEL USUARIO --- */
/* ========================================================= */
#login_form { display: flex; align-items: center; gap: 10px; margin: 0; }
#login_form .list-choice { position: relative !important; display: inline-block !important; margin: 0 !important; }
#login_form .list-choice-title { background-color: transparent !important; color: var(--primary) !important; font-family: var(--font-main) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; padding: 8px 15px 8px 35px !important; border: 1px solid #ccc !important; border-radius: 30px !important; display: flex !important; align-items: center !important; transition: all 0.3s ease !important; position: relative !important; }
#login_form .list-choice-title::before { content: "\f007" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; position: absolute !important; left: 12px !important; color: var(--accent) !important; font-size: 14px !important; }
#login_form .list-choice-title::after { content: "\f0d7" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; margin-left: 8px !important; }
#login_form .list-choice:hover .list-choice-title { background-color: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
#login_form .list-choice:hover .list-choice-title::before { color: #fff !important; }
#login_form .list-choice-objects { position: absolute !important; top: 100% !important; background-color: #fff !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; margin-top: 15px !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; overflow: hidden !important; border: 1px solid #eaeaea !important; z-index: 99999 !important; width: 100% !important; min-width: 240px !important; left: 50% !important; right: auto !important; transform: translate(-50%, -10px) !important; }
#login_form .list-choice:hover .list-choice-objects { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; }
#login_form .list-choice-objects input[type="radio"], #login_form br { display: none !important; }
#login_form .list-choice-objects label { display: block !important; margin: 0 !important; cursor: pointer !important; }
#login_form .list-choice-objects a { display: block !important; padding: 12px 20px !important; color: #444 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; border-bottom: 1px solid #f5f5f5 !important; transition: all 0.2s ease !important; }
#login_form .list-choice-objects a:hover { background-color: #f0f8ff !important; color: var(--primary) !important; padding-left: 25px !important; }
#login_form .list-choice-objects label:last-child a { color: #d9534f !important; font-weight: 600 !important; background-color: #fffaf9 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
#login_form .list-choice-objects label:last-child a::before { content: "\f011" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
#login_form .list-choice-objects label:last-child a:hover { background-color: #d9534f !important; color: #fff !important; padding-left: 20px !important; }
@media (max-width: 768px) { #login_form .list-choice-objects a { text-align: center !important; padding: 12px 10px !important; justify-content: center !important; } #login_form .list-choice-objects a:hover, #login_form .list-choice-objects label:last-child a:hover { padding-left: 10px !important; } }

/* ========================================================= */
/* --- 04. LOGIN MODAL Y POPUPS (Unificado) --- */
/* ========================================================= */
#connexion { position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
.loginfloat { background: transparent !important; border: 1px solid rgba(0,0,0,0.2) !important; color: #444 !important; padding: 6px 15px !important; border-radius: 30px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 13px !important; display: flex !important; align-items: center !important; gap: 8px !important; transition: all 0.3s ease !important; }
.loginfloat:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.loginfloat svg { width: 16px; height: 16px; fill: currentColor !important; }
.modallogin { display: none; position: fixed !important; z-index: 99999 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0,0,0,0.6) !important; backdrop-filter: blur(2px); }
.modallogin[style*="display: block"] { display: flex !important; align-items: center !important; justify-content: center !important; }
.modal-content { background-color: #fff !important; width: 90% !important; max-width: 380px !important; padding: 0 !important; border-radius: 8px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; overflow: hidden !important; border: none !important; position: relative !important; display: flex !important; flex-direction: column !important; }
#id01 #login_form { display: block !important; width: 100% !important; margin: 0 !important; }
#id01 #login_form form { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
#id01 #login_form br, #id01 .myform-password-text-visually button { display: none !important; }
#id01 #login_form label { display: block !important; background-color: #1f2a30 !important; color: #ffffff !important; padding: 20px 25px !important; margin: 0 !important; font-size: 0 !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; position: relative !important; }
#id01 #login_form label::after { content: "Bienvenido"; font-size: 18px !important; font-weight: 700 !important; display: block !important; }
#id01 #login_form label::before { content: "" !important; display: none !important; }
.cerrar-modal-x { position: absolute !important; right: 20px !important; top: 10px !important; font-size: 30px !important; font-weight: 300 !important; cursor: pointer !important; color: #fff !important; opacity: 0.8 !important; z-index: 1000 !important; line-height: 1 !important; font-family: Arial, sans-serif !important; }
.cerrar-modal-x:hover { opacity: 1 !important; }
#id01 #login_form input[type="text"], #id01 #login_form input[type="password"] { width: calc(100% - 50px) !important; height: 45px !important; margin: 25px 25px 5px 25px !important; padding: 10px 10px 10px 45px !important; border: 1px solid #ddd !important; border-radius: 4px !important; background-color: #f9f9f9 !important; font-size: 14px !important; box-sizing: border-box !important; background-repeat: no-repeat !important; background-position: 15px center !important; background-size: 14px !important; display: block !important; }
#id01 #login_form input[type="password"] { margin-top: 15px !important; }
#id01 #login_form input[name="login"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23888' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.7-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/%3E%3C/svg%3E") !important; }
#id01 #login_form input[name="password"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23888' d='M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z'/%3E%3C/svg%3E") !important; }
#id01 #login_form input:focus { border-color: #34ccff !important; background-color: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(52, 204, 255, 0.1) !important; }
#id01 #login_form input.bouton { display: block !important; background-color: #34ccff !important; color: #fff !important; width: calc(100% - 50px) !important; margin: 20px 25px 0 25px !important; padding: 12px !important; border: none !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; transition: 0.3s !important; }
#id01 #login_form input.bouton:hover { background-color: #26c0f2 !important; }
#id01 .mdp_forgotten { display: block !important; text-align: center !important; color: #999 !important; font-size: 12px !important; margin: 15px 0 25px 0 !important; width: 100% !important; }
#id01 .mdp_forgotten:hover { color: #34ccff !important; }

/* ERROR CONNECTION & POPUP NATIVO PMB */
#error_connection, .popup_connexion_empr { max-width: 450px !important; margin: 60px auto 20px auto !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; padding: 40px !important; text-align: center !important; border: 1px solid #eef2f5 !important; box-sizing: border-box !important; }
body.popup { background-color: var(--light-bg) !important; padding: 30px 20px !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; }
#error_connection blockquote, .popup_connexion_empr blockquote { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; font-size: 0 !important; }
.popup_connexion_empr blockquote * { font-size: 14px !important; }
#error_connection h3, .popup_connexion_empr h3 { color: var(--primary) !important; font-size: 20px !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 25px !important; border-bottom: 3px solid var(--accent) !important; padding-bottom: 12px !important; display: inline-block !important; }
#error_connection form, .popup_connexion_empr form { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }
#error_connection label, .popup_connexion_empr form label { display: block !important; text-align: left !important; width: 100%; font-size: 13px !important; font-weight: 700 !important; color: #555 !important; margin-bottom: 8px !important; text-transform: uppercase !important; }
#error_connection input[type="text"], #error_connection input[type="password"], .popup_connexion_empr input[type="text"], .popup_connexion_empr input[type="password"] { width: 100% !important; padding: 12px 15px !important; margin-bottom: 20px !important; border: 1px solid #dcdcdc !important; border-radius: 6px !important; background-color: #f9fbfd !important; font-size: 14px !important; box-sizing: border-box !important; transition: all 0.3s ease !important; }
.password-text-visually input[type="password"] { margin-bottom: 0 !important; }
.password-text-visually { margin-bottom: 20px !important; position: relative !important; display: block !important; width: 100%; }
#error_connection input[type="text"]:focus, #error_connection input[type="password"]:focus, .popup_connexion_empr input[type="text"]:focus, .popup_connexion_empr input[type="password"]:focus { border-color: var(--accent) !important; background-color: #ffffff !important; outline: none !important; box-shadow: 0 0 0 4px rgba(52, 204, 255, 0.15) !important; }
.password-text-visually button { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; color: #888 !important; cursor: pointer !important; font-size: 16px !important; }
#error_connection input[type="submit"], .popup_connexion_empr input.bouton[name="ok"] { background-color: var(--accent) !important; color: #ffffff !important; width: 100% !important; padding: 14px !important; border: none !important; border-radius: 6px !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s ease !important; margin: 10px 0 15px 0 !important; box-shadow: 0 4px 10px rgba(52, 204, 255, 0.2) !important; }
#error_connection input[type="submit"]:hover, .popup_connexion_empr input.bouton[name="ok"]:hover { background-color: var(--primary) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important; }
#error_connection input[type="button"], .popup_connexion_empr input.bouton[value="Olvidé mi contraseña"] { background: transparent !important; color: #999 !important; border: none !important; width: 100% !important; font-size: 13px !important; cursor: pointer !important; box-shadow: none !important; padding: 10px !important; transition: color 0.3s ease !important; text-decoration: underline !important; }
#error_connection input[type="button"]:hover, .popup_connexion_empr input.bouton[value="Olvidé mi contraseña"]:hover { color: var(--accent) !important; }
#error_connection br, .popup_connexion_empr br { display: none !important; }
div.error:not(#error_connection) { max-width: 450px !important; margin: 0 auto 40px auto !important; background-color: #fdf3f2 !important; border-left: 5px solid #e74c3c !important; color: #c0392b !important; padding: 15px 20px !important; border-radius: 4px 8px 8px 4px !important; font-size: 14px !important; font-weight: 600 !important; text-align: center !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }

/* ========================================================= */
/* --- 05. HERO, BUSCADOR Y ENLACES RÁPIDOS --- */
/* ========================================================= */
#search { background: linear-gradient(rgba(31, 42, 48, 0.7), rgba(31, 42, 48, 0.7)), url('./images/biblioteca.jpg'); background-size: cover; background-position: center; min-height: 450px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 25px; margin: 0 auto 40px auto !important; padding: 20px; border-radius: 0 0 30px 30px; width: 100% !important; max-width: 1300px !important; overflow: hidden; }
.search-content h1 { color: #ffffff; font-weight: 700; font-size: 2.8rem; margin: 0; padding: 0 20px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); }
@media (max-width: 768px) { .search-content h1 { font-size: 1.6rem; line-height: 1.3; } }
#search form { position: relative !important; width: 100% !important; max-width: 800px !important; margin: 0 auto !important; display: block !important; }
#search input.text_query { width: 100% !important; padding: 20px 60px 20px 30px !important; border-radius: 50px !important; border: none !important; font-size: 18px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important; box-sizing: border-box !important; height: auto !important; }
#search button[type="submit"], #buscar { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; color: #666 !important; font-size: 20px !important; cursor: pointer !important; z-index: 10 !important; padding: 10px !important; margin: 0 !important; box-shadow: none !important; }
#search button[type="submit"]:hover i, #buscar:hover i { color: var(--accent) !important; transform: scale(1.1); }
#search span { width: 100% !important; display: block !important; }
#search br { display: none !important; }
#search .p1 { color: var(--white); margin-bottom: 10px; font-size: 1.5rem; font-weight: 700; }

.hero-quick-links { display: flex !important; justify-content: center !important; gap: 30px !important; margin-top: 20px !important; flex-wrap: wrap; width: 100%; z-index: 10; }
.hero-quick-links .circle-link { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; width: auto !important; min-width: 130px !important; padding: 15px !important; border-radius: 16px !important; transition: all 0.3s ease !important; background: transparent !important; border: 1px solid transparent !important; }
.hero-quick-links .icon-circle { width: 60px !important; height: 60px !important; background-color: var(--primary) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; transition: all 0.3s ease !important; border: 2px solid rgba(255,255,255,0.1) !important; }
.hero-quick-links .icon-circle i { font-size: 24px !important; color: #ffffff !important; transition: transform 0.3s ease !important; }
.hero-quick-links .icon-circle img.custom-btn-icon { width: 28px !important; height: 28px !important; object-fit: contain !important; transition: transform 0.3s ease !important; filter: brightness(0) invert(1) !important; }
.hero-quick-links .circle-link span { color: #ffffff !important; white-space: normal !important; line-height: 1.5 !important; font-size: 14px !important; letter-spacing: 0.5px !important; font-weight: 600 !important; text-align: center !important; text-shadow: 0 2px 5px rgba(0,0,0,0.8) !important; display: block !important; max-width: 120px !important; margin: 0 auto !important; word-break: normal !important; }
#search .hero-quick-links .circle-link span br { display: block !important; }
.hero-quick-links .circle-link:hover { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; transform: translateY(-5px) !important; }
.hero-quick-links .circle-link:hover .icon-circle { background-color: var(--accent) !important; box-shadow: 0 10px 25px rgba(52, 204, 255, 0.5) !important; transform: scale(1.05) !important; }
.hero-quick-links .circle-link:hover span { color: var(--accent) !important; text-shadow: none !important; }
@media (max-width: 600px) { .hero-quick-links { gap: 15px !important; } .hero-quick-links .circle-link { min-width: 100px !important; } .hero-quick-links .icon-circle { width: 50px !important; height: 50px !important; } .hero-quick-links .icon-circle i { font-size: 20px !important; } }

/* ========================================================= */
/* --- 06. NOVEDADES (BENTO GRID - ESTILO ORIGINAL CORREGIDO) --- */
/* ========================================================= */

#novedades h2, #info h2 { 
    font-size: 26px !important; color: var(--primary) !important; margin-top: 40px !important; margin-bottom: 25px !important; 
    font-weight: 700 !important; border-bottom: 3px solid var(--accent) !important; padding-bottom: 8px !important; display: inline-block !important; 
}

/* Contenedor Principal (Bento Grid) */
.bento-container { 
    display: grid !important; grid-template-columns: 1.6fr 1fr !important; grid-template-rows: repeat(2, 240px) !important; 
    gap: 25px !important; max-width: 1300px !important; margin: 0 auto 30px auto !important; padding: 0 20px !important; 
}

/* Estilos de Tarjeta Base */
.bento-card { 
    position: relative !important; border-radius: 20px !important; overflow: hidden !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; 
    transition: transform 0.4s ease, box-shadow 0.4s ease !important; 
    background-color: #f9f9f9 !important; /* Fondo claro por defecto */
}
.bento-card a { display: flex !important; flex-direction: column !important; height: 100% !important; text-decoration: none !important; }
.bento-card:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 40px rgba(52, 204, 255, 0.2) !important; }

/* Imagen de Fondo (Cover para todas) */
.bento-image { 
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; 
    background-size: cover !important; background-position: center top !important; 
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; z-index: 1 !important; 
}
.bento-card:hover .bento-image { transform: scale(1.08) !important; }

/* --- TRUCO MAGICO: Degradado oscuro en la base para legibilidad --- */
.bento-content { 
    position: relative !important; z-index: 2 !important; margin-top: auto !important; padding: 30px !important; 
    /* El degradado empieza oscuro abajo y se hace transparente hacia arriba */
    background: linear-gradient(to top, rgba(31, 42, 48, 0.9) 0%, rgba(31, 42, 48, 0.5) 50%, transparent 100%) !important; 
    width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; box-sizing: border-box !important; 
}

/* Etiquetas y Textos Generales */
.bento-tag { background-color: var(--accent) !important; color: #1f2a30 !important; padding: 6px 14px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1px !important; align-self: flex-start !important; margin-bottom: 15px !important; box-shadow: 0 4px 10px rgba(52, 204, 255, 0.4) !important; }
.bento-date { color: var(--accent) !important; font-size: 12px !important; font-weight: 700 !important; margin-bottom: 8px !important; display: inline-block !important; }

/* Estilos Específicos Tarjeta Principal (Featured) */
.bento-featured { grid-row: span 2 !important; }
.bento-featured .bento-title { color: #ffffff !important; font-size: 26px !important; font-weight: 700 !important; margin: 0 0 10px 0 !important; line-height: 1.3 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }
.bento-featured .bento-excerpt { color: #e0e0e0 !important; font-size: 15px !important; line-height: 1.6 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

/* Estilos Específicos Tarjetas Chicas (Regular) */
.bento-regular .bento-title { color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.4 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }

/* Responsive */
@media (max-width: 900px) {
    .bento-container { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
    .bento-featured { min-height: 400px !important; }
    .bento-regular { min-height: 280px !important; }
}

/* Novedades Clásicas */
.list_featured_news { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important; gap: 30px !important; margin-top: 40px !important; align-items: stretch !important; }
.list-item_featured_news { background: var(--white) !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; border: 1px solid transparent !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; height: 100% !important; }
.list-item_featured_news:hover { transform: translateY(-8px) !important; box-shadow: 0 12px 25px rgba(0,0,0,0.15) !important; border-color: var(--accent) !important; }
.img-featured_news { width: 100% !important; height: 200px !important; overflow: hidden !important; margin: 0 !important; border-radius: 0 !important; flex-shrink: 0 !important; }
.img-featured_news img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease !important; }
.list-item_featured_news:hover .img-featured_news img { transform: scale(1.08) !important; }
.txt-featured_news { padding: 20px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; height: 100% !important; background: transparent !important; }
.date_featured_news { color: var(--accent) !important; font-size: 12px !important; font-weight: bold !important; margin-bottom: 8px !important; text-transform: uppercase !important; }
.title-featured_news { font-size: 18px !important; color: var(--primary) !important; margin-bottom: 10px !important; display: block !important; font-weight: 700 !important; line-height: 1.3 !important; transition: color 0.3s ease !important; }
.list-item_featured_news:hover .title-featured_news { color: var(--accent) !important; }
.title-featured_news a { color: inherit !important; text-decoration: none !important; }
.txt_featured_news { flex-grow: 1 !important; margin-bottom: 20px !important; } 
.view-featured_news { margin-top: auto !important; align-self: center !important; background: transparent !important; border: 1px solid var(--primary) !important; color: var(--primary) !important; padding: 8px 25px !important; border-radius: 30px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s ease !important; }
.view-featured_news:hover { background: var(--primary) !important; color: #fff !important; }
.btn-block { text-align: center !important; width: 100% !important; margin-top: 10px !important; margin-bottom: 50px !important; }
.btn-featured_news { display: inline-block !important; padding: 12px 30px !important; font-size: 15px !important; border: 2px solid var(--primary); color: var(--primary); border-radius: 30px; font-weight: 600; }
.btn-featured_news:hover { background: var(--primary); color: var(--white); }
.noticia-oculta { display: none !important;}
@keyframes fadeInUpSuave {0% {opacity: 0;transform: translateY(30px);}100% {opacity: 1;transform: translateY(0);}}

/* ACÁ ESTÁ LA MAGIA CORREGIDA: display: flex en lugar de block */
.mostrar-suave {display: flex !important; animation: fadeInUpSuave 0.6s ease-out forwards;opacity: 0;}
.retraso-0 { animation-delay: 0.1s; }.retraso-1 { animation-delay: 0.3s; }.retraso-2 { animation-delay: 0.5s; }
/* Swiper Servicios */
#info .swiper-wrapper { align-items: stretch !important; }
#info .card { height: auto !important; background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; padding: 40px 20px 30px 20px !important; text-align: center !important; border: 1px solid transparent !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; box-sizing: border-box !important; }
#info .card a { display: flex !important; flex-direction: column !important; align-items: center !important; height: 100% !important; flex-grow: 1 !important; width: 100% !important; text-decoration: none !important; }
#info .image-content { margin-bottom: 25px !important; }
#info .card-image { width: 80px !important; height: 80px !important; background-color: #f5f7fa !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.4s ease !important; }
#info .card-image i { display: none !important; }
#info .card-image img { display: block !important; width: 60px !important; height: 60px !important; object-fit: contain !important; transition: all 0.4s ease !important; margin: 0 auto !important; }
#info .card:hover .card-image { background-color: var(--accent) !important; transform: scale(1.1) !important; }
#info .card:hover .card-image img { transform: scale(1.15) !important; filter: brightness(0) invert(1) !important; }
#info .name { font-size: 18px !important; color: var(--primary) !important; font-weight: 700 !important; margin-bottom: 15px !important; position: relative !important; padding-bottom: 12px !important; height: 70px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; }
#info .name::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 40px !important; height: 3px !important; background-color: var(--accent) !important; border-radius: 2px !important; transition: width 0.3s ease !important; }
#info .card:hover .name::after { width: 60px !important; }
#info .description { font-size: 14px !important; color: #666666 !important; line-height: 1.6 !important; margin: 0 !important; }
.swiper-navBtn { color: var(--primary) !important; transition: color 0.3s ease !important; }
.swiper-navBtn:hover { color: var(--accent) !important; transform: scale(1.1) !important; }
.swiper-pagination-bullet-active { background-color: var(--accent) !important; }
.slideshow, .slideshow .c-header-home_footer { display: none !important; }

@media (max-width: 900px) {
    .bento-container { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
    .bento-featured { min-height: 400px !important; }
    .bento-regular { min-height: 280px !important; }
}

/* ========================================================= */
/* --- 07. RESULTADOS Y FICHA DEL LIBRO --- */
/* ========================================================= */
#contenedor-padre { display: flex !important; flex-direction: row-reverse !important; width: 100% !important; max-width: 1300px !important; margin: 40px auto !important; padding: 0 20px !important; box-sizing: border-box !important; gap: 40px !important; align-items: flex-start !important; }
#bandeau { width: 280px !important; min-width: 280px !important; flex-shrink: 0 !important; background: #ffffff !important; padding: 20px !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; border: 1px solid #eaeaea !important; }
#contenedor-propio { flex-grow: 1 !important; width: auto !important; min-width: 0 !important; }
#lvl1 h3, #facette h3 { font-size: 16px !important; color: var(--primary) !important; border-bottom: 2px solid var(--accent) !important; padding-bottom: 8px !important; margin-bottom: 15px !important; margin-top: 0 !important; font-weight: 700 !important; text-transform: uppercase !important; }
.parent { background: #ffffff !important; border-radius: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; margin-bottom: 20px !important; padding: 20px !important; border: 1px solid #eaeaea !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.parent:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; border-color: var(--accent) !important; }
#lvl1, .bouton_filtrer_facette_haut { display: none !important; }
.bouton_filtrer_facette_bas { width: 100% !important; margin-top: 25px !important; background-color: var(--primary) !important; color: #ffffff !important; padding: 12px 20px !important; border: none !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }
.bouton_filtrer_facette_bas:hover { background-color: var(--accent) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 15px rgba(52, 204, 255, 0.3) !important; }
#facette_suggest h3 { margin-top: 30px !important; }
td.contenido { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; position: relative !important; }
.onglets_isbd_public { order: 10 !important; display: flex !important; flex-wrap: wrap !important; gap: 15px !important; list-style: none !important; padding: 15px 0 0 0 !important; margin: 20px 0 0 0 !important; border-top: 1px solid #eaeaea !important; }
.onglets_isbd_public br { display: none !important; }
.onglet_basket { position: relative !important; background-color: var(--light-bg) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; padding: 8px 15px !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; cursor: pointer !important; }
.onglet_basket a { display: flex !important; align-items: center !important; text-decoration: none !important; }
.onglet_basket a::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 10 !important; }
.onglet_basket svg { width: 18px !important; height: 18px !important; fill: var(--primary) !important; transition: fill 0.3s ease !important; }
.onglet_basket::after, .onglet_basket a[class*="basket"]::after { content: attr(title) !important; font-family: var(--font-main) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--primary) !important; margin-left: 8px !important; transition: color 0.3s ease !important; }
.onglet_basket:hover { background-color: var(--accent) !important; border-color: var(--accent) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(52, 204, 255, 0.2) !important; }
.onglet_basket:hover::after, .onglet_basket:hover a[class*="basket"]::after { color: #ffffff !important; }
.onglet_basket:hover a svg { fill: #ffffff !important; }
img.img_plus { display: none !important; }
h3[onclick*="expandBase"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--primary) !important; background-color: #f5f7fa !important; font-size: 14px !important; font-weight: 700 !important; padding: 8px 16px !important; border-radius: 6px !important; transition: all 0.3s ease !important; margin-top: 20px !important; margin-bottom: 5px !important; border: 1px solid #eaeaea !important; }
h3[onclick*="expandBase"]::before { content: "\f0d7" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 14px !important; }
h3[onclick*="expandBase"]:hover { background-color: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; }
.exemplaires { width: 100% !important; border-collapse: collapse !important; margin-top: 15px !important; border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; border: 1px solid #eaeaea !important; }
.exemplaires th { background-color: var(--primary) !important; color: #ffffff !important; padding: 12px 15px !important; text-align: left !important; font-size: 13px !important; text-transform: uppercase !important; }
.exemplaires td { padding: 12px 15px !important; border-bottom: 1px solid #eaeaea !important; font-size: 13px !important; color: #444 !important; }
.exemplaires tr:nth-child(even) td { background-color: #fcfcfc !important; }
.exemplaires tr:hover td { background-color: #f0f8ff !important; }

/* Paginación */
#navbar, #navigator { width: 100% !important; }
#navigator { display: none !important; }
#navbar .navbar { background: transparent !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin-top: 30px !important; }
#navbar form { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; color: #666 !important; font-size: 14px !important; width: 100% !important; }
#navbar hr { display: none !important; }
#navbar a.navbar_page, #navbar a.navbar_custom { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 35px !important; height: 35px !important; padding: 0 10px !important; background-color: #ffffff !important; border: 1px solid #ddd !important; color: var(--primary) !important; font-weight: 600 !important; border-radius: 6px !important; text-decoration: none !important; transition: all 0.3s ease !important; }
#navbar a.navbar_page:hover, #navbar a.navbar_custom:hover { background-color: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; transform: translateY(-2px) !important; }
#navbar strong, #navbar b { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 35px !important; height: 35px !important; padding: 0 10px !important; background-color: var(--primary) !important; border: 1px solid var(--primary) !important; color: #ffffff !important; font-weight: 700 !important; border-radius: 6px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }
#navbar a img, #navbar > form > img { border-radius: 4px !important; transition: transform 0.2s ease !important; vertical-align: middle !important; opacity: 0.7 !important; }
#navbar a:hover img { transform: scale(1.1) !important; opacity: 1 !important; }
#navbar span[style*="float:right"] { float: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 8px !important; margin-top: 15px !important; border-left: none !important; padding-left: 0 !important; font-size: 0 !important; color: transparent !important; }
#navbar span[style*="float:right"] a, #navbar span[style*="float:right"] b { font-size: 14px !important; color: var(--primary) !important; }
#navbar span[style*="float:right"]::before { content: "Resultados por página:" !important; font-size: 14px !important; color: #666 !important; font-weight: 600 !important; margin-right: 5px !important; }

/* Ficha del Libro */
#notice { width: 100% !important; max-width: 1000px !important; margin: 40px auto !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; padding: 40px !important; box-sizing: border-box !important; }
#notice .parent { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }
#notice > .parent > table, #notice > .parent > table > tbody, #notice > .parent > table > tbody > tr { display: flex !important; width: 100% !important; gap: 40px !important; align-items: flex-start !important; }
#notice td.imagen { width: 220px !important; padding: 0 !important; flex-shrink: 0 !important; display: block !important; }
#notice img.vignetteimg { height: auto !important; width: auto !important; max-width: 220px !important; max-height: 350px !important; object-fit: contain !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; display: block !important; margin: 0 !important; float: none !important; }
#notice td.contenido { width: 100% !important; display: flex !important; flex-direction: column !important; }
#notice div[id^="div_public"] > table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 30px !important; }
#notice div[id^="div_public"] > table tr { border-bottom: 1px solid #f0f0f0 !important; display: flex !important; padding: 12px 0 !important; }
#notice .align_right.bg-grey { background: transparent !important; text-align: left !important; width: 30% !important; min-width: 120px !important; padding: 0 15px 0 0 !important; border: none !important; }
#notice .etiq_champ { font-weight: 700 !important; color: var(--primary) !important; font-size: 13px !important; text-transform: uppercase !important; }
#notice .public_line_value { width: 70% !important; padding: 0 !important; border: none !important; color: #444 !important; font-size: 14px !important; line-height: 1.6 !important; }
#notice .public_line_value a { color: #0077bb !important; font-weight: 600 !important; }
#notice .public_line_value a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }
#notice .tr_title { border-bottom: none !important; padding-top: 0 !important; padding-bottom: 15px !important; flex-direction: column !important; }
#notice .tr_title .bg-grey { display: none !important; }
#notice .tr_title .public_line_value { width: 100% !important; }
#notice .public_title { font-size: 32px !important; color: var(--primary) !important; font-weight: 800 !important; line-height: 1.2 !important; display: block !important; }
#notice .public_typdoc { color: var(--accent) !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: 1px !important; background: rgba(52, 204, 255, 0.1) !important; padding: 4px 10px !important; border-radius: 4px !important; }
#notice ul.onglets_isbd_public { margin-top: auto !important; padding-top: 25px !important; border-top: 1px solid #eaeaea !important; order: 99 !important; justify-content: flex-start !important; }
#notice > .parent > strong, #notice > .parent > br, #notice > .parent > img.img_plus { display: none !important; }
#notice h3[onclick*="expandBase"] { margin-top: 40px !important; align-self: flex-start !important; }

/* Revistas */
#perio_list_bulletins { width: 100% !important; margin-top: 50px !important; border-top: 2px dashed #eaeaea !important; padding-top: 30px !important; clear: both !important; }
#perio_list_bulletins h3 { font-size: 18px !important; color: var(--primary) !important; font-weight: 700 !important; margin-bottom: 20px !important; }
#form_search_bull { display: none !important; }
table.opac_bulletins_ui_list { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; margin-bottom: 30px !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e0e0e0 !important; }
table.opac_bulletins_ui_list th { background-color: var(--primary) !important; color: #ffffff !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 13px !important; padding: 16px 15px !important; text-align: center !important; border: none !important; }
table.opac_bulletins_ui_list th.opac_bulletins_ui_list_cell_header_bulletin_numero, table.opac_bulletins_ui_list th.opac_bulletins_ui_list_cell_header_mention_date { text-align: left !important; }
table.opac_bulletins_ui_list tr { background-color: #ffffff !important; transition: all 0.2s ease !important; }
table.opac_bulletins_ui_list td { padding: 16px 15px !important; border-bottom: 1px solid #f0f0f0 !important; color: #444 !important; font-size: 14px !important; vertical-align: middle !important; }
table.opac_bulletins_ui_list td a { color: #444 !important; text-decoration: none !important; display: block !important; font-weight: 500 !important; }
table.opac_bulletins_ui_list tbody tr:hover { background-color: #f4fcff !important; transform: scale(1.005) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; }
table.opac_bulletins_ui_list tbody tr:hover td a { color: var(--primary) !important; font-weight: 700 !important; }
table.opac_bulletins_ui_list td img { display: none !important; }
table.opac_bulletins_ui_list td.opac_bulletins_ui_list_cell_content_bulletin_numero a::before { content: "\f02d" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; margin-right: 10px !important; color: var(--accent) !important; }
#perio_list_bulletins #navbar { width: 100% !important; max-width: 100% !important; display: block !important; clear: both !important; margin-top: 10px !important; }
#perio_list_bulletins #navbar .navbar { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
#perio_list_bulletins #navbar form { width: 100% !important; justify-content: center !important; }

@media (max-width: 992px) {
    #contenedor-padre { flex-direction: column !important; gap: 20px !important; } 
    #bandeau { width: 100% !important; min-width: 100% !important; }
    #notice { padding: 25px !important; margin: 20px 15px !important; width: calc(100% - 30px) !important; }
    #notice > .parent > table > tbody > tr { flex-direction: column !important; align-items: center !important; gap: 25px !important; }
    #notice td.imagen { width: 100% !important; display: flex !important; justify-content: center !important; }
    #notice div[id^="div_public"] > table tr { flex-direction: column !important; gap: 5px !important; padding: 15px 0 !important; }
    #notice .align_right.bg-grey, #notice .public_line_value { width: 100% !important; }
    #notice .public_title { font-size: 24px !important; text-align: center !important; }
    #notice ul.onglets_isbd_public { justify-content: center !important; }
}

/* ========================================================= */
/* --- 08. MI CUENTA: CARNET, PRÉSTAMOS Y CESTA --- */
/* ========================================================= */
#fiche-empr { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; font-family: var(--font-main) !important; min-height: calc(100vh - 380px) !important; }
#cover { position: relative !important; width: 420px !important; height: 260px !important; border-radius: 16px !important; box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,0.1) !important; background-color: #3a6b8c !important; /* FONDO MUCHO MÁS CLARO Y EVIDENTE */ }
#logo-carnet { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; height: 240px !important; width: auto !important; opacity: 0.25 !important; z-index: 1 !important; /* LOGO SÚPER VISIBLE */ }
.marca-agua-carnet { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 180px !important; height: auto !important; margin: 0 !important; opacity: 0.25 !important; z-index: 1 !important; pointer-events: none !important; }.datos-carnet { position: absolute !important; top: 20px !important; left: 30px !important; text-align: left !important; z-index: 2 !important; width: 60% !important; }
.c-apellido { color: var(--accent) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 2px !important; }
.c-nombre { color: #ffffff !important; font-size: 22px !important; font-weight: 800 !important; margin-bottom: 5px !important; line-height: 1.1 !important; }
.c-num { color: #e0e0e0 !important; font-size: 14px !important; font-family: monospace !important; background: rgba(255,255,255,0.1) !important; padding: 5px 10px !important; border-radius: 6px !important; display: inline-block !important; margin-bottom: 10px !important; }
.c-label { color: #999 !important; font-size: 11px !important; text-transform: uppercase !important; margin-bottom: 2px !important; }
.c-valor { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 8px !important; }
#qr-carnet { position: absolute !important; right: 25px !important; top: 50% !important; transform: translateY(-50%) !important; width: 105px !important; height: 105px !important; background: #ffffff !important; padding: 8px !important; border-radius: 10px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; z-index: 2 !important; }
.botones-carnet { display: flex !important; flex-direction: row !important; gap: 15px !important; justify-content: center !important; margin-top: 30px !important; width: 100% !important; }
.botones-carnet a { text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; border-radius: 6px !important; font-weight: 600 !important; padding: 12px 30px !important; }
.btnformulario.secundario { background: transparent !important; border: 2px solid var(--primary) !important; color: var(--primary) !important; box-shadow: none !important; }
.btnformulario.secundario:hover { background: var(--primary) !important; color: #ffffff !important; }
#previewImage { display: none !important; }
@media (max-width: 500px) { #cover { width: 100% !important; max-width: 350px !important; } #qr-carnet { width: 80px !important; height: 80px !important; right: 15px !important; } .botones-carnet { flex-direction: column !important; padding: 0 20px !important; } }

/* Tablas Mi Cuenta */
#empr-solic, #empr-all, #empr-resa, #empr-old { max-width: 1100px !important; margin: 20px auto !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; padding: 30px 40px !important; box-sizing: border-box !important; position: relative !important; clear: both !important; }
#empr-solic h3, #empr-all h3, #empr-resa h3, #empr-old h3 { color: #1f2a30 !important; border-bottom: 3px solid #34ccff !important; padding-bottom: 10px !important; margin-top: 0 !important; margin-bottom: 25px !important; font-size: 24px !important; display: inline-block !important; }
#empr_loans_number, #empr_loans_old_number { color: #999 !important; font-size: 18px !important; font-weight: normal !important; }
.opac_loans_reader_ui_list, .fiche-lecteur, #empr-solic table, .opac_loans_archives_reader_ui_list { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; margin-bottom: 20px !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e0e0e0 !important; }
.opac_loans_reader_ui_list th, .fiche-lecteur th, #empr-solic table th, .opac_loans_archives_reader_ui_list th { background-color: #1f2a30 !important; color: #ffffff !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 13px !important; padding: 16px 15px !important; text-align: center !important; letter-spacing: 0.5px !important; border: none !important; }
.opac_loans_reader_ui_list th.opac_loans_reader_ui_list_cell_header_record, .opac_loans_reader_ui_list th.opac_loans_reader_ui_list_cell_header_author, .opac_loans_archives_reader_ui_list th.opac_loans_archives_reader_ui_list_cell_header_record, .opac_loans_archives_reader_ui_list th.opac_loans_archives_reader_ui_list_cell_header_author { text-align: left !important; }
.opac_loans_reader_ui_list tr.even, .opac_loans_reader_ui_list tr.odd, .fiche-lecteur tr.even, .fiche-lecteur tr.odd, #empr-solic table tr.even, #empr-solic table tr.odd, .opac_loans_archives_reader_ui_list tr.even, .opac_loans_archives_reader_ui_list tr.odd { background-color: #ffffff !important; transition: all 0.2s ease !important; }
.opac_loans_reader_ui_list td, .fiche-lecteur td, #empr-solic table td, .opac_loans_archives_reader_ui_list td { padding: 16px 15px !important; border-bottom: 1px solid #f0f0f0 !important; color: #444 !important; font-size: 14px !important; vertical-align: middle !important; }
.opac_loans_reader_ui_list td a, .fiche-lecteur td a, #empr-solic table td a, .opac_loans_archives_reader_ui_list td a { color: #0077bb !important; font-weight: 700 !important; text-decoration: none !important; }
.opac_loans_reader_ui_list td a:hover, .fiche-lecteur td a:hover, #empr-solic table td a:hover, .opac_loans_archives_reader_ui_list td a:hover { text-decoration: underline !important; }
.opac_loans_reader_ui_list tbody tr:hover, .fiche-lecteur tbody tr:hover, #empr-solic table tbody tr:hover, .opac_loans_archives_reader_ui_list tbody tr:hover { background-color: #f4fcff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; transform: scale(1.005) !important; }
.opac_loans_reader_ui_list tbody tr:hover td, .fiche-lecteur tbody tr:hover td, #empr-solic table tbody tr:hover td, .opac_loans_archives_reader_ui_list tbody tr:hover td { color: #1f2a30 !important; }

/* Botones Tablas */
a.renovar, a.cancelar_reserva, #empr-solic table td a.cancelar_solic { color: #ffffff !important; padding: 8px 18px !important; border-radius: 6px !important; text-decoration: none !important; font-size: 12px !important; font-weight: 800 !important; display: inline-block !important; transition: all 0.3s ease !important; }
a.renovar { background-color: #34ccff !important; }
a.renovar:hover { background-color: #29a3cc !important; transform: translateY(-2px) !important; }
a.cancelar_reserva, #empr-solic table td a.cancelar_solic { background-color: #e74c3c !important; }
a.cancelar_reserva:hover, #empr-solic table td a.cancelar_solic:hover { background-color: #c0392b !important; transform: translateY(-2px) !important; }
.bouton[value="Reservar un documento"] { background-color: #34ccff !important; color: #1f2a30 !important; padding: 12px 24px !important; border-radius: 6px !important; font-weight: 800 !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; margin-top: 10px !important; }
.bouton[value="Reservar un documento"]:hover { background-color: #1f2a30 !important; color: #ffffff !important; }

/* Casos Tablas */
#empr-solic table tr:first-child { background-color: #1f2a30 !important; }
#empr-solic table th { background-color: transparent !important; text-align: left !important; }
#empr-solic table th:first-child center::before { content: "TÍTULO" !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 13px !important; color: #ffffff !important; }
#empr-old span.addCart { display: block !important; margin-bottom: 20px !important; text-align: right !important; }
#empr-old span.addCart .bouton { background-color: #f5f7fa !important; color: var(--primary) !important; border: 1px solid var(--border) !important; padding: 10px 20px !important; border-radius: 6px !important; font-size: 0 !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; }
#empr-old span.addCart .bouton::after { content: "Añadir a la cesta" !important; font-size: 13px !important; }
#empr-old span.addCart .bouton:hover { background-color: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }
.opac_loans_archives_reader_ui_list th.opac_loans_archives_reader_ui_list_cell_header_arc_debut { font-size: 0 !important; }
.opac_loans_archives_reader_ui_list th.opac_loans_archives_reader_ui_list_cell_header_arc_debut::before { content: "FECHA" !important; font-size: 13px !important; }

/* Mi Cesta */
#cart_action, .search_result, #cart_navbar { width: 100% !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; clear: both !important; display: block !important; flex: 0 0 100% !important; grid-column: 1 / -1 !important; }
#cart_action { display: flex !important; align-items: center !important; margin-top: 40px !important; margin-bottom: 20px !important; gap: 10px !important; background: #ffffff !important; padding: 15px 20px !important; border-radius: 8px !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; flex-wrap: wrap !important; }
span.espaceCartAction { display: none !important; }
#cart_action .bouton { background-color: #f5f7fa !important; color: var(--primary) !important; border: 1px solid var(--border) !important; padding: 8px 16px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; }
#cart_action .bouton:hover { background-color: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; }
h3.title_basket { width: 100% !important; max-width: 1100px !important; margin: 20px auto !important; display: block !important; text-align: left !important; clear: both !important; border-bottom: none !important; font-size: 18px !important; color: var(--primary) !important; font-weight: 700 !important; flex: 0 0 100% !important; grid-column: 1 / -1 !important; }
h3.title_basket > span { border-bottom: 3px solid var(--accent) !important; padding-bottom: 8px !important; }
h3.title_basket b { color: var(--accent) !important; }
form[name="cart_form"] .parent { position: relative !important; padding-left: 60px !important; }
form[name="cart_form"] .parent > input[type="checkbox"] { position: absolute !important; left: 20px !important; top: 35px !important; transform: scale(1.6) !important; cursor: pointer !important; accent-color: var(--accent) !important; }
#cart_navbar { margin-top: 30px !important; }
#cart_navbar hr { display: none !important; }
#cart_navbar .navbar { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; background: #ffffff !important; padding: 15px !important; border-radius: 8px !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; }
#cart_navbar .navbar span[style*="float:right"] { float: none !important; display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; font-size: 0 !important; }
#cart_navbar .navbar span[style*="float:right"]::before { content: "Mostrar:" !important; font-size: 13px !important; color: #666 !important; font-weight: 600 !important; }
#cart_navbar .navbar span[style*="float:right"] a { font-size: 14px !important; }

@media (max-width: 900px) {
    #empr-solic, #empr-all, #empr-resa, #empr-old { 
        padding: 20px 15px !important; 
        margin: 20px 10px !important; 
    }
    
    /* 1. Convertimos la tabla en un bloque contenedor normal */
    .opac_loans_reader_ui_list, 
    .fiche-lecteur, 
    #empr-solic table, 
    .opac_loans_archives_reader_ui_list,
    .opac_loans_reader_ui_list tbody, 
    .fiche-lecteur tbody, 
    #empr-solic table tbody, 
    .opac_loans_archives_reader_ui_list tbody {
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
        white-space: normal !important; /* Rompemos la restricción que pegaba los préstamos */
    }

    /* 2. Ocultamos las cabeceras de la tabla (no son necesarias en formato tarjeta) */
    .opac_loans_reader_ui_list thead, 
    .fiche-lecteur thead, 
    #empr-solic table thead, 
    .opac_loans_archives_reader_ui_list thead,
    .opac_loans_reader_ui_list th, 
    .fiche-lecteur th, 
    #empr-solic table th, 
    .opac_loans_archives_reader_ui_list th {
        display: none !important;
    }

    /* 3. Cada préstamo (fila) se vuelve una TARJETA apilada VERTICALMENTE */
    .opac_loans_reader_ui_list tr, 
    .fiche-lecteur tr, 
    #empr-solic table tr, 
    .opac_loans_archives_reader_ui_list tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        border: 2px solid var(--accent) !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 15px rgba(0,0,0,0.06) !important;
        padding: 15px !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* 4. Cada dato (celda) dentro de la tarjeta */
    .opac_loans_reader_ui_list td, 
    .fiche-lecteur td, 
    #empr-solic table td, 
    .opac_loans_archives_reader_ui_list td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 10px !important;
        border-bottom: 1px dashed #eaeaea !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Permite que títulos largos bajen de línea */
    }

    /* Quitamos el borde al último elemento (generalmente el botón de renovar) y lo centramos */
    .opac_loans_reader_ui_list td:last-child, 
    .fiche-lecteur td:last-child, 
    #empr-solic table td:last-child, 
    .opac_loans_archives_reader_ui_list td:last-child {
        border-bottom: none !important;
        text-align: center !important;
        padding-top: 15px !important;
    }
	/* 5. FIX DEFINITIVO Y A PRUEBA DE BALAS: Inyectamos los títulos directo por CSS */
    .opac_loans_reader_ui_list td::before, 
    .fiche-lecteur td::before, 
    #empr-solic table td::before, 
    .opac_loans_archives_reader_ui_list td::before {
        display: block !important;
        background-color: #f5f7fa !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        text-align: left !important;
        padding: 8px 10px !important;
        margin: -10px -10px 10px -10px !important; 
    }

    /* Escondemos la barra gris en la última celda (donde van los botones o íconos) */
    .opac_loans_reader_ui_list td:last-child::before, 
    .fiche-lecteur td:last-child::before, 
    #empr-solic table td:last-child::before, 
    .opac_loans_archives_reader_ui_list td:last-child::before {
        display: none !important;
    }

    /* Títulos para PRÉSTAMOS ACTUALES */
    .opac_loans_reader_ui_list td:nth-child(1)::before { content: "Título" !important; }
    .opac_loans_reader_ui_list td:nth-child(2)::before { content: "Autor" !important; }
    .opac_loans_reader_ui_list td:nth-child(3)::before { content: "Soporte" !important; }
    .opac_loans_reader_ui_list td:nth-child(4)::before { content: "Fecha de préstamo" !important; }
    .opac_loans_reader_ui_list td:nth-child(5)::before { content: "Fecha prevista de devolución" !important; }
    .opac_loans_reader_ui_list td:nth-child(6)::before { content: "Prolongación" !important; }

    /* Títulos para HISTORIAL DE PRÉSTAMOS */
    .opac_loans_archives_reader_ui_list td:nth-child(1)::before { content: "Título" !important; }
    .opac_loans_archives_reader_ui_list td:nth-child(2)::before { content: "Autor" !important; }
    .opac_loans_archives_reader_ui_list td:nth-child(3)::before { content: "Fecha de préstamo" !important; }
    .opac_loans_archives_reader_ui_list td:nth-child(4)::before { content: "Fecha de devolución" !important; }

    /* Títulos para RESERVAS Y SOLICITUDES */
    #empr-solic table td:nth-child(1)::before { content: "Título" !important; }
    #empr-solic table td:nth-child(2)::before { content: "Autor" !important; }
    #empr-solic table td:nth-child(3)::before { content: "Soporte / Rango" !important; }
    #empr-solic table td:nth-child(4)::before { content: "Fecha / Estado" !important; }
}
/* ========================================================= */
/* --- 09. FORMULARIOS --- */
/* ========================================================= */
#formulario_socio h1, #libredeuda h1 { font-size: 28px !important; color: var(--primary) !important; border-bottom: 3px solid var(--accent) !important; padding-bottom: 15px !important; margin-bottom: 25px !important; text-transform: uppercase !important; font-weight: 700 !important; text-align: center !important; }
#formulario_socio h2.MsoSubtitle { background-color: var(--primary) !important; color: #ffffff !important; font-size: 16px !important; padding: 10px 20px !important; border-radius: 6px !important; margin: 30px 0 20px 0 !important; text-transform: uppercase !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }
#formulario_socio form, #libredeuda form { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 25px !important; align-items: start !important; }
#formulario_socio h1, #formulario_socio h2, #formulario_socio > div[style*="display: contents"], #formulario_socio p, #libredeuda h1, #libredeuda p { grid-column: 1 / -1 !important; text-align: center !important; }
#formulario_socio p:empty, #formulario_socio p:not(:has(*)), #libredeuda br { display: none !important; }
#formulario_socio form > div:not([style*="display: contents"]), #libredeuda form > div:not([style*="display: contents"]) { display: flex !important; flex-direction: column !important; margin-bottom: 20px !important; font-weight: 600 !important; color: var(--text-dark) !important; font-size: 13px !important; text-align: left !important; }
#formulario_socio input[type="text"], #formulario_socio select, #libredeuda input[type="text"], #libredeuda input[type="email"], #libredeuda select { width: 100% !important; padding: 12px 15px !important; margin-top: 8px !important; border: 1px solid #dcdcdc !important; border-radius: 6px !important; background-color: #f9fbfd !important; font-size: 14px !important; box-sizing: border-box !important; transition: all 0.3s ease !important; }
#formulario_socio input[type="text"]:focus, #formulario_socio select:focus, #libredeuda input[type="text"]:focus, #libredeuda input[type="email"]:focus, #libredeuda select:focus { border-color: var(--accent) !important; background-color: #ffffff !important; outline: none !important; box-shadow: 0 0 0 4px rgba(52, 204, 255, 0.15) !important; }
.btnformulario { background-color: var(--accent) !important; color: #ffffff !important; border: none !important; padding: 15px 40px !important; border-radius: 30px !important; font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 6px 15px rgba(52, 204, 255, 0.3) !important; margin-top: 20px !important; display: inline-block !important; }
.btnformulario:hover { background-color: var(--primary) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important; }
#formulario_info { margin-top: 40px !important; border-top: 1px solid #eaeaea !important; padding-top: 30px !important; }
#formulario_info .info { background-color: #f0f8ff !important; border-left: 5px solid var(--accent) !important; padding: 20px 25px !important; border-radius: 0 8px 8px 0 !important; }
#formulario_info .info h3 { margin-top: 0 !important; color: var(--primary) !important; font-size: 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 15px !important; }
#formulario_info .info h3::before { content: "\f05a" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; color: var(--accent) !important; font-size: 20px !important; }
#formulario_info .info p { margin: 0 0 8px 0 !important; font-size: 14px !important; color: var(--text-dark) !important; line-height: 1.6 !important; text-align: left !important; }

/* AskMDP */
blockquote#askmdp { max-width: 480px !important; margin: 60px auto !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; padding: 40px !important; text-align: center !important; border: 1px solid #eef2f5 !important; display: block !important; }
#askmdp hr { display: none !important; }
#askmdp .askmdp-header h3 { color: var(--primary) !important; font-size: 24px !important; font-weight: 800 !important; margin-top: 0 !important; margin-bottom: 15px !important; border-bottom: 3px solid var(--accent) !important; display: inline-block !important; padding-bottom: 8px !important; }
#askmdp p.texte { color: #666 !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 25px !important; }
#askmdp input[type="email"], #askmdp input[type="text"] { width: 100% !important; padding: 14px 15px !important; margin-bottom: 15px !important; border: 1px solid #dcdcdc !important; border-radius: 6px !important; background-color: #f9fbfd !important; font-size: 14px !important; box-sizing: border-box !important; transition: all 0.3s ease !important; }
#askmdp input[type="email"]:focus, #askmdp input[type="text"]:focus { border-color: var(--accent) !important; background-color: #ffffff !important; outline: none !important; box-shadow: 0 0 0 4px rgba(52, 204, 255, 0.15) !important; }
.anti-bot-box { background: #f4fcff !important; border: 1px dashed var(--accent) !important; padding: 20px !important; border-radius: 8px !important; margin-bottom: 20px !important; text-align: left !important; }
.anti-bot-box label { display: block !important; font-weight: 700 !important; color: var(--primary) !important; margin-bottom: 10px !important; font-size: 13px !important; text-transform: uppercase !important; }
#askmdp .error-msg { color: #e74c3c !important; font-size: 13px !important; font-weight: 600 !important; margin-top: -10px !important; margin-bottom: 15px !important; text-align: left !important; }
#askmdp input.bouton { background-color: var(--accent) !important; color: #ffffff !important; width: 100% !important; padding: 15px !important; border: none !important; border-radius: 6px !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s ease !important; }
#askmdp input.bouton:hover:not(:disabled) { background-color: var(--primary) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; }

/* Turnos */
#empr-resa:has(.login-container) { max-width: 650px !important; margin: 60px auto !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; padding: 40px !important; box-sizing: border-box !important; border: 1px solid #eef2f5 !important; }
#empr-resa:has(.login-container) h3 { text-align: center !important; font-style: normal !important; color: var(--primary) !important; font-size: 26px !important; font-weight: 800 !important; margin-top: 0 !important; margin-bottom: 30px !important; border-bottom: 3px solid var(--accent) !important; padding-bottom: 12px !important; display: inline-block !important; width: auto !important; }
.login-container { min-height: auto !important; }
#combo p { margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
#combo br { display: none !important; }
#combo p, #combo { font-size: 14px !important; font-weight: 700 !important; color: #555 !important; text-transform: uppercase !important; }
#combo select.select-selected { width: 100% !important; max-width: 350px !important; padding: 12px 40px 12px 15px !important; margin-top: 8px !important; margin-bottom: 25px !important; border: 1px solid #dcdcdc !important; border-radius: 6px !important; font-size: 15px !important; color: #333 !important; cursor: pointer !important; box-sizing: border-box !important; appearance: none !important; background: #f9fbfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2334ccff' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 15px center !important; background-size: 16px !important; }
#combo select.select-selected:focus { border-color: var(--accent) !important; background-color: #ffffff !important; outline: none !important; box-shadow: 0 0 0 4px rgba(52, 204, 255, 0.15) !important; }
#combo input[type="submit"].select-selected { background-color: var(--accent) !important; color: #ffffff !important; width: 100% !important; max-width: 350px !important; padding: 15px !important; border: none !important; border-radius: 30px !important; font-size: 16px !important; font-weight: 800 !important; cursor: pointer !important; margin-top: 10px !important; background-image: none !important; }
#combo input[type="submit"].select-selected:hover { background-color: var(--primary) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; }
#loading { margin-top: 30px !important; padding: 30px !important; background-color: #fcfcfc !important; border-radius: 8px !important; border: 1px dashed #dcdcdc !important; }
#loading span { font-style: normal !important; font-weight: 600 !important; color: var(--primary) !important; font-size: 16px !important; display: block !important; margin-top: 15px !important; }

@media (max-width: 768px) {
    #formulario_socio form, #libredeuda form { grid-template-columns: 1fr !important; }
    #empr-resa:has(.login-container) { padding: 30px 20px !important; margin: 20px 15px !important; width: calc(100% - 30px) !important; }
}

/* ========================================================= */
/* --- 10. ACORDEÓN (TRABAJOS FINALES / BIBLIOGUÍAS) --- */
/* ========================================================= */
.menu #search, .menu #search_crl, .menu form#search_form, .menu > .row > script, .menu > .row > div[id="choose_criteria"], .menu > .row select, .menu > .row input[type="button"], .menu > .row br { display: none !important; }
.alert.alert-warning.biblioguia { background-color: transparent !important; border: 1px solid #eaeaea !important; border-radius: 8px !important; margin-bottom: 15px !important; padding: 0 !important; overflow: hidden !important; box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; }
a.trabfinal, .biblioguia h4 { display: flex !important; align-items: center !important; padding: 15px 20px !important; background-color: var(--primary) !important; color: #ffffff !important; text-decoration: none !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color 0.3s ease !important; margin: 0 !important; }
a.trabfinal:hover, .biblioguia h4:hover { background-color: var(--accent) !important; }
.biblioguia img.img_plus { display: none !important; }
.biblioguia h4[onclick*="expandBase"]::before, a.trabfinal::before { content: "\f0d7" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; margin-right: 12px !important; font-size: 16px !important; }
.biblioguia h4[onclick*="enviarFormulario"]::before { content: "\f08e" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; margin-right: 12px !important; font-size: 14px !important; color: var(--accent) !important; }
.anio { background-color: #fdfdfd !important; }
.anio > p > a { display: flex !important; align-items: center !important; padding: 12px 20px 12px 40px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--primary) !important; border-bottom: 1px solid #eaeaea !important; background-color: #f9f9f9 !important; }
.anio > p > a:hover { color: var(--accent) !important; }
.anio > p > a::before { content: "\f115" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; margin-right: 10px !important; color: #888 !important; }
.cuatri > p > a { display: flex !important; align-items: center !important; padding: 10px 20px 10px 60px !important; font-size: 13px !important; font-weight: 600 !important; color: #555 !important; border-bottom: 1px dashed #eaeaea !important; }
.cuatri > p > a:hover { color: var(--accent) !important; }
.cuatri > p > a::before { content: "\f0da" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; margin-right: 8px !important; color: #ccc !important; }
.materia { background-color: #ffffff !important; padding: 5px 0 !important; }
.materia form, .materia p { margin: 0 !important; padding: 0 !important; display: block !important; }
.materia p:empty { display: none !important; }
.materia .btnMateria { background: transparent !important; border: none !important; border-bottom: 1px solid #fcfcfc !important; color: var(--text-dark) !important; width: 100% !important; text-align: left !important; padding: 10px 20px 10px 85px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; position: relative !important; }
.materia .btnMateria:hover { color: var(--primary) !important; background-color: #f0f8ff !important; padding-left: 90px !important; font-weight: 600 !important; }
.materia .btnMateria::before { content: "\f02d" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; position: absolute !important; left: 65px !important; color: var(--accent) !important; font-size: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }

/* ========================================================= */
/* --- 11. PÁGINAS INTERNAS, EQUIPO Y PLATAFORMAS --- */
/* ========================================================= */
.menu { width: 100% !important; max-width: 900px !important; margin: 40px auto !important; padding: 50px !important; background-color: var(--white) !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; box-sizing: border-box !important; }
.menu .header_title h1 { font-size: 32px !important; color: var(--primary) !important; margin-top: 0 !important; margin-bottom: 40px !important; padding-bottom: 15px !important; border-bottom: 3px solid var(--accent) !important; font-weight: 700 !important; }
.menu h3 { font-size: 22px !important; color: var(--primary) !important; margin-top: 35px !important; margin-bottom: 15px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.menu h3::before { content: "" !important; display: inline-block !important; width: 6px !important; height: 22px !important; background-color: var(--accent) !important; border-radius: 4px !important; }
.menu p { font-size: 15px !important; color: var(--text-dark) !important; line-height: 1.8 !important; margin-bottom: 20px !important; text-align: justify !important; }
.menu p a { color: var(--accent) !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 4px !important; transition: color 0.3s ease !important; }
.menu p a:hover { color: var(--primary) !important; }
.itemAuthorBlock { background-color: var(--primary) !important; color: #ffffff !important; display: flex !important; align-items: center !important; gap: 30px !important; padding: 30px !important; border-radius: 10px !important; margin-top: 50px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; }
.itemAuthorAvatar { width: 120px !important; height: 120px !important; border-radius: 50% !important; object-fit: cover !important; border: 4px solid rgba(255, 255, 255, 0.1) !important; background-color: #fff !important; }
.itemAuthorDetails { flex-grow: 1 !important; }
.itemAuthorName { margin: 0 0 10px 0 !important; }
.itemAuthorName a { color: var(--accent) !important; font-size: 22px !important; }
.itemAuthorName a::before { display: none !important; }
.itemAuthorDetails p { color: #e0e0e0 !important; font-size: 14px !important; line-height: 1.6 !important; margin: 0 !important; text-align: left !important; }
.itemAuthorDetails p strong { color: #ffffff !important; }
.itemAuthorDetails p a { color: var(--accent) !important; text-decoration: none !important; }
.itemAuthorDetails p a:hover { text-decoration: underline !important; }

/* Organigrama */
#organigrama_cuerpo { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 40px 30px !important; margin: 60px auto !important; max-width: 1200px !important; padding: 0 20px !important; }
#organigrama_cuerpo .person { background-color: var(--white) !important; border-radius: 12px !important; padding: 0 20px 30px 20px !important; text-align: center !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; border: 1px solid #eaeaea !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
#organigrama_cuerpo .person:hover { transform: translateY(-10px) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; border-color: var(--accent) !important; }
#organigrama_cuerpo .person img { width: 120px !important; height: 120px !important; border-radius: 50% !important; object-fit: cover !important; margin-top: -40px !important; border: 5px solid #ffffff !important; box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; background-color: #f5f7fa !important; transition: transform 0.4s ease !important; }
#organigrama_cuerpo .person:hover img { transform: scale(1.05) !important; }
#organigrama_cuerpo .info_organigrama { margin-top: 20px !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important; width: 100% !important; }
#organigrama_cuerpo .info_organigrama h2 { font-size: 18px !important; color: var(--primary) !important; margin: 0 0 10px 0 !important; font-weight: 700 !important; line-height: 1.3 !important; }
#organigrama_cuerpo .info_organigrama .role { font-size: 13px !important; color: #666666 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; margin-bottom: 20px !important; border-bottom: 2px solid var(--accent) !important; padding-bottom: 15px !important; display: inline-block !important; width: fit-content !important; align-self: center !important; }
#organigrama_cuerpo .social-media { margin-top: auto !important; }
#organigrama_cuerpo .social-media a { display: inline-flex !important; align-items: center !important; gap: 8px !important; background-color: #f0f8ff !important; color: var(--primary) !important; padding: 8px 15px !important; border-radius: 30px !important; font-size: 13px !important; font-weight: 600 !important; transition: all 0.3s ease !important; width: 100% !important; justify-content: center !important; }
#organigrama_cuerpo .social-media a:hover { background-color: var(--accent) !important; color: #ffffff !important; }
#organigrama_cuerpo br { display: none !important; }

/* ========================================================= */
/* --- PLATAFORMAS E-BOOK Y BASES DE DATOS (FLEXBOX FIX) --- */
/* ========================================================= */
#plataformas { max-width: 1200px !important; margin: 40px auto !important; padding: 0 20px !important; }

/* Contenedores Flexbox (Fuerzan el orden) */
#primerostres, #ultimos { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    gap: 30px !important; 
    margin-bottom: 50px !important; 
    width: 100% !important;
}

/* Los Títulos ocupan toda la fila (100%) */
#primerostres h1, #ultimos h1 { 
    width: 100% !important; 
    font-size: 26px !important; color: var(--primary) !important; border-bottom: 3px solid var(--accent) !important; 
    padding-bottom: 10px !important; margin: 0 auto 30px auto !important; font-weight: 800 !important; 
    display: block !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-align: center !important;
}

/* Ocultamos los saltos de línea rotos del HTML */
#plataformas br { display: none !important; } 

/* Las cajas individuales: Calculamos exacto para 3 por fila */
#uno, #dos, #tres, #cuatro, #cinco { 
    display: block !important;
    width: calc(33.333% - 20px) !important; /* 3 por fila restando el gap */
    min-width: 280px !important; /* Límite para que no se aplasten */
    max-width: 350px !important;
}

/* Tarjeta Moderna con Efecto Hover/Overlay */
#plataformas .flip-box { 
    background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important; 
    overflow: hidden !important; border: 1px solid #eef2f5 !important; transition: all 0.3s ease !important; 
    height: 180px !important; position: relative !important; width: 100% !important;
}
#plataformas .flip-box:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 35px rgba(52, 204, 255, 0.2) !important; border-color: var(--accent) !important; }
#plataformas .flip-box a { display: block !important; height: 100% !important; text-decoration: none !important; position: relative !important; }

#plataformas .flip-box-inner { width: 100% !important; height: 100% !important; position: relative !important; }

/* Frente (El Logo) */
#plataformas .flip-box-front { 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    height: 100% !important; padding: 20px !important; background-color: #ffffff !important; 
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; 
    z-index: 1 !important; transition: all 0.3s ease !important; box-sizing: border-box !important;
}
#plataformas .flip-box-front img { max-width: 80% !important; max-height: 80px !important; object-fit: contain !important; transition: transform 0.3s ease !important; }
#plataformas .flip-box:hover .flip-box-front { opacity: 0.1 !important; filter: blur(3px) !important; } /* Pasa al fondo borroso al hacer hover */

/* Dorso (Información de estado) */
#plataformas .flip-box-back { 
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; 
    padding: 20px !important; position: absolute !important; top: 0 !important; left: 0 !important; 
    width: 100% !important; height: 100% !important; z-index: 2 !important; 
    opacity: 0 !important; visibility: hidden !important; transform: translateY(15px) !important; 
    transition: all 0.3s ease !important; box-sizing: border-box !important;
}
#plataformas .flip-box:hover .flip-box-back { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }

#plataformas .flip-box-back h2 { 
    font-size: 15px !important; font-weight: 700 !important; text-align: center !important; margin: 0 !important; 
    line-height: 1.4 !important; color: var(--primary) !important; 
}
#plataformas .flip-box-back h2::before { 
    content: "\f05a"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent); 
    display: block !important; font-size: 28px !important; margin-bottom: 12px !important; 
}

/* Responsive Celulares */
@media (max-width: 900px) {
    #uno, #dos, #tres, #cuatro, #cinco { width: 100% !important; max-width: 100% !important; }
}

/* ========================================================= */
/* --- 12. FOOTER --- */
/* ========================================================= */
.pie-pagina { width: 100% !important; background-color: var(--primary) !important; color: #ffffff !important; margin-top: 60px !important; padding-top: 40px !important; }
.pie-pagina .grupo-1 { width: 100% !important; max-width: 1300px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.pie-pagina .box { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 25px !important; margin-bottom: 30px !important; }
.pie-pagina .red-social { display: flex !important; gap: 15px !important; flex-wrap: wrap !important; justify-content: center !important; }
.pie-pagina .red-social a { display: flex !important; align-items: center !important; justify-content: center !important; width: 45px !important; height: 45px !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; font-size: 18px !important; transition: all 0.3s ease !important; }
.pie-pagina .red-social a:hover { transform: translateY(-5px) !important; color: #ffffff !important; }
.pie-pagina .red-social a.facebook:hover { background-color: #1877F2 !important; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4) !important; }
.pie-pagina .red-social a.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4) !important; border: none !important; }
.pie-pagina .red-social a.twitter:hover { background-color: #000000 !important; box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2) !important; }
.pie-pagina .red-social a.whatsapp:hover { background-color: #25D366 !important; box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4) !important; }
.pie-pagina .red-social a.youtube:hover { background-color: #FF0000 !important; box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4) !important; }
.pie-pagina .ubicacion { max-width: 600px !important; }
.pie-pagina .ubicacion a.location { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; color: #cccccc !important; transition: color 0.3s ease !important; font-size: 14px !important; }
.pie-pagina .ubicacion a.location p { margin: 0 !important; }
.pie-pagina .ubicacion a.location i { font-size: 20px !important; color: var(--accent) !important; transition: transform 0.3s ease !important; }
.pie-pagina .ubicacion a.location:hover { color: #ffffff !important; }
.pie-pagina .ubicacion a.location:hover i { transform: scale(1.2) !important; }
.pie-pagina .grupo-2 { background-color: #151e22 !important; padding: 20px 10px !important; text-align: center !important; color: #888888 !important; border-top: 1px solid rgba(255,255,255,0.05) !important; }
.pie-pagina .grupo-2 small { font-size: 13px !important; letter-spacing: 0.5px !important; }

/* ========================================================= */
/* --- 13. BOT DE ATENCIÓN (UI & COACHMARK) --- */
/* ========================================================= */
#biblio-bot-container { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 999999 !important; font-family: var(--font-main) !important; }
#biblio-bot-trigger { width: 60px !important; height: 60px !important; border-radius: 50% !important; background-color: var(--accent) !important; color: #ffffff !important; border: none !important; box-shadow: 0 5px 20px rgba(52, 204, 255, 0.4) !important; cursor: pointer !important; font-size: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }
#biblio-bot-trigger:hover { transform: scale(1.1) !important; background-color: var(--primary) !important; box-shadow: 0 8px 25px rgba(31, 42, 48, 0.4) !important; }
#biblio-bot-window { position: absolute !important; bottom: 80px !important; right: 0 !important; width: 360px !important; height: 520px !important; background: #ffffff !important; border-radius: 16px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border: 1px solid #eaeaea !important; transform-origin: bottom right !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }
.chat-hidden { opacity: 0 !important; visibility: hidden !important; transform: scale(0.5) translateY(50px) !important; pointer-events: none !important; }
.chat-visible { opacity: 1 !important; visibility: visible !important; transform: scale(1) translateY(0) !important; pointer-events: auto !important; }
.chat-header { background: var(--primary) !important; color: #ffffff !important; padding: 15px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.header-info { display: flex !important; align-items: center !important; gap: 12px !important; }
.bot-avatar { width: 40px !important; height: 40px !important; background: rgba(255,255,255,0.1) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; color: var(--accent) !important; }
.header-info h4 { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color:#fff !important; }
.header-info span { font-size: 11px !important; color: #a0abb0 !important; }
.close-chat { background: transparent !important; border: none !important; color: #ffffff !important; font-size: 20px !important; cursor: pointer !important; opacity: 0.7 !important; transition: opacity 0.3s !important; }
.close-chat:hover { opacity: 1 !important; }
.chat-body { flex-grow: 1 !important; padding: 20px !important; background: #f9fbfd !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 15px !important; }
.message { max-width: 85% !important; padding: 12px 16px !important; border-radius: 12px !important; font-size: 14px !important; line-height: 1.5 !important; animation: fadeIn 0.3s ease !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.bot-message { background: #ffffff !important; color: var(--text-dark) !important; align-self: flex-start !important; border: 1px solid #eaeaea !important; border-bottom-left-radius: 4px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important; }
.user-message { background: var(--primary) !important; color: #ffffff !important; align-self: flex-end !important; border: 1px solid var(--primary) !important; border-bottom-right-radius: 4px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; }
.chat-quick-replies { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 5px !important; align-self: flex-start !important; width: 85% !important; }
.quick-reply-btn { background: #ffffff !important; border: 1px solid var(--accent) !important; color: var(--primary) !important; padding: 10px 15px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 600 !important; font-family: var(--font-main) !important; cursor: pointer !important; transition: all 0.2s ease !important; text-align: left !important; box-shadow: 0 2px 5px rgba(52, 204, 255, 0.1) !important; }
.quick-reply-btn:hover { background: var(--accent) !important; color: #ffffff !important; transform: translateX(5px) !important; }
.typing-indicator { font-style: italic !important; color: #999 !important; font-size: 12px !important; padding: 5px 15px !important; align-self: flex-start !important; }
#chat-options { display: none !important; }

/* Coachmark Globo */
#biblio-bot-coachmark { position: fixed !important; bottom: 110px !important; right: 30px !important; z-index: 999998 !important; display: flex !important; align-items: center !important; background: #ffffff !important; border: 2px solid var(--accent) !important; border-radius: 20px !important; padding: 15px 20px !important; box-shadow: 0 8px 25px rgba(52, 204, 255, 0.25) !important; font-family: var(--font-main) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) !important; transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important; cursor: pointer !important; }
#biblio-bot-coachmark::after { content: '' !important; position: absolute !important; bottom: -12px !important; right: 25px !important; width: 0 !important; height: 0 !important; border-left: 12px solid transparent !important; border-right: 12px solid transparent !important; border-top: 12px solid var(--accent) !important; }
#biblio-bot-coachmark.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.coachmark-avatar { width: 50px !important; height: 50px !important; border-radius: 50% !important; overflow: hidden !important; margin-right: 15px !important; border: 2px solid #ffffff !important; box-shadow: 0 0 0 2px var(--accent) !important; flex-shrink: 0 !important; }
.coachmark-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.coachmark-text { display: flex !important; flex-direction: column !important; }
.coachmark-text h4 { margin: 0 !important; font-size: 16px !important; font-weight: 800 !important; color: var(--primary) !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; }
.coachmark-text p { margin: 3px 0 0 0 !important; font-size: 12px !important; color: var(--text-dark) !important; }
@media (max-width: 500px) { #biblio-bot-trigger { bottom: 20px !important; right: 20px !important; } #biblio-bot-window { position: fixed !important; bottom: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; } .chat-hidden { transform: translateY(100%) !important; } .chat-visible { transform: translateY(0) !important; } #biblio-bot-coachmark { display: none !important; } }

/* ========================================================= */
/* --- 14. MODAL RESERVAS CUSTOM --- */
/* ========================================================= */
#modal-reserva-custom { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(3px) !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; animation: fadeIn 0.2s ease !important; font-family: var(--font-main), sans-serif !important; }
.reserva-box { background: #ffffff !important; width: 90% !important; max-width: 420px !important; border-radius: 12px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; overflow: hidden !important; text-align: center !important; animation: slideUp 0.3s ease !important; }
.reserva-header { background: var(--primary) !important; color: #ffffff !important; padding: 25px 20px 20px 20px !important; }
.reserva-header i { font-size: 40px !important; color: var(--accent) !important; margin-bottom: 15px !important; }
.reserva-header h3 { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; }
.reserva-body { padding: 25px !important; color: var(--text-dark) !important; }
.reserva-body p { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 10px 0 !important; }
.reserva-body small { display: block !important; font-size: 13px !important; color: #666 !important; line-height: 1.5 !important; background: #fdf3f2 !important; border-left: 3px solid #e74c3c !important; padding: 10px !important; border-radius: 0 4px 4px 0 !important; text-align: left !important; }
.reserva-footer { padding: 20px !important; background: #f9fbfd !important; border-top: 1px solid #eaeaea !important; display: flex !important; justify-content: center !important; gap: 15px !important; }
.btn-cancelar-res, .btn-confirmar-res { padding: 10px 20px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; border: none !important; transition: all 0.2s ease !important; }
.btn-cancelar-res { background: transparent !important; color: #666 !important; border: 1px solid #ccc !important; }
.btn-cancelar-res:hover { background: #f0f0f0 !important; color: #333 !important; }
.btn-confirmar-res { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(52, 204, 255, 0.3) !important; }
.btn-confirmar-res:hover { background: var(--primary) !important; transform: translateY(-2px) !important; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ========================================================= */
/* --- 15. FORMULARIO DE CAMBIO DE CONTRASEÑA --- */
/* ========================================================= */
#change-password { 
    width: 100% !important; 
    max-width: 600px !important; 
    margin: 50px auto !important; 
    background: #ffffff !important; 
    border-radius: 12px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; 
    padding: 40px !important; 
    box-sizing: border-box !important; 
    border: 1px solid #eef2f5 !important; 
}

/* Forzamos a la tabla a comportarse como un contenedor flex/grid moderno */
#change-password table, 
#change-password tbody { 
    width: 100% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 20px !important; 
}

#change-password tr { 
    display: flex !important; 
    flex-direction: column !important; 
    width: 100% !important; 
    gap: 8px !important;
}

#change-password td { 
    width: 100% !important; 
    display: block !important; 
    padding: 0 !important; 
    text-align: left !important;
}

/* Estilos de las Etiquetas (Labels) */
#change-password tr td:first-child { 
    font-weight: 700 !important; 
    color: var(--primary) !important; 
    font-size: 14px !important; 
}

/* Contenedor del Input y el Ojo */
#change-password tr td:nth-child(2) { 
    position: relative !important; 
    display: flex !important; 
    flex-direction: column !important;
}

/* Estilos de los Inputs de Contraseña */
#change-password input[type="password"], 
#change-password input[type="text"] { 
    width: 100% !important; 
    padding: 12px 45px 12px 15px !important; /* Espacio derecho para el ojo */
    border: 1px solid #dcdcdc !important; 
    border-radius: 6px !important; 
    background-color: #f9fbfd !important; 
    font-size: 14px !important; 
    box-sizing: border-box !important; 
    transition: all 0.3s ease !important; 
}

#change-password input[type="password"]:focus, 
#change-password input[type="text"]:focus { 
    border-color: var(--accent) !important; 
    background-color: #ffffff !important; 
    outline: none !important; 
    box-shadow: 0 0 0 4px rgba(52, 204, 255, 0.15) !important; 
}

/* Estilo del Ojo para ver contraseña */
#change-password .fa-eye, 
#change-password .fa-eye-slash { 
    position: absolute !important; 
    right: 15px !important; 
    top: 22px !important; /* Centrado vertical respecto al input */
    transform: translateY(-50%) !important; 
    color: #888 !important; 
    cursor: pointer !important; 
    font-size: 16px !important; 
    z-index: 10 !important;
}
#change-password .fa-eye:hover, 
#change-password .fa-eye-slash:hover { color: var(--accent) !important; }

/* Textos de ayuda (Reglas de seguridad) */
#change-password .helper { 
    margin-top: 8px !important; 
    font-size: 12px !important; 
    color: #666 !important; 
    line-height: 1.5 !important; 
    background: #f4fcff !important; 
    border-left: 3px solid var(--accent) !important; 
    padding: 10px !important; 
    border-radius: 0 4px 4px 0 !important; 
}

/* Estilo del Botón Validar */
#change-password tr:last-child { margin-top: 15px !important; }
#change-password input.bouton { 
    background-color: var(--accent) !important; 
    color: #ffffff !important; 
    width: 100% !important; 
    padding: 14px !important; 
    border: none !important; 
    border-radius: 6px !important; 
    font-size: 15px !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    cursor: pointer !important; 
    transition: all 0.3s ease !important; 
    box-shadow: 0 4px 10px rgba(52, 204, 255, 0.2) !important; 
}
#change-password input.bouton:hover { 
    background-color: var(--primary) !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important; 
}
#show_cart_print{
	display:none;
}
/* ========================================================= */
/* --- 16. CABECERA DE REVISTAS Y BOLETINES (FIJO Y LIMPIO) --- */
/* ========================================================= */

/* 1. Ocultar tabla y textos sueltos en el TD */
body table:has(.bulletin_header), 
body table tbody:has(.bulletin_header), 
body table tr:has(.bulletin_header), 
body table td:has(.bulletin_header) {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Silenciamos ABSOLUTAMENTE todo el texto huérfano (Mención de fecha, etc.) */
body table td:has(.bulletin_header),
body table td div.bulletin_header {
    font-size: 0 !important; 
    color: transparent !important;
    line-height: 0 !important;
}

/* Escondemos los saltos de línea rotos */
body table td:has(.bulletin_header) br {
    display: none !important;
}

/* 2. Diseño de la Tarjeta Principal */
body table td div.bulletin_header,
div.bulletin_header {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
    border: 1px solid #eef2f5 !important;
    max-width: 1000px !important;
    margin: 20px auto 30px auto !important; 
    display: block !important;
    width: 100% !important;
}

/* 3. Estilo del Título (Revivimos su visibilidad) */
body table td div.bulletin_header h3 {
    color: var(--primary) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    border-bottom: 3px solid var(--accent) !important;
    padding-bottom: 15px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

/* Ocultar el viejo iconito de boletín de PMB */
body table td div.bulletin_header h3 > img[src*="icon_bul"] { display: none !important; }

/* Nuevo icono vectorial de Libro */
body table td div.bulletin_header h3::before {
    content: "\f02d" !important; 
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: var(--accent) !important;
    font-size: 22px !important;
    margin-right: 8px !important;
}

body table td div.bulletin_header h3 a { color: var(--primary) !important; transition: 0.3s ease !important; text-decoration: none !important; }
body table td div.bulletin_header h3 a:hover { color: var(--accent) !important; }

/* Efecto "Tag" elegante para la parte del Año y Número */
body table td div.bulletin_header h3 b {
    background-color: #f0f8ff !important;
    color: var(--accent) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    margin-left: 10px !important;
    border: 1px solid rgba(52, 204, 255, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
}

/* 4. Transformar el "Mundito" (Enlace Externo) en un Botón Elegante */
body table td div.bulletin_header h3 span.notice_link {
    display: inline-flex !important;
    margin-left: auto !important; /* Empuja el botón a la derecha del todo */
}

body table td div.bulletin_header h3 span.notice_link a {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    line-height: 1.5 !important;
}

body table td div.bulletin_header h3 span.notice_link a:hover {
    background-color: var(--accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(52, 204, 255, 0.3) !important;
}

/* Ocultamos la imagen fea del mundito */
body table td div.bulletin_header h3 span.notice_link a img { display: none !important; }

/* Le inyectamos un icono moderno de FontAwesome al botón y texto */
body table td div.bulletin_header h3 span.notice_link a::before {
    content: "\f08e" !important; /* Icono de link externo */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}
body table td div.bulletin_header h3 span.notice_link a::after {
    content: "Acceso en Línea" !important; /* Texto del botón */
}

/* Ocultar el segundo mundito naranja (doc_num) si no se usa */
body table td div.bulletin_header h3 > a[href*="doc_num"] img { display: none !important; }

/* Responsive para celulares */
@media (max-width: 768px) {
    body table td div.bulletin_header { padding: 25px 20px !important; margin-left: 15px !important; margin-right: 15px !important; width: calc(100% - 30px) !important; }
    body table td div.bulletin_header h3 { font-size: 20px !important; }
    body table td div.bulletin_header h3 b { margin-left: 0 !important; }
    body table td div.bulletin_header h3 span.notice_link { margin-left: 0 !important; width: 100% !important; margin-top: 10px !important; }
    body table td div.bulletin_header h3 span.notice_link a { width: 100% !important; justify-content: center !important; }
}
/* ========================================================= */
/* --- 17. ENCABEZADO DE ARTÍCULOS (BULLETIN ANALYSIS) --- */
/* ========================================================= */

/* Contenedor principal de la sección de artículos */
.bulletin_analysis {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 40px auto 20px auto !important; /* Centrado y con respiro */
    padding: 0 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Ocultamos los <br> inútiles que PMB mete al principio */
.bulletin_analysis > br:first-child {
    display: none !important;
}

/* El título "Artículos" */
.bulletin_analysis h3:first-of-type {
    font-size: 22px !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
    border-bottom: 2px dashed #eaeaea !important; /* Línea divisoria elegante */
    padding-bottom: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Le inyectamos un iconito al título */
.bulletin_analysis h3:first-of-type::before {
    content: "\f15c" !important; /* Icono de documento/artículo */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: var(--accent) !important;
    font-size: 20px !important;
}

/* El botón de "Añadir el resultado a su cesta" */
.bulletin_analysis > a.img_basket {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f5f7fa !important;
    color: var(--primary) !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid #e0e0e0 !important;
    transition: all 0.3s ease !important;
    margin-bottom: 30px !important; /* Lo separamos de la primera tarjeta */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

/* Hover del botón */
.bulletin_analysis > a.img_basket:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* Icono para el botón de la cesta */
.bulletin_analysis > a.img_basket::before {
    content: "\f291" !important; /* Icono de canasta (shopping-basket) */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    font-size: 14px !important;
}

/* Limpiamos el margen por defecto del blockquote que usa PMB para envolver los artículos */
.bulletin_analysis blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ========================================================= */
/* --- FIX DEFINITIVO: GHOST SCROLL (SOLO MÓVILES) --- */
/* ========================================================= */

@media (max-width: 992px) {
    /* 1. Forzamos el límite estricto SOLO en el nivel más alto */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important; 
        position: relative !important;
    }

    /* 2. LIBERAMOS los contenedores para que el menú de usuario pueda caer sin ser cortado */
    #container, #wrapper, #main, body#pmbopac, .header-top {
        width: 100% !important;
        overflow: visible !important; /* <--- ACÁ ESTÁ LA SOLUCIÓN */
    }

    /* 3. Neutralizamos márgenes negativos inyectados por PMB */
    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* 4. Evitamos que contenedores flex o carruseles estiren la pantalla */
    .swiper-container, .swiper, #info .swiper-wrapper {
        max-width: 100% !important;
    }
}

/* ========================================================= */
/* --- MEJORA UX: MOTIVOS DE NO RENOVACIÓN EXACTOS --- */
/* ========================================================= */

/* Base de la tarjeta (Forma y tamaño, sin color) */
.badge-motivo {
    display: inline-flex !important;
    align-items: flex-start !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    width: 100% !important; 
    max-width: 250px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

.badge-motivo i {
    margin-top: 2px !important;
    font-size: 15px !important;
}

/* VARIANTE ROJA: Bloqueo duro (Reservado) */
.badge-danger {
    background-color: #fdf3f2 !important; 
    color: #e74c3c !important; 
    border: 1px solid #fadcd9 !important;
    box-shadow: 0 2px 5px rgba(231, 76, 60, 0.1) !important;
}

/* VARIANTE AZUL: Informativo de Calendario (Día de vencimiento) */
.badge-info {
    background-color: #f0f8ff !important; 
    color: #0077bb !important; 
    border: 1px solid #cce5ff !important;
    box-shadow: 0 2px 5px rgba(0, 119, 187, 0.1) !important;
}

/* VARIANTE NARANJA: Advertencia (Límite alcanzado u otro) */
.badge-warning {
    background-color: #fff8f0 !important; 
    color: #e67e22 !important; 
    border: 1px solid #fde3c8 !important;
    box-shadow: 0 2px 5px rgba(230, 126, 34, 0.1) !important;
}

/* Ajuste para celulares */
@media (max-width: 900px) {
    .badge-motivo { 
        max-width: 100% !important; 
        justify-content: center !important; 
        text-align: center !important;
        margin-top: 10px !important;
    }
}