/* ========================================================== BOOKCORE UI 2026 Paleta original conservada. Se refina tipografía, jerarquía, espaciados y se corrigen errores de contraste/estructura (footer, navbar, contenedores sin estilo). ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap'); :root { /* Paleta original (NO se toca) */ --navy: #002450; --deep-blue: #0B3867; --primary: #0D5289; --green: #4FA33A; --white: #ffffff; --light: #F5F8FC; --text: #1E293B; /* Tokens nuevos, derivados de la misma paleta */ --muted: #64748b; --border-suave: rgba(15, 23, 42, .08); --borde-claro: rgba(255, 255, 255, .20); --superficie: #ffffff; --shadow-sm: 0 8px 20px rgba(0,0,0,.08); --shadow-md: 0 15px 35px rgba(0,0,0,.15); --shadow-lg: 0 25px 55px rgba(0, 15, 40, .35); --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --transition: .35s ease; /* Tipografía pública: amigable, de lectura fácil */ --fuente-titulos: "Fraunces", Georgia, "Times New Roman", serif; --fuente-texto: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Tipografía administrativa: seria, tipo panel de datos */ --fuente-titulos-admin: "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif; --fuente-texto-admin: "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif; --fuente-numeros-admin: "IBM Plex Mono", "Consolas", monospace; } /* ========================================================== GENERAL ========================================================== */ * { box-sizing: border-box; } html { font-size: 16px; min-height: 100%; scroll-behavior: smooth; } header { flex: 0 0 auto; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--fuente-texto); color: var(--text); background: linear-gradient( 135deg, #002450 0%, #0B3867 45%, #0D5289 100% ); background-attachment: fixed; } h1, h2, h3, .h1, .h2, .h3 { font-family: var(--fuente-titulos); letter-spacing: -.01em; } /* ========================================================== TIPOGRAFÍA ADMINISTRATIVA Se activa agregando la clase "zona-admin" al (lo hace _Layout.cshtml automáticamente en las páginas de gestión: Panel, Libros, Autores, Categorías, Ejemplares, Usuarios de biblioteca y Préstamos). El resto del sitio conserva la tipografía pública (Fraunces + Inter), pensada para lectura cómoda; la zona admin usa una fuente más seria y "de datos". ========================================================== */ body.zona-admin { font-family: var(--fuente-texto-admin); } body.zona-admin h1, body.zona-admin h2, body.zona-admin h3, body.zona-admin .h1, body.zona-admin .h2, body.zona-admin .h3 { font-family: var(--fuente-titulos-admin); letter-spacing: 0; font-weight: 700; } body.zona-admin .kpi-valor, body.zona-admin .anillo-progreso-interior, body.zona-admin .ranking-conteo, body.zona-admin .card-body h2 { font-family: var(--fuente-numeros-admin); } /* ========================================================== FONDO DECORATIVO ========================================================== */ body::before { content: ""; position: fixed; width: 450px; height: 450px; background: #4FA33A; opacity: .15; border-radius: 50%; filter: blur(130px); top: -150px; left: -100px; z-index: -1; } body::after { content: ""; position: fixed; width: 500px; height: 500px; background: #0D5289; opacity: .20; border-radius: 50%; filter: blur(140px); right: -150px; bottom: -200px; z-index: -1; } /* ========================================================== NAVBAR ========================================================== */ .navbar { position: relative; isolation: isolate; z-index: 1030; margin: 20px; border-radius: 22px !important; background: transparent !important; border: 1px solid var(--borde-claro); box-shadow: var(--shadow-md); } .navbar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .navbar-brand { font-family: var(--fuente-titulos); font-size: 1.7rem; font-weight: 600; color: white !important; } .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; border-radius: 12px; transition: var(--transition); padding: 10px 18px !important; } .nav-link:hover, .nav-link:focus, .nav-link.active { color: white !important; background: rgba(255,255,255,.15); transform: translateY(-2px); } .navbar-text { color: rgba(255,255,255,.85); } /* El toggler debe verse siempre claro, sin importar la clase navbar-light/navbar-dark que traiga el marcado, porque el fondo real de la barra siempre es oscuro (glass sobre degradado). */ .navbar-toggler { border-color: var(--borde-claro) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); } /* ========================================================== CONTENIDO / ESTRUCTURA DE PÁGINA ========================================================== */ .contenido-principal { flex: 1 0 auto; width: 100%; max-width: 1520px; } .container { animation: fadeUp .6s ease; } /* Envoltorio estándar usado por casi todas las vistas internas (listados, formularios, detalle). Antes no existía: las tarjetas quedaban pegadas al footer. Ahora se garantiza aire arriba y, sobre todo, abajo. */ .contenedor-pagina { padding: 8px 0 64px; } /* ========================================================== TARJETAS ========================================================== */ .tarjeta-panel { background: linear-gradient(135deg, #ffffff 0%, #d7f0c6 45%, #a3db8a 100%); border: none; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-md); transition: var(--transition); } .tarjeta-panel:hover { transform: translateY(-4px); } /* Cartas estándar de Bootstrap (paneles del panel administrativo, etc.) alineadas visualmente con .tarjeta-panel para que no se vean como un componente distinto del resto de la interfaz. */ .card { background: linear-gradient(135deg, #ffffff 0%, #d7f0c6 45%, #a3db8a 100%); border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-md); } .card-body h2, .card-body .h2 { font-family: var(--fuente-titulos); color: var(--navy); } /* ========================================================== BOTONES ========================================================== */ .btn { border-radius: 30px; font-weight: 600; letter-spacing: .01em; transition: var(--transition); } .btn-primary { background: var(--primary); border: none; } .btn-primary:hover, .btn-primary:focus { background: var(--green); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(79,163,58,.45); } .btn-success { border: none; background: var(--green); } .btn-success:hover { transform: translateY(-3px); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-2px); } .btn-outline-light:hover { color: var(--navy); } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(13,82,137,.25); } /* ========================================================== INPUTS ========================================================== */ .form-label { font-weight: 600; color: var(--navy); } .form-control, .form-select { border-radius: 14px; border: 1px solid #dbe3ec; padding: 12px; transition: var(--transition); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(13,82,137,.15); } /* ========================================================== TABLAS ========================================================== */ .table { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .table thead { background: linear-gradient(180deg, #eef8ea, #f5faf1); color: var(--navy); } .table th { border: none; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; padding-top: 14px; padding-bottom: 14px; color: var(--navy); } .table td { vertical-align: middle; } .table tbody tr { transition: var(--transition); } .table tbody tr:hover { background: #eef6ff; } /* ========================================================== DROPDOWN ========================================================== */ .dropdown-menu { border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 8px; z-index: 1050; } .dropdown-item { border-radius: 10px; padding: 8px 14px; transition: var(--transition); } .dropdown-item:hover, .dropdown-item:focus { background: var(--primary); color: white; } /* ========================================================== ALERTAS Y BADGES ========================================================== */ .alert { border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .badge { border-radius: 999px; padding: .45em .9em; font-weight: 600; letter-spacing: .02em; } /* ========================================================== AYUDAS ========================================================== */ .texto-ayuda, .texto-secundario { color: var(--muted); } /* ========================================================== BARRA DE PRÉSTAMOS ========================================================== */ .celda-tiempo-prestamo { min-width: 240px; } .barra-tiempo-prestamo { height: 12px; border-radius: 999px; background: #d9e3ef; } .barra-tiempo-prestamo .progress-bar { border-radius: 999px; } /* ========================================================== SCROLL ========================================================== */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: #4FA33A; border-radius: 999px; } ::-webkit-scrollbar-track { background: #002450; } /* ========================================================== ANIMACIONES ========================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /*========================================================= HOME =========================================================*/ .hero-bookcore { position: relative; padding: 40px 0 24px; } .hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(79,163,58,.15), transparent 45%); pointer-events: none; } .min-vh-75 { min-height: 0; } .hero-bookcore h1 { font-family: var(--fuente-titulos); } .glass-card { background: rgba(255,255,255,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.20); border-radius: var(--radius-lg); padding: 28px; color: white; box-shadow: var(--shadow-lg); transition: .35s; } .glass-card:hover { transform: translateY(-8px); } .glass-card h3 { font-family: var(--fuente-titulos); } .feature-card { background: linear-gradient(135deg, #ffffff 0%, #d7f0c6 45%, #a3db8a 100%); border-radius: var(--radius-lg); padding: 35px; text-align: center; transition: .35s; box-shadow: var(--shadow-sm); height: 100%; } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); } .feature-icon { width: 85px; height: 85px; margin: auto; margin-bottom: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; background: linear-gradient(135deg, #0D5289, #4FA33A); color: white; } .feature-card h3 { color: #002450; font-weight: 700; font-family: var(--fuente-titulos); } .feature-card p { color: #6b7280; } .text-success { color: #4FA33A !important; } /*========================================================= PANEL ADMINISTRATIVO =========================================================*/ .panel-encabezado { background: linear-gradient(135deg, #ffffff 0%, #eef8ea 100%); border-radius: var(--radius); padding: 22px 28px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 18px; } .panel-encabezado-icono { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: linear-gradient(135deg, var(--navy), var(--primary)); color: white; flex-shrink: 0; } /* --- Tarjetas KPI --- */ .kpi-card { background: #ffffff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--primary); transition: var(--transition); height: 100%; } .kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .kpi-card.acento-verde { border-top-color: var(--green); } .kpi-card.acento-info { border-top-color: #0EA5B7; } .kpi-card.acento-ambar { border-top-color: #E8A33D; } .kpi-icono { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; background: rgba(13,82,137,.1); color: var(--primary); } .kpi-card.acento-verde .kpi-icono { background: rgba(79,163,58,.12); color: var(--green); } .kpi-card.acento-info .kpi-icono { background: rgba(14,165,183,.12); color: #0EA5B7; } .kpi-card.acento-ambar .kpi-icono { background: rgba(232,163,61,.16); color: #C9862B; } .kpi-valor { font-family: var(--fuente-titulos); font-size: 2.1rem; font-weight: 700; color: var(--navy); line-height: 1; } .kpi-etiqueta { color: var(--muted); font-size: .92rem; margin-top: 6px; } .kpi-barra { height: 6px; border-radius: 999px; background: #e7edf3; margin-top: 14px; overflow: hidden; } .kpi-barra span { display: block; height: 100%; border-radius: 999px; background: var(--green); } /* --- Anillo de progreso circular (CSS puro) --- */ .anillo-progreso { --valor: 0%; --color-anillo: var(--primary); width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(var(--color-anillo) var(--valor), #e7edf3 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .anillo-progreso-interior { width: 54px; height: 54px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--navy); } /* --- Tarjetas de alerta (vencidos / vencen hoy) --- */ .alerta-card { background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; display: flex; align-items: center; gap: 18px; height: 100%; border-left: 5px solid var(--primary); transition: var(--transition); } .alerta-card:hover { box-shadow: var(--shadow-md); } .alerta-card.acento-rojo { border-left-color: #DC3545; } .alerta-card.acento-ambar { border-left-color: #E8A33D; } /* --- Acciones rápidas en mosaico --- */ .accion-rapida { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; border-radius: var(--radius-sm); background: #f6f9f3; border: 1px solid var(--border-suave); color: var(--navy); text-decoration: none; font-weight: 600; font-size: .82rem; text-align: center; transition: var(--transition); } .accion-rapida:hover { background: var(--primary); color: white; transform: translateY(-3px); box-shadow: var(--shadow-sm); } .accion-rapida-icono { font-size: 22px; } /* --- Encabezado de la tabla de préstamos recientes con filtro --- */ .panel-filtro { max-width: 190px; } /* --- Tira de resumen unificada (reemplaza las tarjetas KPI sueltas) --- */ .panel-resumen { display: flex; flex-wrap: wrap; } .panel-resumen-item { flex: 1 1 200px; padding: 6px 28px; position: relative; } .panel-resumen-item:first-child { padding-left: 4px; } .panel-resumen-item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--border-suave); } .panel-resumen-icono { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 12px; background: rgba(13,82,137,.1); color: var(--primary); } .panel-resumen-item.acento-verde .panel-resumen-icono { background: rgba(79,163,58,.12); color: var(--green); } .panel-resumen-item.acento-info .panel-resumen-icono { background: rgba(14,165,183,.12); color: #0EA5B7; } .panel-resumen-item.acento-ambar .panel-resumen-icono { background: rgba(232,163,61,.16); color: #C9862B; } /* --- Tarjeta de atención combinada (vencidos + vencen hoy en un solo contenedor) --- */ .panel-atencion { display: flex; flex-wrap: wrap; } .panel-atencion-item { flex: 1 1 260px; padding: 6px 28px; display: flex; align-items: center; gap: 16px; position: relative; } .panel-atencion-item:first-child { padding-left: 4px; } .panel-atencion-item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--border-suave); } /* --- Dropdown de acciones rápidas en el encabezado --- */ .panel-dropdown-toggle { background: white; border: 1px solid var(--border-suave); color: var(--navy); } .panel-dropdown-toggle:hover, .panel-dropdown-toggle:focus { background: var(--light); color: var(--navy); } .dropdown-item-icono { display: inline-block; width: 22px; } /* --- Ranking de libros (más / menos prestados) --- */ .ranking-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-suave); } .ranking-item:last-child { border-bottom: none; } .ranking-numero { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: var(--light); color: var(--navy); flex-shrink: 0; } .ranking-numero.top { background: var(--green); color: white; } .ranking-numero.bottom { background: #f3e2d0; color: #B5541C; } .ranking-titulo { flex: 1; font-size: .85rem; line-height: 1.25; } .ranking-conteo { font-size: .72rem; color: var(--muted); white-space: nowrap; } /* --- Columna de acciones (bloque derecho) --- */ .accion-columna { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: #f6f9f3; border: 1px solid var(--border-suave); color: var(--navy); text-decoration: none; font-weight: 600; font-size: .88rem; transition: var(--transition); } .accion-columna:hover { background: var(--primary); color: white; transform: translateX(4px); } .accion-columna-icono { font-size: 18px; } /*========================================================= PÁGINAS INSTITUCIONALES (Sobre Nosotros / MoonByte) =========================================================*/ /* --- Portada de marca --- */ .marca-portada { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-radius: var(--radius-lg); padding: 56px 40px; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--deep-blue) 55%, var(--primary) 100%); color: white; box-shadow: var(--shadow-lg); } .marca-portada::before, .marca-portada::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); } .marca-portada::before { width: 260px; height: 260px; background: var(--green); opacity: .25; top: -90px; right: -60px; } .marca-portada::after { width: 220px; height: 220px; background: #ffffff; opacity: .08; bottom: -100px; left: -60px; } .marca-portada-contenido { position: relative; z-index: 1; flex: 1 1 480px; max-width: 720px; } .marca-portada-logo-grande { position: relative; z-index: 1; flex: 0 1 320px; display: flex; align-items: center; justify-content: center; align-self: stretch; } .marca-portada-logo-grande img { display: block; max-width: 100%; width: 320px; height: auto; margin: 0 auto; filter: drop-shadow(0 15px 35px rgba(0,0,0,.35)); } @media (max-width: 991.98px) { .marca-portada-logo-grande { display: none; } } .marca-portada-etiqueta { display: inline-block; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 16px; font-size: .8rem; font-weight: 600; letter-spacing: .03em; margin-bottom: 18px; } .marca-portada h1 { font-size: 2.6rem; margin-bottom: 10px; } .marca-portada-eslogan { font-family: var(--fuente-titulos); font-style: italic; font-size: 1.3rem; color: #cdeec3; margin-bottom: 16px; } .marca-portada p.descripcion { color: rgba(255,255,255,.85); font-size: 1.02rem; line-height: 1.6; } /* Chips de eslóganes alternativos dentro de la portada */ .marca-chips-eslogan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; position: relative; z-index: 1; } .marca-chips-eslogan span { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-size: .78rem; color: rgba(255,255,255,.85); } /* --- Misión / Visión --- */ .mv-card { background: linear-gradient(135deg, #ffffff 0%, #d7f0c6 45%, #a3db8a 100%); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); height: 100%; transition: var(--transition); } .mv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .mv-icono { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; background: rgba(13,82,137,.12); color: var(--primary); } .mv-card.acento-verde .mv-icono { background: rgba(79,163,58,.15); color: var(--green); } /* --- Timeline en zigzag (valores / personalidad) --- */ .timeline-valores { position: relative; padding: 10px 0; } .timeline-valores::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border-suave); transform: translateX(-50%); } .timeline-item { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item:nth-child(even) { flex-direction: row-reverse; } .timeline-medallon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; color: white; box-shadow: var(--shadow-sm); position: relative; z-index: 1; background: linear-gradient(135deg, var(--navy), var(--primary)); } .timeline-item:nth-child(3n+2) .timeline-medallon { background: linear-gradient(135deg, var(--primary), var(--green)); } .timeline-item:nth-child(3n) .timeline-medallon { background: linear-gradient(135deg, #0EA5B7, var(--primary)); } .timeline-contenido { flex: 1; background: #ffffff; border-radius: var(--radius-sm); padding: 16px 22px; box-shadow: var(--shadow-sm); } .timeline-contenido h3 { font-size: 1.05rem; margin-bottom: 4px; } .timeline-contenido p { margin-bottom: 0; color: var(--muted); font-size: .92rem; } @media (max-width: 767.98px) { .timeline-valores::before { left: 30px; } .timeline-item, .timeline-item:nth-child(even) { flex-direction: row; } .timeline-medallon { width: 46px; height: 46px; font-size: 19px; } } /* --- Nube de chips (valores cortos / público objetivo) --- */ .chip-nube { display: flex; flex-wrap: wrap; gap: 10px; } .chip-nube .chip { background: var(--light); border: 1px solid var(--border-suave); border-radius: 999px; padding: 9px 18px; font-size: .85rem; font-weight: 600; color: var(--navy); transition: var(--transition); } .chip-nube .chip:hover { background: var(--primary); color: white; transform: translateY(-2px); } /* --- Rasgos de personalidad en tarjetas con acento --- */ .rasgo-card { background: #ffffff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--primary); height: 100%; transition: var(--transition); } .rasgo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .rasgo-card:nth-child(5n+2) { border-top-color: var(--green); } .rasgo-card:nth-child(5n+3) { border-top-color: #0EA5B7; } .rasgo-card:nth-child(5n+4) { border-top-color: #E8A33D; } .rasgo-card:nth-child(5n+5) { border-top-color: var(--navy); } .rasgo-icono { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; background: rgba(13,82,137,.1); color: var(--primary); } /* --- Banner de eslogan --- */ .eslogan-banner { text-align: center; padding: 30px 20px 10px; } .eslogan-banner .comilla { font-family: var(--fuente-titulos); font-size: 3.6rem; line-height: 1; color: var(--green); opacity: .5; } .eslogan-banner h2 { font-size: 1.7rem; color: var(--navy); max-width: 640px; margin: 0 auto; } /* --- Tarjeta de enlace cruzado (BookCore <-> MoonByte) --- */ .enlace-cruzado { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, var(--navy), var(--deep-blue)); border-radius: var(--radius); padding: 26px 30px; color: white; } .enlace-cruzado-texto { flex: 1 1 260px; min-width: 0; } .enlace-cruzado .btn { flex-shrink: 0; white-space: nowrap; } .enlace-cruzado p { margin-bottom: 0; color: rgba(255,255,255,.8); } .mapa-ubicacion { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); line-height: 0; } @media (max-width: 575.98px) { .enlace-cruzado { flex-direction: column; align-items: flex-start; } .enlace-cruzado .btn { width: 100%; text-align: center; } } /* --- Logos de marca --- */ .navbar-logo { height: 40px; width: auto; } .navbar-logo-chip { background: rgba(255,255,255,.92); border-radius: 12px; padding: 6px 12px; display: inline-flex; align-items: center; } .footer-logo { height: 26px; width: auto; vertical-align: middle; } .marca-portada-logo { height: 64px; width: auto; margin-bottom: 18px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); } .marca-portada-logo-chip { display: inline-flex; align-items: center; background: rgba(255,255,255,.94); border-radius: 16px; padding: 14px 22px; margin-bottom: 20px; box-shadow: var(--shadow-md); } .marca-portada-logo-chip img { height: 60px; width: auto; } /*========================================================= BOTONES DE ACCIÓN EN TABLAS Reemplaza los botones de texto apilados ("Detalle" / "Editar" / "Eliminar") por íconos compactos, más limpios y consistentes, usados en Autores, Libros, Categorías, Ejemplares, Usuarios de biblioteca, Préstamos y el Panel administrativo. =========================================================*/ .acciones-tabla { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; } .accion-icono { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-suave); background: #ffffff; color: var(--muted); font-size: 15px; transition: var(--transition); } .accion-icono:hover, .accion-icono:focus { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: white; } .accion-icono.ver:hover { background: #0EA5B7; border-color: #0EA5B7; } .accion-icono.editar:hover { background: var(--primary); border-color: var(--primary); } .accion-icono.exito:hover { background: var(--green); border-color: var(--green); } .accion-icono.eliminar:hover { background: #DC3545; border-color: #DC3545; } /* Botón de eliminar dentro de un

