/* ===================================================== iCuali look (competenciasfp/ges) — ACTIVADO EN ContaFF Nota: se aplica cuando uses class="icuali-bg" en y envuelvas contenido con .icuali-shell ===================================================== */ html, body { height: 100%; } /* Fondo global iCuali (morado -> azul -> celeste) */ body.icuali-bg{ min-height: 100%; margin: 0; background: linear-gradient(to bottom, #4b1e8e 0%, #2e5fae 32%, #3f96c8 62%, #bfe6fb 100% ); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow-x: hidden; } /* Shell “glass” */ .icuali-shell{ max-width: 980px; margin: 24px auto; padding: 18px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0,0,0,0.18); } .icuali-shell.icuali-shell-wide{ max-width: none; width: min(84%, 1400px); } @media (max-width: 1200px){ .icuali-shell.icuali-shell-wide{ width: 94%; } } .icuali-title{ color: rgba(255,255,255,0.96); } .icuali-muted{ color: rgba(255,255,255,0.72); } /* Topbar iCuali (GES) */ .icuali-topbar{ position: sticky; top: 0; z-index: 1030; padding: 10px 0; background: transparent !important; border-bottom: 0 !important; backdrop-filter: blur(8px); } .icuali-topbar .navbar-brand{ color: rgba(255,255,255,.96) !important; font-weight: 800; letter-spacing: .2px; } .icuali-topbar .nav-link{ color: rgba(255,255,255,.82) !important; font-weight: 600; padding: .45rem .65rem; border-radius: 6px; text-decoration: none !important; } .icuali-topbar .nav-link:hover{ color: rgba(255,255,255,.98) !important; background: rgba(255,255,255,.08); } .icuali-topbar .nav-link.active{ color: rgba(255,255,255,.98) !important; background: rgba(255,255,255,.12); } .icuali-topbar .navbar-brand, .icuali-topbar .nav-link{ text-shadow: 0 1px 8px rgba(0,0,0,.35); } .icuali-topbar .navbar-toggler{ border: 1px solid rgba(255,255,255,.35); border-radius: 8px; } .icuali-topbar .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.18); } .icuali-topbar .navbar-toggler-icon{ filter: invert(1); opacity: .95; } /* ===== ContaFF · Layout "panel derecho" (como competencias master) ===== */ /* Altura útil en viewport (ajusta si tu topbar ocupa más/menos) */ :root{ --contaff-topbar-h: 72px; /* aprox navbar + márgenes */ --contaff-shell-pad: 24px; /* padding body */ --contaff-head-h: 66px; /* header del diario (aprox) */ } /* La shell actúa como "panel" */ .contaff-panel{ height: calc(100vh - var(--contaff-topbar-h) - (var(--contaff-shell-pad) * 2)); display: flex; flex-direction: column; gap: 12px; /* separación entre cards */ overflow: hidden; /* evita scroll del contenedor padre */ } /* Cabecera fija dentro del panel */ .contaff-panel-head{ position: sticky; top: 0; z-index: 10; padding: 0 0 12px 0; background: transparent; } /* Cuerpo con scroll SOLO aquí */ .contaff-panel-body{ flex: 1 1 auto; min-height: 0; /* CLAVE para que el overflow funcione dentro de flex */ overflow: auto; /* ✅ scroll interno */ padding-right: 6px; /* evita que scrollbar tape contenido */ } /* opcional: scrollbar discreto en webkit */ .contaff-panel-body::-webkit-scrollbar{ width: 10px; } .contaff-panel-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 10px; } .contaff-panel-body::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); } /* ===== Aliases para las clases usadas en Diario.php ===== */ .contaff-card-head{ /* alias de .contaff-head-card */ background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 8px !important; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .contaff-card-body{ /* alias de .contaff-body-card */ background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 8px !important; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.14); overflow: hidden; /* que ocupe el hueco restante dentro de .contaff-panel */ flex: 1 1 auto; min-height: 0; /* CLAVE para scroll interno */ } /* Para que el wrapper interno pueda calcular alturas */ .contaff-card-body > .card-body{ height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; } /* Dentro de la Card 2, el wrapper scroll */ .contaff-scroll{ flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; } /* Badge estatus (si lo usas en Diario.php) */ .contaff-badge-status{ background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); } /* ============================ ContaFF Diario — Estilo B "Papel" dentro de iCuali glass ============================ */ /* el área scroll (lista de asientos) */ /* ===== ContaFF · Dos cards (cabecera fija + cuerpo con scroll) ===== */ .contaff-head-card{ background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 8px !important; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .contaff-body-card{ background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 8px !important; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.14); overflow: hidden; /* para que el "papel" no se salga */ flex: 1 1 auto; min-height: 0; } .contaff-body-card .card-body{ padding: 14px !important; /* el padding del área scroll */ height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; } /* Contenedor de cada asiento (sin tarjeta glass, separación simple) */ #diario_contenido_ff .asto-ff{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; margin: 0 0 12px 0; /* separación entre asientos */ } /* Línea superior de cada asiento (título discreto, sin banner) */ #diario_contenido_ff .fercel-semi{ background: transparent !important; color: rgba(255,255,255,0.90) !important; border: 0 !important; padding: 6px 2px !important; text-shadow: 0 1px 10px rgba(0,0,0,.35); } /* La tabla: “papel” (blanco suave) */ #diario_contenido_ff table{ margin: 0 !important; background: transparent !important; border-radius: 6px; } /* La tabla: efecto “papel” con borde y sombra, sin card en asiento */ #diario_contenido_ff .table{ border-radius: 6px; overflow: hidden; background: transparent !important; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 26px rgba(0,0,0,0.12); } /* Cabecera Debe/Haber: oscura pero elegante */ #diario_contenido_ff thead.table-dark, #diario_contenido_ff .table-dark{ background: rgba(20,20,30,0.92) !important; color: rgba(255,255,255,0.96) !important; } /* Celdas en general */ #diario_contenido_ff td, #diario_contenido_ff th{ border-color: rgba(120,110,80,0.10) !important; } /* Filas de apuntes: fondo claro + hover */ #diario_contenido_ff .fercel{ background: rgba(255,247,205,0.98) !important; color: rgba(58,52,38,0.96) !important; } #diario_contenido_ff .fercel td{ background: rgba(255,247,205,0.98) !important; color: rgba(58,52,38,0.96) !important; } #diario_contenido_ff .fercel:hover, #diario_contenido_ff .fercel:hover td{ background: rgba(252,240,180,0.99) !important; } /* El “fin_fer” (fila de botones): franja oscura tipo contax */ #diario_contenido_ff .fin_fer{ background: transparent !important; } /* Asegura contraste dentro de la fila */ #diario_contenido_ff .fin_fer td{ color: rgba(255,255,255,0.92) !important; } /* Botones dentro del asiento (base) */ #diario_contenido_ff .btn{ border-radius: 6cqw; } /* ===================================================== ContaFF · Botones de Asiento/Apunte - Igual look que Listado/Orden/Estilo (bootstrap outline) ===================================================== */ /* La fila de botones NO debe “blanquear” el fondo */ #diario_contenido_ff .fin_fer, #diario_contenido_ff .fin_fer td{ background: transparent !important; } /* Base común (mismo tacto que la cabecera) */ #diario_contenido_ff .fin_fer .btn{ border-radius: 6px; padding: 6px 12px; font-weight: 700; letter-spacing: .2px; line-height: 1.1; background: transparent !important; text-shadow: 0 1px 10px rgba(0,0,0,.45); } /* Los “warning” (Asiento / Apunte D/H) como outline-light */ #diario_contenido_ff .fin_fer .btn-outline-warning{ color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.55) !important; } #diario_contenido_ff .fin_fer .btn-outline-warning:hover{ background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.75) !important; color: rgba(255,255,255,.98) !important; } /* Los “info” (Asiento ↔ / ↔ / puzzle) como outline-info */ #diario_contenido_ff .fin_fer .btn-outline-info{ color: rgba(120,240,255,1) !important; border-color: rgba(0,209,255,.70) !important; } #diario_contenido_ff .fin_fer .btn-outline-info:hover{ background: rgba(0,209,255,.12) !important; border-color: rgba(0,209,255,.92) !important; color: rgba(200,252,255,1) !important; } /* Estado deshabilitado */ #diario_contenido_ff .fin_fer .btn:disabled, #diario_contenido_ff .fin_fer .btn.disabled{ opacity: .55 !important; } /* Layout de los grupos de botones (igual en ambos lados) */ #diario_contenido_ff .fin_fer .form-inline{ display: flex; gap: 10px; flex-wrap: wrap; } /* Los textos “text-warning” que venían del legacy, mejor neutros */ #diario_contenido_ff .text-warning{ color: rgba(255,255,255,0.92) !important; /* solo afecta a los headers legacy */ } /* Evita que el contenedor heredado pinte “bloques” por asiento */ #diario_contenido_ff .container-fluid, #diario_contenido_ff .asto-ff > .container-fluid{ background: transparent !important; } /* Si alguna celda queda con clases text-muted dentro del asiento, que no se vea gris lavado */ #diario_contenido_ff .text-muted{ color: rgba(110,98,74,0.82) !important; } # ===================================================== # ContaFF · Side menu (offcanvas) — legibilidad # ===================================================== */ /* Fondo y tipografía del panel */ #sideMenuFer.offcanvas, #sideMenuFer .offcanvas-body{ background: rgba(255,255,255,0.96) !important; color: #111827 !important; } /* Cabecera del menú: morado, como el tema */ #sideMenuFer .offcanvas-header{ background: rgba(40,20,90,.92) !important; color: rgba(255,255,255,.96) !important; } #sideMenuFer .offcanvas-title{ color: rgba(255,255,255,.96) !important; font-weight: 800; } #sideMenuFer .btn-close{ filter: invert(1); opacity: .95; } /* Botones dentro del menú: no usar outline-light sobre blanco */ #sideMenuFer .btn{ border-radius: 6px; font-weight: 700; } #sideMenuFer .btn-outline-light{ color: #111827 !important; border-color: rgba(17,24,39,.22) !important; background: rgba(255,255,255,0.85) !important; } #sideMenuFer .btn-outline-light:hover{ background: rgba(17,24,39,.06) !important; border-color: rgba(17,24,39,.30) !important; } #sideMenuFer .btn-outline-info{ color: rgba(2,132,199,1) !important; border-color: rgba(2,132,199,.55) !important; background: rgba(255,255,255,0.85) !important; } #sideMenuFer .btn-outline-info:hover{ background: rgba(2,132,199,.10) !important; border-color: rgba(2,132,199,.75) !important; } #sideMenuFer .btn-outline-warning{ color: rgba(161,98,7,1) !important; border-color: rgba(245,158,11,.55) !important; background: rgba(255,255,255,0.85) !important; } #sideMenuFer .btn-outline-warning:hover{ background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.75) !important; } #sideMenuFer .btn-outline-danger{ color: rgba(185,28,28,1) !important; border-color: rgba(239,68,68,.55) !important; background: rgba(255,255,255,0.85) !important; } #sideMenuFer .btn-outline-danger:hover{ background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.75) !important; } /* Si algún botón viene "apagado", que al menos se lea */ #sideMenuFer .btn:disabled, #sideMenuFer .btn.disabled{ opacity: .55 !important; } /* ========================= iCuali Topbar — Dropdown “glass” (velo claro) - casi transparente, con blur ========================= */ .icuali-topbar .dropdown-menu{ /* velo claro sobre fondo (no negro sólido) */ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 46px rgba(0,0,0,0.22); padding: 8px; } .icuali-topbar .dropdown-item{ color: rgba(255,255,255,0.92); border-radius: 8px; padding: .5rem .75rem; text-shadow: 0 1px 10px rgba(0,0,0,0.35); } .icuali-topbar .dropdown-item:hover, .icuali-topbar .dropdown-item:focus{ background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.98); } .icuali-topbar .dropdown-item.active, .icuali-topbar .dropdown-item:active{ background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.98); }