/* ===========================================
   FicharNet - Master Minimal v1 (override)
   Compatible con Bootstrap clásico (v3)
   =========================================== */

:root{
  --fn-blue:#04488d;
  --fn-blue-dark:#033a73;
  --fn-text:#0f172a;
  --fn-muted:#64748b;
  --fn-border: rgba(15,23,42,.10);
}

/* ---- Topbar: blanco, limpio, sin efectos antiguos ---- */
.fn-topbar{
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
.fn-topbar:after{
  content:"";
  display:block;
  height:2px;
  background: linear-gradient(90deg, var(--fn-blue), #38bdf8);
  opacity:.9;
}
.fn-topbar-container{
  padding-left:24px !important;
  padding-right:24px !important;
}
@media (max-width:768px){
  .fn-topbar-container{ padding-left:12px !important; padding-right:12px !important; }
}

/* Alineación y aire */
.fn-topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:14px 0 10px !important;
}

/* Logo más grande (y sin fondo) */
.fn-brand{
  display:flex !important;
  align-items:center !important;
  padding:0 !important;
}
.fn-brand img{
  height:60px !important;
  width:auto !important;
  max-height:none !important;
  filter:none !important;
}
@media (max-width:768px){
  .fn-brand img{ height:48px !important; }
}

/* ---- Zona derecha: sin “cajas” llamativas ---- */
.fn-right{ display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important; }
.fn-user{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
.fn-user .fn-hello{ color:var(--fn-muted) !important; font-weight:600 !important; }
.fn-userlink{ color:var(--fn-text) !important; font-weight:700 !important; text-decoration:none !important; }
.fn-logout{
  margin-left:8px !important;
  border:1px solid var(--fn-border) !important;
  background:#fff !important;
  border-radius:10px !important;
  padding:8px 10px !important;
}
.fn-logout:hover{
  border-color: rgba(4,72,141,.35) !important;
  background: rgba(4,72,141,.10) !important;
  color: var(--fn-blue) !important;
}

/* Reloj: sin sombra, pill muy suave */
.fn-clock{
  background:#fff !important;
  border:1px solid var(--fn-border) !important;
  border-radius:12px !important;
  padding:8px 12px !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.fn-clock i{ color: var(--fn-blue) !important; }
.fn-date{ color: var(--fn-muted) !important; font-weight:600 !important; }
.fn-time{ color: var(--fn-text) !important; font-weight:800 !important; }
.fn-time, .fn-time *{ text-shadow:none !important; box-shadow:none !important; }

/* ---- Menú: minimal, separado de la línea inferior ---- */
.fn-navwrap{
  border-top:1px solid var(--fn-border) !important;
  margin-top:10px !important;
}
.fn-nav{ padding:10px 0 14px !important; } /* << padding inferior para que no quede pegado */
.fn-menu{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
  padding:0 !important;
}
.fn-menu > li{ list-style:none !important; }
.fn-menu > li > a{
  display:inline-block !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  background:transparent !important;
  color: var(--fn-text) !important;
  font-weight:700 !important;
  border:1px solid transparent !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

/* Hover: azul suave */
.fn-menu > li > a:hover{
  background: rgba(4,72,141,.10) !important;
  border-color: rgba(4,72,141,.22) !important;
  color: var(--fn-blue) !important;
  text-decoration:none !important;
}

/* ACTIVO / seleccionado: azul corporativo + texto blanco */
.fn-menu > li.active > a,
.fn-menu > li > a.active,
.fn-menu > li > a[aria-current="page"]{
  background: var(--fn-blue) !important;
  border-color: var(--fn-blue) !important;
  color:#fff !important;
}

/* Pulsado (sin celeste feo) */
.fn-menu > li > a:active{
  background: var(--fn-blue-dark) !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Quita el “flash” azul del móvil */
.fn-menu > li > a{
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
}

/* ---- Espacio entre cabecera y página ---- */
#main{ padding-top:20px !important; }

/* ===========================================
   Footer: más limpio + app strip full width
   =========================================== */

/* Bloque descarga app */
.fn-appstrip{
  background: linear-gradient(135deg, #0b1220 0%, #0a1630 55%, #071023 100%) !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  padding:30px 0 !important;
}
.fn-appstrip-inner{ padding-left:24px !important; padding-right:24px !important; }
@media (max-width:768px){
  .fn-appstrip{ padding:20px 0 !important; }
  .fn-appstrip-inner{ padding-left:12px !important; padding-right:12px !important; }
}

/* Alinea columnas y BAJA el QR a la derecha */
.fn-appstrip .row{
  display:flex !important;
  align-items:stretch !important;
}
.fn-appstrip .col-md-5,
.fn-appstrip .col-sm-5{
  display:flex !important;
  align-items:flex-end !important;   /* << lo baja */
  justify-content:flex-end !important;
}
.fn-qrbox{
  width: 320px;
  max-width: 100%;
  margin-top: 24px;                 /* << más abajo aún */
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:18px !important;
  padding:16px !important;
  text-align:center !important;
}
.fn-qr{ max-width:190px !important; height:auto !important; }

/* Texto del strip */
.fn-appstrip-eyebrow{ opacity:.85; font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:12px; }
.fn-appstrip-copy h3{ margin-top:8px !important; font-weight:800 !important; }
.fn-appstrip-copy p{ opacity:.82; }

/* Footer base (sección de abajo) */
footer > section:last-child{
  background: #070c16 !important;
  color: rgba(255,255,255,.78) !important;
  padding: 26px 0 14px !important;
}
footer > section:last-child a{ color: rgba(255,255,255,.86) !important; }
footer > section:last-child a:hover{ color:#fff !important; text-decoration:underline !important; }
footer .legal{
  margin-top:18px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.55) !important;
  font-size:12px !important;
}

/* Ajuste logo del footer */
footer address img{ max-width: 210px !important; opacity: .95; }
:root {
    --fn-blue: #04488d; /* tu azul interior */
    --fn-blue-2: #03376c;
    --fn-dark: #0b1220;
    --fn-dark-2: #070c16;
    --fn-w: rgba(255,255,255,.86);
    --fn-m: rgba(255,255,255,.68);
}

/* Footer base */
.fn-footer {
    background: linear-gradient(180deg, var(--fn-dark) 0%, var(--fn-dark-2) 100%);
    color: var(--fn-w);
}

/* CTA strip (descarga) integrado */
.fn-footer-cta {
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(900px 360px at 18% 35%, rgba(4,72,141,.25), transparent 60%), radial-gradient(900px 360px at 82% 35%, rgba(56,189,248,.14), transparent 60%), linear-gradient(135deg, #0a1730 0%, #08172a 55%, #061226 100%);
}

.fn-footer-cta-inner {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 26px 24px;
}

.fn-footer-cta-left {
    flex: 1 1 auto;
    min-width: 260px;
}

.fn-footer-cta-right {
    flex: 0 0 300px;
}

.fn-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
    font-weight: 700;
    font-size: 13px;
}

.fn-footer-title {
    margin: 12px 0 6px;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 22px;
    color: #fff;
}

.fn-footer-sub {
    margin: 0 0 14px;
    color: var(--fn-m);
    line-height: 1.45;
    max-width: 720px;
}

.fn-footer-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fn-store img {
    height: 42px;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.22));
}

.fn-footer-slogan {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.84);
    font-weight: 700;
    margin-top: 8px;
}

/* QR card (más pequeña y abajo a la derecha “visual”) */
.fn-qr-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 14px 14px 12px;
}

.fn-qr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.fn-qr-img {
    width: 170px; /* clave: NO ocupa tanto */
    height: auto;
    display: block;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
}

.fn-qr-note {
    text-align: center;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    margin-top: 10px;
}

/* Footer main */
.fn-footer-main {
    padding: 22px 0 18px;
}

.fn-footer-col {
    margin-top: 18px;
}

.fn-footer-brand img {
    max-width: 170px;
    opacity: .95;
}

.fn-footer-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

    .fn-footer-list li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin: 10px 0;
        color: var(--fn-m);
    }

    .fn-footer-list i {
        margin-top: 2px;
        color: rgba(255,255,255,.75);
        width: 18px;
    }

    .fn-footer-list a {
        color: rgba(255,255,255,.86);
        text-decoration: none;
    }

        .fn-footer-list a:hover {
            color: #fff;
            text-decoration: underline;
        }

.fn-footer-navtitle {
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
}

.fn-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .fn-footer-nav a {
        display: inline-block;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        color: rgba(255,255,255,.86);
        text-decoration: none;
        font-weight: 800;
        font-size: 13px;
    }

        .fn-footer-nav a:hover {
            background: rgba(4,72,141,.22);
            border-color: rgba(4,72,141,.35);
            color: #fff;
        }

.fn-footer-legal {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.58);
    font-size: 12px;
}

    .fn-footer-legal a {
        color: rgba(255,255,255,.70);
        text-decoration: none;
    }

        .fn-footer-legal a:hover {
            color: #fff;
            text-decoration: underline;
        }