(POST), mismo look */ .acciones-tabla form { display: inline-flex; } .acciones-tabla form button.accion-icono { cursor: pointer; } /*========================================================= TABLA ENRIQUECIDA (avatares, íconos, píldoras) Usado en la tabla de Préstamos recientes (Panel) y en el listado completo de Préstamos. =========================================================*/ .avatar-iniciales { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; } .avatar-iniciales.c1 { background: #ede9fe; color: #6d28d9; } .avatar-iniciales.c2 { background: #dbeafe; color: #1d4ed8; } .avatar-iniciales.c3 { background: #fef3c7; color: #b45309; } .avatar-iniciales.c4 { background: #fce7f3; color: #be185d; } .avatar-iniciales.c5 { background: #dcfce7; color: #15803d; } .usuario-celda { display: flex; align-items: center; gap: 12px; } .usuario-celda .texto-secundario { font-size: .8rem; display: flex; align-items: center; gap: 5px; } .icono-libro-mini { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .icono-libro-mini.c1 { background: #ede9fe; color: #6d28d9; } .icono-libro-mini.c2 { background: #dbeafe; color: #1d4ed8; } .icono-libro-mini.c3 { background: #fef3c7; color: #b45309; } .icono-libro-mini.c4 { background: #fce7f3; color: #be185d; } .icono-libro-mini.c5 { background: #dcfce7; color: #15803d; } .libro-celda { display: flex; align-items: center; gap: 10px; } .pastilla-codigo { background: var(--light); border-radius: 8px; padding: 5px 10px; font-family: "IBM Plex Mono", "Consolas", monospace; font-size: .78rem; color: var(--navy); display: inline-block; white-space: nowrap; } .fecha-con-icono { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: .88rem; } .fecha-con-icono i { color: var(--muted); } .estado-punto { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: .78rem; font-weight: 700; } .estado-punto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .estado-punto.activo { background: #dcfce7; color: #15803d; } .estado-punto.vencido { background: #fee2e2; color: #dc2626; } .estado-punto.devuelto { background: #e0f2fe; color: #0369a1; } .estado-punto.inactivo { background: #f1f5f9; color: #64748b; } .estado-punto.prestado { background: #dbeafe; color: #1d4ed8; } .estado-punto.danado { background: #fef3c7; color: #b45309; } /* Ícono decorativo de orden junto al encabezado (visual únicamente, no ordena la tabla todavía). */ .orden-columna { opacity: .45; font-size: .68rem; margin-left: 4px; } .icono-titulo-verde { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(79,163,58,.15); color: var(--green); font-size: 21px; flex-shrink: 0; } /*========================================================= TABLAS REALMENTE RESPONSIVE (container queries) En vez de una variante fija "compacta", cada envoltorio de tabla mide su PROPIO ancho disponible (container-type) y se ajusta solo: mismo componente, se ve distinto si vive en una columna angosta del panel o a pantalla completa, y reacciona igual ante zoom o dispositivos más chicos. Aplica a TODAS las tablas del sitio, no solo a una vista puntual. =========================================================*/ .table-responsive { container-type: inline-size; container-name: tabla; } /* Espacio real medio: ajustar tipografía, ícono y separaciones */ @container tabla (max-width: 760px) { .table th, .table td { padding: 10px 8px; font-size: .85rem; } .avatar-iniciales, .icono-libro-mini { width: 30px; height: 30px; font-size: 13px; } .usuario-celda, .libro-celda { gap: 8px; } .accion-icono { width: 30px; height: 30px; font-size: 13px; } .pastilla-codigo, .fecha-con-icono { font-size: .74rem; } } /* Espacio muy reducido: además de achicar, se ocultan las columnas menos prioritarias (marcadas con .col-oculta-angosta en el / correspondiente) para no forzar scroll. */ @container tabla (max-width: 560px) { .col-oculta-angosta { display: none; } .orden-columna { display: none; } } /*========================================================= COMPONENTES ADAPTABLES EN TODO EL SITIO Mismo principio que las tablas: cada tarjeta/bloque mide su PROPIO contenedor (container-type) y se ajusta según el espacio real que tiene disponible, sin importar si vive en una columna angosta del panel, a pantalla completa, en un celular o con el navegador con zoom. Aplica a .tarjeta-panel, .card, .mv-card y .marca-portada, que se usan en todas las páginas del sitio (no solo en el panel administrativo). =========================================================*/ .tarjeta-panel, .card, .mv-card, .marca-portada, .alerta-card, .rasgo-card { container-type: inline-size; } /* Contenedor medio-angosto: ajustes suaves */ @container (max-width: 420px) { .tarjeta-panel, .card { padding: 20px; } .kpi-valor { font-size: 1.7rem; } .panel-resumen-item, .panel-atencion-item { padding: 6px 14px; } .mv-icono, .rasgo-icono, .panel-resumen-icono { width: 38px; height: 38px; font-size: 17px; } .timeline-medallon { width: 46px; height: 46px; font-size: 19px; } .timeline-contenido { padding: 12px 16px; } .marca-portada { padding: 32px 22px; } .marca-portada h1 { font-size: 1.9rem; } .marca-portada-eslogan { font-size: 1.05rem; } .marca-portada-logo-chip img { height: 44px; } } /* Contenedor muy angosto (ej. columna lateral del panel en pantallas chicas, o zoom alto): simplifica aún más */ @container (max-width: 280px) { .kpi-etiqueta, .texto-secundario { font-size: .78rem; } .panel-encabezado-icono, .icono-titulo-verde { width: 38px; height: 38px; font-size: 17px; } } /* ========================================================== FOOTER ========================================================== */ /* El footer ahora tiene fondo propio, opaco y con un borde superior de acento. Así nunca se "funde" con una tarjeta blanca ni queda invisible sobre fondos claros: siempre hay un salto de color claro antes de él. */ .footer { position: static !important; inset: auto !important; bottom: auto !important; flex: 0 0 auto; width: 100%; margin-top: 40px; white-space: normal !important; line-height: normal !important; padding: 48px 20px 24px; color: rgba(255,255,255,.85) !important; background: linear-gradient( 90deg, var(--navy), var(--deep-blue) ); border-top: 3px solid var(--green) !important; } .footer .pie-marca { font-family: var(--fuente-titulos); font-weight: 600; color: white; letter-spacing: .01em; } .footer a { color: rgba(255,255,255,.85); text-decoration: none; } .footer a:hover { color: white; text-decoration: underline; } .footer .btn-outline-light { border-color: rgba(255,255,255,.5); } .footer .btn-outline-light:hover, .footer .btn-outline-light:focus { background: var(--green); border-color: var(--green); color: white; text-decoration: none; } .footer-container { max-width: 1520px; margin: 0 auto; } .footer-columnas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: start; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.14); } .footer-columna { height: fit-content; min-width: 0; } .footer-columna-marca p { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.6; max-width: 320px; } .footer-columna h3 { color: white; font-family: var(--fuente-texto); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; } .footer-columna ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; } .footer-columna a { color: rgba(255,255,255,.72); font-size: .88rem; } .footer-columna a:hover { color: white; text-decoration: underline; } .footer-redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .footer-red-icono { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: white; font-size: 16px; transition: var(--transition); } .footer-red-icono:hover { background: var(--green); transform: translateY(-3px); } .footer-inferior { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 22px; font-size: .85rem; color: rgba(255,255,255,.7); } @media (max-width: 767.98px) { .footer-columnas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .footer-columnas { grid-template-columns: 1fr; } }