/* ========================================================================== Tipografía y Colores – Sistema de diseño básico Fuente: Poppins (Bold, Medium, Light) Paleta: - Primarios: #004E98 (azul), #FF6700 (naranja), #C0C0C0 (gris) - Secundarios: #3A6EA5 (azul medio), #EBEBEB (gris claro) ========================================================================== */ /* Import de Google Fonts (puedes mover esto al si prefieres ) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap'); /* ----------------------------- Variables --------------------------------- */ :root { /* Colores base */ --color-primary: #004E98; --color-accent: #FF6700; --color-neutral: #C0C0C0; /* Secundarios */ --color-secondary: #3A6EA5; --color-soft: #EBEBEB; /* Textos */ --text-strong: #0d1b2a; /* azul muy oscuro para alto contraste */ --text-base: #22303c; --text-muted: #5f6b76; --bg: #ffffff; --bg-contrast: #f7f9fb; /* Tipografía */ --font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; /* Pesos Poppins */ --fw-light: 300; /* Poppins Light */ --fw-medium: 500; /* Poppins Medium */ --fw-bold: 700; /* Poppins Bold */ /* Escala rápida de tamaños (puedes ajustar a gusto) */ --fs-xxl: clamp(2rem, 3vw, 2.5rem); --fs-xl: clamp(1.5rem, 2.2vw, 2rem); --fs-lg: 1.25rem; --fs-md: 1rem; --fs-sm: .875rem; --radius: 14px; /* Sombra y foco */ --shadow: 0 10px 24px rgba(0, 0, 0, .08); --ring: 0 0 0 3px rgba(255, 103, 0, .25); /* foco naranja */ } /* ------------------------------ Base ------------------------------------- */ * { box-sizing: border-box } html, body { margin: 0; padding: 0; font-family: var(--font-family); color: var(--text-base); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Enlaces */ a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Estados de foco generales */ :where(button, a, input, select, textarea):focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; } /* --------------------------- Jerarquía de texto -------------------------- */ h1, .titulo { font-weight: var(--fw-bold); /* Poppins Bold */ font-size: var(--fs-xxl); color: var(--text-strong); margin: 0 0 .5em; } h2, .subtitulo { font-weight: var(--fw-medium); /* Poppins Medium */ font-size: var(--fs-xl); color: var(--color-primary); margin: 0 0 .5em; } h3 { font-weight: var(--fw-medium); font-size: var(--fs-lg); margin: 1.25rem 0 .5rem; } p, .parrafo { font-weight: var(--fw-light); /* Poppins Light */ font-size: var(--fs-md); color: var(--text-base); margin: 0 0 1rem; } .small, small { font-size: var(--fs-sm); color: var(--text-muted); } /* ------------------------------ Utilidades --------------------------------*/ /* Colores de texto */ .text-primary { color: var(--color-primary) !important; } .text-accent { color: var(--color-accent) !important; } .text-neutral { color: var(--color-neutral) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-muted { color: var(--text-muted) !important; } /* Colores de fondo */ .bg-primary { background: var(--color-primary) !important; color: #fff; } .bg-accent { background: var(--color-accent) !important; color: #fff; } .bg-neutral { background: var(--color-neutral) !important; } .bg-secondary { background: var(--color-secondary) !important; color: #fff; } .bg-soft { background: var(--color-soft) !important; } /* Bordes */ .border-primary { border: 1px solid var(--color-primary) } .border-accent { border: 1px solid var(--color-accent) } .rounded { border-radius: var(--radius); } /* Espaciados rápidos */ .mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 } .mt-1 { margin-top: .5rem } .mb-1 { margin-bottom: .5rem } .mt-2 { margin-top: 1rem } .mb-2 { margin-bottom: 1rem } .p-1 { padding: .75rem } .p-2 { padding: 1rem } .p-3 { padding: 1.5rem } /* ------------------------------- Componentes ------------------------------*/ .card { background: #fff; border: 1px solid var(--color-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; } /* Botones */ .button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.1rem; font-weight: var(--fw-medium); border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; text-decoration: none; } .button:active { transform: translateY(1px); } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { filter: brightness(1.08); } .btn-accent { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-accent:hover { filter: brightness(1.06); } .btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-outline:hover { background: var(--color-soft); } /* Inputs */ .input, input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--color-soft); background: #fff; color: var(--text-base); font-family: var(--font-family); } .input::placeholder { color: var(--text-muted); } /* Badges / chips */ .badge { display: inline-block; padding: .35rem .6rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: var(--fw-medium); background: var(--bg-contrast); color: var(--text-base); } .badge--primary { background: rgba(0, 78, 152, .12); color: var(--color-primary); } .badge--accent { background: rgba(255, 103, 0, .12); color: var(--color-accent); } /* ======================= Helpers Responsive ======================= */ /* Contenedor fluido con ancho máximo */ .container { width: min(100%, 1200px); margin-inline: auto; padding-inline: 1rem; } /* Grillas rápidas */ .grid-2, .grid-3, .grid-auto { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Visibilidad por breakpoint */ .desktop-only { display: block; } .mobile-only { display: none; } /* Tablet <= 1024px */ @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } /* Móvil <= 768px */ @media (max-width: 768px) { :root { --fs-xxl: clamp(1.75rem, 5vw, 2.25rem); --fs-xl: clamp(1.25rem, 4vw, 1.75rem); --fs-lg: 1.125rem; --fs-md: .975rem; --fs-sm: .85rem; } .container { padding-inline: .85rem; } .grid-2, .grid-3 { grid-template-columns: 1fr; } /* Botones full-width en móvil con .is-block */ .button.is-block, .btn-primary.is-block, .btn-accent.is-block, .btn-outline.is-block { width: 100%; } .desktop-only { display: none; } .mobile-only { display: block; } } /* Teléfonos pequeños <= 480px */ @media (max-width: 480px) { .card { padding: .9rem; } .p-3 { padding: 1rem; } } /* Stacks verticales */ .stack>*+* { margin-top: var(--stack-gap, 1rem); } @media (max-width: 768px) { .stack-sm>*+* { margin-top: .75rem; } } /* Wrappers de scroll */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Inputs: ancho cómodo en desktop, full en móvil */ .input--sm { max-width: 260px; } .input--md { max-width: 400px; } .input--lg { max-width: 640px; } @media (max-width: 768px) { .input--sm, .input--md, .input--lg { max-width: 100%; } } /* ========================================================================== >>> MIGRACIÓN DE ESTILOS EXISTENTES AL SISTEMA GENERAL <<< Basado en: panel_cliente.css, panel_cliente2.0.css, portal.css, galeria_lanzamienot_campanas.css Todos los colores/tipos se alinean a las variables de :root ya definidas arriba. ========================================================================== */ /* ====== Layout principal: header + sidebar + contenido (panel_cliente.css) ====== */ .main-header { height: 60px; width: calc(100% - 250px); background: #fff; display: flex; justify-content: flex-end; align-items: center; padding: 10px 30px 10px 20px; z-index: 1000; position: fixed; top: 0; left: 250px; transition: all .3s ease; border-bottom: 1px solid var(--color-soft); } body.sidebar-collapsed .main-header { width: calc(100% - 60px); left: 60px; } .header-right { display: flex; align-items: center; gap: 20px; } .sidebar { position: fixed; top: 0; left: 0; width: 250px; height: 100vh; background: var(--text-strong); /* era #000 */ padding: 30px 20px; overflow-x: hidden; overflow-y: auto; transition: width .3s ease; display: flex; flex-direction: column; } #sidebar.collapsed { width: 60px; } #sidebar.collapsed .label { display: none; } .logo { display: flex; justify-content: center; align-items: center; height: 30px; margin: 10px 0 20px; transition: all .3s ease; } .logo-full { display: block; } .logo-icono { display: none; width: 55px; } #sidebar.collapsed .logo-full { display: none; } #sidebar.collapsed .logo-icono { display: block; } .sidebar ul { list-style: none; margin: 0; padding: 30px 0 0; } .sidebar ul li { margin-bottom: 20px; } .sidebar ul li a { color: #fff; text-decoration: none; font-size: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; } .sidebar ul li a:hover { background: rgba(255, 255, 255, .06); } .main-content { margin-top: 60px; margin-left: 250px; padding: 20px; transition: all .3s ease; box-sizing: border-box; } body.sidebar-collapsed .main-content { margin-left: 60px; } /* ====== Portada / login card (portal.css) ====== */ .card { background-color: #fff; border: 1px solid var(--color-soft); border-radius: var(--radius); padding: 40px 30px; max-width: 480px; margin-inline: auto; box-shadow: var(--shadow); } .card-title { color: var(--text-strong); font-size: var(--fs-xl); margin-bottom: 1rem; font-weight: var(--fw-medium); } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-form input { height: 50px; border-radius: 14px; padding: 0 16px; font-size: 16px; border: 1px solid var(--color-soft); background: #fff; color: var(--text-base); } .login-form input:focus { box-shadow: var(--ring); } .login-form button { margin-top: .25rem; width: 180px; height: 48px; background: var(--color-accent); color: #fff; border: none; border-radius: 999px; font-size: 16px; font-weight: var(--fw-bold); cursor: pointer; } .forgot-password { margin-top: .75rem; text-align: center; } .forgot-password a { color: var(--color-accent); } /* ====== Galería de creatividades (panel_cliente2.0.css + galeria_lanzamienot_campanas.css) ====== */ .contenedor-creatividades, .contenedor-creatividades1 { width: 100%; box-sizing: border-box; padding: 20px; background: #fff; border-radius: var(--radius); border: 1px solid var(--color-soft); box-shadow: var(--shadow); } .galeriaCreatividad, .galeriaCreatividad1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; width: 100%; margin: 20px 0; } .galeriaCreatividad img, .galeriaCreatividad1 img { width: 100%; height: 200px; object-fit: contain; border: 2px solid var(--color-soft); border-radius: 10px; background: var(--bg-contrast); padding: 5px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; cursor: pointer; } .galeriaCreatividad img:hover, .galeriaCreatividad1 img:hover { transform: scale(1.03); border-color: var(--color-primary); box-shadow: 0 3px 12px rgba(0, 78, 152, .18); } /* Mensajes de estado (reusables) */ .mensaje-estado { padding: 15px; border-radius: 10px; margin: 15px 0; font-size: 14px; border-left: 4px solid; } .mensaje-error { background: #ffeeee; color: #b71c1c; border-color: #b71c1c; } .mensaje-advertencia { background: #fff8e1; color: #8a5a00; border-color: #ff8f00; } .mensaje-info { background: rgba(0, 78, 152, .08); color: var(--color-primary); border-color: var(--color-primary); } /* ====== Modales (panel_cliente.css + 2.0.css) ====== */ .modal { display: none; position: fixed; z-index: 1000; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); overflow: auto; padding: 40px 0; } .modal-content { background: #fff; margin: 0 auto; padding: 30px; border-radius: var(--radius); box-shadow: 0 5px 15px rgba(0, 0, 0, .25); width: min(650px, 90%); position: relative; top: 5%; max-height: 90vh; display: flex; flex-direction: column; animation: modalopen .25s ease-out; } .close-modal { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; cursor: pointer; z-index: 10; } .modal-body { margin-top: 12px; padding: 0 10px; overflow-y: auto; flex-grow: 1; max-height: calc(90vh - 150px); } @keyframes modalopen { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Efecto 3D / zoom (coherente con ambos archivos) */ #modalImgCreatividad, #modalImgCreatividad1 { perspective: 1000px; } .modal-contenedor-3d, .modal-contenedor-3d1 { transform-style: preserve-3d; transition: transform .15s ease-out; } .efecto-zoom-3d, .efecto-zoom-3d1 { transform: translateZ(50px) scale(.95); opacity: 0; transition: all .25s cubic-bezier(.25, .1, .25, 1); } .efecto-zoom-3d.activo, .efecto-zoom-3d1.activo { transform: translateZ(0) scale(1); opacity: 1; } /* ====== Notificaciones (panel_cliente.css) ====== */ .top-right-icons { position: fixed; top: 20px; right: 30px; display: flex; align-items: center; gap: 20px; z-index: 1100; } .notifications-container { position: relative; margin-right: 15px; display: inline-block; } .notifications-bell { position: relative; cursor: pointer; padding: 8px; font-size: 1.1rem; color: var(--text-base); } .notification-count { position: absolute; top: -2px; right: -2px; background: var(--color-accent); color: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; } .notifications-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow-y: auto; z-index: 1200; border: 1px solid var(--color-soft); } .notifications-list { max-height: 350px; overflow-y: auto; list-style: none; margin: 0; padding: 0; } .notification-item { display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; border-bottom: 1px solid var(--color-soft); cursor: pointer; transition: background .25s; } .notification-item:hover { background: var(--bg-contrast); } .notification-item .content p { margin: 0; font-size: .95rem; font-weight: 600; color: var(--text-base); } .notification-item .content small { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-muted); } .notification-item .delete-icon { font-size: 1rem; color: #bbb; cursor: pointer; margin-left: .5rem; } .notification-item .delete-icon:hover { color: #e74c3c; } .see-all { text-align: right; padding: 12px 16px; font-size: .85rem; font-weight: 500; color: var(--color-primary); border-top: 1px solid var(--color-soft); background: #fafafa; } .see-all:hover { filter: brightness(1.03); } /* ====== Tablas de facturas / filtros (panel_cliente2.0.css) ====== */ .facturas-scroll-container { max-height: 80vh; overflow-y: auto; border: 1px solid var(--color-soft); padding: 10px; background: #fff; margin-top: 20px; border-radius: var(--radius); } .filtros-container { margin-bottom: 20px; } .filtros-row { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; flex-wrap: wrap; } .fecha-filtro, .search-input { padding: 8px 12px; border: 1px solid var(--color-soft); border-radius: 12px; font-size: 14px; } .btn-limpiar { padding: 8px 16px; background: #6c757d; color: #fff; border: none; border-radius: 12px; cursor: pointer; font-size: 14px; } .btn-limpiar:hover { filter: brightness(1.05); } .facturas-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--color-soft); margin-top: 20px; } .facturas-table th, .facturas-table td { border: 1px solid var(--color-soft); padding: 10px; text-align: left; } .facturas-table thead { background: var(--bg-contrast); } .estado-vencido { background: #e53935; color: #fff; padding: 3px 8px; border-radius: 999px; font-weight: 700; display: inline-block; } .estado-parcial { background: #fb8c00; color: #fff; padding: 3px 8px; border-radius: 999px; font-weight: 700; display: inline-block; } .estado-pagado { background: #43a047; color: #fff; padding: 3px 8px; border-radius: 999px; font-weight: 700; display: inline-block; } .cuenta-label { background: #e0e0e0; padding: 3px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; } /* Dropdown de pagos */ .dropdown-pago { position: relative; display: inline-block; } .btn-pago { padding: 6px 12px; background: var(--color-primary); color: #fff; border: none; border-radius: 12px; cursor: pointer; } .dropdown-contentfactura { display: none; position: absolute; bottom: calc(100% - 2px); left: 0; background: #fff; border: 1px solid var(--color-soft); min-width: 160px; z-index: 1000; box-shadow: var(--shadow); border-radius: 12px; overflow: hidden; } .dropdown-contentfactura a { padding: 10px 15px; display: block; text-decoration: none; color: var(--text-base); } .dropdown-pago:hover .dropdown-contentfactura { display: block; } /* Modal transferencia */ .modal-transferencia1 { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .5); } .modal-content1 { background: #fff; margin: 10% auto; padding: 25px; border-radius: var(--radius); width: 90%; max-width: 500px; position: relative; box-shadow: var(--shadow); } /* ====== Responsivo clave ====== */ @media (max-width: 768px) { .modal-content { width: 90%; top: 2%; padding: 20px; } .modal-body { max-height: calc(95vh - 120px); } } /* ========================================================================== Utilidades SOLO para Login (namespaced) ========================================================================== */ .login-form .muted { color: var(--text-muted, #9fb0bd); font-size: .9rem; } .login-form .hidden { display: none !important; } .login-form .hint { margin-top: .5rem; color: var(--text-muted, #9fb0bd); font-size: .9rem; } .login-form .btn-inline { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; } .login-form .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: auth-spin .8s linear infinite; /* nombre único para evitar choques */ } @keyframes auth-spin { to { transform: rotate(360deg); } } /* Desactivar interacción de botones solo en el login */ .login-form button[disabled], .login-form .btn[disabled] { opacity: .8; cursor: not-allowed; filter: grayscale(.2); } /* ========================= Vista de Login (centrado) ========================= */ .auth { min-height: 100dvh; /* pantalla completa */ display: grid; place-items: center; /* centra tarjeta */ padding: 32px 16px; background: var(--bg); } .auth .auth-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; } .auth .auth-logo { max-width: min(240px, 60vw); /* evita que el logo se corte */ height: auto; display: block; } .auth .auth-card { width: min(100%, 520px); /* un poquito más ancha que 480 si hay espacio */ } /* Ajustes finos del formulario */ .auth .login-form input { width: 100%; } .auth .login-form button { width: 100%; } /* botón full-width en login */ @media (min-width: 640px) { .auth .login-form button { width: 200px; } /* en desktop queda compacto */ } /* Mensaje inferior (hint) con mejor contraste y separación */ .auth .login-form .hint, .auth .login-form .muted { color: var(--text-muted); line-height: 1.4; margin-top: .75rem; } /* Espaciado entre campos y botón */ .auth .login-form { gap: 1rem; } .auth .card-title { text-align: center; margin-bottom: 1rem; } .auth .login-form button { margin-left: auto; margin-right: auto; /* centra el botón */ } .auth .login-form .btn-inline { justify-content: center; /* centra el contenido interno del botón */ } .auth .login-form .forgot-password, .auth .login-form .hint, .auth .login-form .muted { text-align: center; /* centra los textos auxiliares */ } /* ===== Vista "Establecer nueva clave" (mismo look que login) ===== */ .auth .card-title { text-align: center; } .auth .login-form { gap: 1rem; } .auth .login-form label { display: block; margin-top: .25rem; font-size: .9rem; color: var(--text-muted); } .auth .login-form button { margin-left: auto; margin-right: auto; } /* centra botón */ .auth .muted, .auth .hint, .auth .foot { text-align: center; } .auth .foot { margin-top: 1rem; } /* Requisitos de contraseña */ .pw-req { margin-top: .25rem; } .pw-req-list { list-style: none; padding: 0; margin: .25rem 0 .5rem; } .pw-req-list li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--text-muted); padding: 4px 0; } .pw-req-list li .b, .pw-req-list li .mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-soft); display: inline-block; flex: 0 0 14px; background: transparent; transition: all .2s ease; } .pw-req-list li.ok { color: var(--color-primary); } .pw-req-list li.ok .b, .pw-req-list li.ok .mark { border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 78, 152, .12); } /* Medidor de fortaleza */ .meter-wrap { height: 8px; border-radius: 999px; background: var(--color-soft); overflow: hidden; margin-top: .25rem; } .meter { height: 100%; width: 0%; background: var(--color-accent); transition: width .25s ease; } /* Señal visual mínima cuando aria-invalid=true */ .auth .login-form input[aria-invalid="true"] { outline: none; border-color: #e57373; box-shadow: 0 0 0 3px rgba(229, 115, 115, .18); } /* ====== Ajustes finos para header.php (unificación) ====== */ /* Alineación derecha del header (coincide con tu original) */ .header-right { display: flex; align-items: center; gap: 20px; padding: 10px 50px 10px 0; /* espacio a la derecha */ justify-content: flex-end; } /* Sidebar: iconos y logos consistentes */ .sidebar ul li a img, .sidebar-icon { width: 24px; height: auto; display: block; } .logo .logo-full { height: 80px; width: auto; } .logo .logo-icono { height: 80px; width: auto; } /* Dropdown de perfil oculto por defecto */ .user-menu { display: flex; align-items: center; gap: 15px; } .user-menu .dropdown { position: relative; } .dropbtn { background: transparent; border: none; padding: 0; cursor: pointer; } .icon-img { width: 30px; height: auto; display: block; } .user-menu .dropdown .dropdown-content { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--color-soft); border-radius: 12px; box-shadow: var(--shadow); min-width: 180px; z-index: 1200; overflow: hidden; } .user-menu .dropdown:hover .dropdown-content { display: block; } .profile-menu-card a { display: block; padding: 10px 12px; color: var(--text-strong); text-decoration: none; font-size: 14px; white-space: nowrap; } .profile-menu-card a:hover { background: var(--color-soft); } /* Notificaciones: el badge y dropdown ya están definidos en el general. Solo nos aseguramos de que la campana tenga área clicable decente. */ .notifications-bell { padding: 8px; cursor: pointer; } /* === Toggle sidebar === */ #toggle-btn { position: absolute; bottom: 22px; left: 213px; /* alineado al borde derecho del sidebar (250px - 20px) */ width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-soft); background: #fff; color: var(--text-strong); font-size: 18px; line-height: 34px; text-align: center; cursor: pointer; box-shadow: var(--shadow); transition: all .2s ease; z-index: 1300; } #toggle-btn:hover { transform: translateX(1px); } /* cuando el sidebar está colapsado */ body.sidebar-collapsed #toggle-btn { left: 40px; /* sidebar colapsado (60px) → centramos el botón */ } /* rotación/flip del caret */ #toggle-btn::before { content: "‹"; /* 2039 */ display: inline-block; transition: transform .2s ease; } body.sidebar-collapsed #toggle-btn::before { transform: rotate(180deg); /* se ve como › */ } /* === Stack limpio en el panel derecho === */ .side-panel { display: flex; flex-direction: column; gap: 16px; } .side-panel .card+.card { margin-top: 0; } /* por si algún estilo previo agrega margen extra */ :root { --sidebar-w: 250px; /* ancho sidebar abierto */ --sidebar-w-collapsed: 60px; /* ancho sidebar colapsado */ --toggle-size: 36px; /* diámetro del botón */ --toggle-gap: 6px; /* separación respecto al borde del sidebar */ } /* === Toggle sidebar fijo y centrado en el borde === */ #toggle-btn { position: fixed; /* clave: anclado a la ventana */ bottom: 22px; left: calc(var(--sidebar-w) - (var(--toggle-size) / 2) - var(--toggle-gap)); width: var(--toggle-size); height: var(--toggle-size); border-radius: 50%; border: 2px solid var(--color-soft); background: #fff; color: var(--text-strong); font-size: 18px; line-height: calc(var(--toggle-size) - 2px); text-align: center; cursor: pointer; box-shadow: var(--shadow); transition: left .2s ease, transform .2s ease; z-index: 1300; } /* cuando el sidebar está colapsado, recalcula el left */ body.sidebar-collapsed #toggle-btn { left: calc(var(--sidebar-w-collapsed) - (var(--toggle-size) / 2) - var(--toggle-gap)); } /* caret doble y flip al colapsar */ #toggle-btn::before { content: "«"; display: inline-block; transform: translateX(1px); transition: transform .2s ease; } body.sidebar-collapsed #toggle-btn::before { transform: rotate(180deg) translateX(1px); } :root { --header-h: 60px; /* altura del header fijo */ --sidebar-w: 250px; /* sidebar abierto */ --sidebar-w-collapsed: 60px; /* sidebar colapsado */ } /* Banner de auditoría (oculto por defecto) */ .audit-banner { position: fixed; top: var(--header-h); left: var(--sidebar-w); /* alineado al contenido */ right: 20px; /* margen a la derecha */ background: #fde68a; color: #422006; font-weight: 600; padding: 10px 14px; border: 1px solid #f7c948; border-radius: 12px; box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 1350; /* por encima del header/sidebar */ transition: transform .25s ease, opacity .25s ease; } /* cuando sidebar está colapsado, reubica el banner */ body.sidebar-collapsed .audit-banner { left: var(--sidebar-w-collapsed); } /* estados de visibilidad */ .audit-banner.hidden { transform: translateY(-140%); /* fuera de la vista */ opacity: 0; pointer-events: none; } .audit-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .audit-actions { display: flex; gap: 8px; align-items: center; } /* Responsive en pantallas estrechas: ocupa todo el ancho */ @media (max-width: 900px) { .audit-banner { left: 10px; right: 10px; /* ignora sidebar y pega márgenes */ } } /* ======================= Informes (Looker Studio) ======================= */ .informes-grid { display: grid; gap: 20px; } .informe-card { background: #fff; border: 1px solid var(--color-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; } /* Envoltorio con relación 16:9 que crece en desktop */ .informe-viewport { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--color-soft); border-radius: 12px; overflow: hidden; background: var(--bg-contrast); } /* El iframe ocupa todo el viewport */ .informe-viewport iframe { width: 100% !important; height: 100% !important; border: 0; display: block; } /* Variante “alta”: útil si quieres que ocupe casi toda la pantalla */ .informe-viewport.is-tall { aspect-ratio: auto; height: 82vh; /* sube/baja a gusto (75–90vh) */ } /* Si no puedes editar el HTML para poner clases, fuerza cualquier embed de Looker Studio. */ .main-content iframe[src*="lookerstudio"] { width: 100% !important; min-height: 75vh !important; border: 0; display: block; } .ok-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); } .ok-title { color: #111827; font-weight: 700; margin-bottom: 10px; word-break: break-word; } .ok-images-strip { display: flex; flex-wrap: wrap; gap: 10px; } .ok-img-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; background: #fff; width: 180px; cursor: pointer; } .ok-img-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; background: #f3f4f6; display: block; } .ok-img-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #bae6fd; border-top-color: #0284c7; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-left: 6px; } @keyframes spin { to { transform: rotate(360deg) } } /* ===== Modal ===== */ .modal1-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; z-index: 9999; } .modal1-box { position: relative; background: #0b0b0c; border-radius: 12px; width: min(84vw, 760px); /* MUCHÍSIMO más alto */ max-height: 99vh; /* antes 96vh */ height: calc(100vh - 1vh); /* ocupa casi toda la altura de pantalla */ overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .modal1-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 8px; border: 0; background: #ef4444; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .modal1-body { display: flex; align-items: center; justify-content: center; padding: 10px; /* más área útil dentro */ min-height: 86vh; /* antes 70vh */ background: #0b0b0c; } .modal1-body img { max-height: 78vh; /* antes 92vh */ max-width: 100%; /* antes 100% */ object-fit: contain; transition: transform .28s ease, opacity .28s ease; } .modal1-footer { display: flex; gap: 14px; justify-content: center; align-items: center; padding: 10px; background: #111319; color: #e5e7eb; } .modal1-counter { font-family: monospace; font-weight: 700; letter-spacing: 1px; } .nav-btn { padding: 8px 12px; border: none; border-radius: 8px; background: #0ea5e9; color: #fff; cursor: pointer; font-weight: 600; } /* ========BOTONES (IMAGENES VIDEOS)======= */ /* Botonera tipo “segmented control” (Imágenes / Videos) */ .segmented { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #fff; } .segbtn { border: 0; padding: 8px 14px; background: transparent; color: #0f172a; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .15s ease, color .15s ease; } .segbtn+.segbtn { border-left: 1px solid #cbd5e1; } .segbtn:hover { background: #f1f5f9; } .segbtn.is-active { background: #0ea5e9; color: #fff; }