.fn-dot {
    margin: 0 8px;
    color: rgba(255,255,255,.35);
}

/* Responsive */
@media (max-width: 991px) {
    .fn-footer-cta-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .fn-footer-cta-right {
        flex: 0 0 auto;
    }

    .fn-qr-card {
        width: 100%;
    }

    .fn-qr-img {
        width: 160px;
    }
}
:root {
    --fn-blue: #04488d;
    --fn-dark: #0b1220;
    --fn-dark2: #070c16;
}

/* Footer fondo oscuro (un solo bloque) */
.fn-footer-one {
    background: radial-gradient(1100px 520px at 20% 20%, rgba(4,72,141,.22), transparent 60%), radial-gradient(900px 420px at 80% 30%, rgba(56,189,248,.14), transparent 62%), linear-gradient(180deg, var(--fn-dark) 0%, var(--fn-dark2) 100%);
    color: rgba(255,255,255,.86);
    padding: 26px 0 22px;
}

/* Layout fila */
.fn-footer-one-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding-left: 24px;
    padding-right: 24px;
}

/* IZQ */
.fn-foot-left {
    flex: 1 1 auto;
    min-width: 320px;
}

.fn-foot-brand img {
    height: 46px;
    width: auto;
    opacity: .95;
    display: block;
    margin-bottom: 14px;
}

.fn-foot-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
}

.fn-foot-title {
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
}

.fn-foot-text {
    color: rgba(255,255,255,.68);
    line-height: 1.45;
    margin-bottom: 10px;
}

.fn-foot-links a {
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255,255,255,.78) !important;
    text-decoration: none !important;
    margin: 8px 0;
}

    .fn-foot-links a:hover {
        color: #fff !important;
        text-decoration: underline !important;
    }

.fn-foot-links i {
    width: 18px;
    color: rgba(255,255,255,.70);
}

.fn-foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .fn-foot-nav a {
        display: inline-block;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        color: rgba(255,255,255,.86) !important;
        text-decoration: none !important;
        font-weight: 800;
        font-size: 13px;
    }

        .fn-foot-nav a:hover {
            background: rgba(4,72,141,.22);
            border-color: rgba(4,72,141,.35);
            color: #fff !important;
        }

.fn-foot-legal {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.58);
    font-size: 12px;
}

    .fn-foot-legal a {
        color: rgba(255,255,255,.72) !important;
        text-decoration: none !important;
    }

        .fn-foot-legal a:hover {
            color: #fff !important;
            text-decoration: underline !important;
        }

.fn-dot {
    margin: 0 8px;
    color: rgba(255,255,255,.35);
}

/* DER */
.fn-foot-right {
    flex: 0 0 420px;
}

.fn-appbox {
    height: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 16px;
}

.fn-app-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 800;
    font-size: 13px;
    color: #fff;
}

.fn-app-title {
    margin-top: 10px;
    font-weight: 900;
    color: #fff;
    font-size: 18px;
}

.fn-app-sub {
    margin-top: 4px;
    color: rgba(255,255,255,.70);
}

.fn-appbox-mid {
    margin-top: 14px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.fn-qrmini {
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    width: 170px;
    text-align: center;
}

.fn-qrmini-head {
    font-weight: 900;
    color: #111827;
    margin-bottom: 8px;
}

.fn-qrmini img {
    width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.fn-qrmini-note {
    margin-top: 8px;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.fn-app-actions {
    flex: 1 1 auto;
    min-width: 170px;
}

.fn-app-slogan {
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255,255,255,.88);
    font-weight: 900;
    margin-bottom: 12px;
}

.fn-store-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fn-store img {
    height: 40px;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.20));
}

/* Responsive */
@media (max-width: 991px) {
    .fn-footer-one-inner {
        flex-direction: column;
        padding-left: 14px;
        padding-right: 14px;
    }

    .fn-foot-grid {
        grid-template-columns: 1fr;
    }

    .fn-foot-right {
        flex: 0 0 auto;
        width: 100%;
    }

    .fn-appbox-mid {
        flex-direction: column;
        align-items: stretch;
    }

    .fn-qrmini {
        width: 100%;
    }

        .fn-qrmini img {
            width: 160px;
        }
}
/* Mantén el fondo del footer a ancho completo */
.fn-footer-one {
    width: 100%;
}

/* El inner ya va centrado por .container, aquí solo quitamos padding extra */
.fn-footer-one-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Si quieres un pelín de aire dentro del ancho útil */
.fn-footer-one-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

@media (max-width: 768px) {
    .fn-footer-one-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
/* Fecha y hora en blanco */
.fn-clock,
.fn-clock .fn-date,
.fn-clock #Date,
.fn-clock .fn-time,
.fn-clock .hora,
.fn-clock .hora li,
.fn-clock i,
.fn-clock .fn-clock-sep {
    color: #fff !important;
}

/* Opcional: si el fondo del reloj es claro y quieres que destaque */
.fn-clock {
    background: rgba(4,72,141,.18) !important; /* azul corporativo suave */
    border-color: rgba(255,255,255,.18) !important;
}
/* Cabecera con el mismo fondo oscuro del pie */
.fn-topbar {
    background: radial-gradient(1100px 520px at 20% 20%, rgba(4,72,141,.22), transparent 60%), radial-gradient(900px 420px at 80% 30%, rgba(56,189,248,.14), transparent 62%), linear-gradient(180deg, #0b1220 0%, #070c16 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

    /* Texto de cabecera en blanco */
    .fn-topbar a,
    .fn-topbar .fn-hello,
    .fn-topbar .fn-userlink,
    .fn-topbar .navbar-text,
    .fn-topbar .fn-clock,
    .fn-topbar .fn-clock * {
        color: #fff !important;
    }

    /* Menú en cabecera: más limpio */
    .fn-topbar .fn-menu a {
        color: rgba(255,255,255,.86) !important;
    }

        .fn-topbar .fn-menu a:hover {
            color: #fff !important;
            background: rgba(255,255,255,.10) !important;
            border-radius: 999px;
        }

        /* Activo: azul corporativo sólido */
        .fn-topbar .fn-menu .active > a,
        .fn-topbar .fn-menu a.active {
            background: #04488d !important;
            color: #fff !important;
            border-radius: 999px;
        }

    /* Reloj: pill suave para que se lea */
    .fn-topbar .fn-clock {
        background: rgba(255,255,255,.08) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }
/* Fondo BLANCO para fecha y hora (estructura real) */
.navbar.navbar-default-fixed .fechaheader {
    background: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 2px !important; /* muy sutil, casi recto */
}

    /* Mantener texto legible */
    .navbar.navbar-default-fixed .fechaheader #Date,
    .navbar.navbar-default-fixed .fechaheader .hora,
    .navbar.navbar-default-fixed .fechaheader .hora li {
        color: #04488d !important; /* azul corporativo */
        text-shadow: none !important;
    }

    /* Hora en línea */
    .navbar.navbar-default-fixed .fechaheader .hora {
        margin: 0 !important;
        padding: 0 !important;
    }

        .navbar.navbar-default-fixed .fechaheader .hora li {
            display: inline-block !important;
            margin: 0 2px !important;
        }
/* Evitar solape icono-hora con los números */
.navbar.navbar-default-fixed .fechaheader {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

    /* Asegura espacio para el icono (background) */
    .navbar.navbar-default-fixed .fechaheader .ico-calendario {
        padding-left: 36px !important; /* ajusta si tu icono es más ancho */
        background-position: 8px center !important;
        background-repeat: no-repeat !important;
    }

    .navbar.navbar-default-fixed .fechaheader .ico-hora {
        padding-left: 100px !important; /* clave: evita el solape */
        background-position: 0px center !important;
        background-repeat: no-repeat !important;
    }

    /* La hora en una sola línea */
    .navbar.navbar-default-fixed .fechaheader .hora {
        margin: 0 !important;
        padding: 0px 0px 0px 20px !important;
        list-style: none !important;
        white-space: nowrap !important;
    }

        .navbar.navbar-default-fixed .fechaheader .hora li {
            display: inline-block !important;
            margin: 0 2px !important;
        }
/* Quitar hueco entre cabecera (navbar) y el contenido */
#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

    /* Por si la página empieza con un .container / .row / h1 con margen superior */
    #main > *:first-child {
        margin-top: 0 !important;
    }

    #main .container:first-child,
    #main .container-fluid:first-child,
    #main .row:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

/* También típico: body o wrapper con padding-top */
body, #wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}