/* ═══════════════════════════════════════════════════════════════════════
   SKIN "MARINA" — Portal del Residente (móvil ≤991px)
   ───────────────────────────────────────────────────────────────────────
   Réplica de los mockups de `Invitation Flow/marina/`.
   Cada valor está copiado de `skinkit.css` (la hoja de los mockups), no
   estimado. La correspondencia mockup → app es:

     .hero      → .mh-banner        .acts   → .mh-dual
     .act       → .mh-action        .ic     → .mh-ico-wrap
     .stats     → .mh-stats         .stat   → .mh-stat
     .sect      → .mh-act-header    .card   → .mh-next-event / .mh-act-table
     .bn        → .mh-bottom-nav

   Los selectores llevan prefijo `html` para ganar especificidad sobre los
   bloques <style> embebidos en cada página.
   Para otro skin: copiar este archivo y cambiar los tokens del :root.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

:root {
    --sk-serif: 'Cormorant Garamond', Georgia, serif;
    --sk-line: #edeef4;
    --sk-muted: #787f9c;
    --sk-card-shadow: 0 8px 22px rgba(20, 26, 52, .05);
}

html .mobile-home { background: #f5f6fb; padding-bottom: 80px; }

/* ─── TAMAÑO BASE DE LOS SVG DEL MOCKUP ───────────────────────────────
   Regla GLOBAL (no dentro de .mobile-home): el bottom nav vive fuera de
   ese contenedor y sin esto los SVG se renderizan a tamaño completo. */
html .mh-svg { width: 20px !important; height: 20px !important; flex: none; display: block; }
/* los stats no llevan icono en el mockup */
html .mh-stat .mh-svg, html .mobile-home .mh-stat .mh-svg { display: none !important; }

/* campana del topbar (mockup: .bell) — contorno, color neutro */
html .sk-bell { width: 20px; height: 20px; display: block; color: #4b5169; }
html .sb-topnav .nav-link { color: #4b5169; }

/* ═══ 1 · BANNER  (mockup: .hero) ═══════════════════════════════════════ */
html .mobile-home .mh-banner {
    /* misma separación arriba que la que llevan las cards entre sí */
    margin: 15px 15px 0 !important;
    border-radius: 24px !important;
    padding: 17px 18px 18px !important;
    position: relative;
    overflow: hidden;
    /* proporción del mockup 02 (hero ≈ mitad de alto que de ancho): en
       pantallas reales más anchas que el phone del mockup (330px) los
       paddings fijos lo dejaban chato — altura mínima + stack centrado */
    min-height: 176px;
    display: flex !important;
    align-items: center;
    box-shadow: 0 18px 36px -20px rgba(65, 84, 241, .55);
}
/* halo (mockup: .hero .glow) */
html .mobile-home .mh-banner::after {
    content: "";
    position: absolute;
    top: -40px; right: -30px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
    pointer-events: none;
}
html .mobile-home .mh-banner .mh-info { position: relative; z-index: 2; flex: 1; }

/* hairline champagne (mockup: .hero .accln) */
html .mobile-home .mh-accln {
    width: 36px; height: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    border-radius: 2px;
    margin-bottom: 10px;
    position: relative; z-index: 2;
}
/* nombre (mockup: .hero .h) */
html .mobile-home .mh-name {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    margin-top: 3px !important;
    color: #fff !important;
}
/* "Condominio · Unidad" (mockup: .hero .sub) */
html .mobile-home .mh-unitline {
    font-size: .74rem;
    color: rgba(255,255,255,.9);
    margin-top: 6px;
    position: relative; z-index: 2;
}
html .mobile-home .mh-condo,
html .mobile-home .mh-unit-row { display: none !important; }

/* badge de estado (mockup: .hero .liv) */
html .mobile-home .mh-active-badge {
    position: absolute !important;
    top: 16px; right: 16px;
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff !important;
    border: 1px solid #cdebd9 !important;
    color: #159a4e !important;
    font-size: .6rem !important;
    font-weight: 800 !important;
    padding: 5px 10px !important;
    border-radius: 99px !important;
    z-index: 3;
    box-shadow: 0 3px 10px rgba(0,0,0,.14);
}
/* chip GPS (mockup: .hero .gps) — envuelve el checkbox real */
html .mobile-home .mh-gps {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 11px;
    padding: 5px 10px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.9);
    color: var(--sk-1);
    font-size: .62rem; font-weight: 700;
    cursor: pointer;
    position: relative; z-index: 3;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
html .mobile-home .mh-gps input { position: absolute; opacity: 0; pointer-events: none; }
/* El chip SIEMPRE es blanco; el estado lo indica la bombilla:
   verde = encendido · rojo = apagado */
html .mobile-home .mh-gps,
html .mobile-home .mh-gps.on,
html .mobile-home .mh-gps:not(.on) {
    background: #fff !important;
    color: var(--sk-1) !important;
    border-color: #fff !important;
}
html .mobile-home .mh-gps::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: none;
}
/* ENCENDIDO → bombilla verde */
html .mobile-home .mh-gps.on::before {
    background: #2eca6a;
    box-shadow: 0 0 6px rgba(46,202,106,.85);
}
/* APAGADO → bombilla roja */
html .mobile-home .mh-gps:not(.on)::before {
    background: #ff4351;
    box-shadow: 0 0 6px rgba(255,67,81,.85);
}
html .mobile-home .mh-loc { display: none !important; } /* switch viejo */

/* ═══ 2 · TARJETAS DE ACCIÓN  (mockup: .acts / .act) ════════════════════ */
html .mobile-home .mh-dual {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 11px !important;
    padding: 15px 15px 2px !important;
}
html .mobile-home .mh-action {
    border-radius: 18px !important;
    padding: 14px 13px 15px !important;
    border: 1px solid var(--sk-line);
    box-shadow: var(--sk-card-shadow);
    text-align: left !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
/* icono (mockup: .act .ic — 38px, radio 12, margen inferior 10) */
html .mobile-home .mh-action .mh-ico-wrap {
    width: 38px !important; height: 38px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    order: 1;
}
html .mobile-home .mh-action .mh-ico-wrap i { font-size: 1.05rem !important; }
/* SVG del mockup dentro del icono (mockup: .act .ic svg → 20x20) */
html .mobile-home .mh-action .mh-ico-wrap .mh-svg { width: 20px; height: 20px; display: block; }
/* título (mockup: .act .t) */
html .mobile-home .mh-action .mh-ttl {
    font-size: .98rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    order: 2;
}
/* subtítulo (mockup: .act .s) */
html .mobile-home .mh-action .mh-sub {
    font-size: .64rem !important;
    margin-top: 2px !important;
    font-weight: 500;
    order: 3;
}
/* etiqueta → chip inferior (mockup 29 modo RFID: .act .mb) */
html .mobile-home .mh-action .mh-lbl {
    margin-top: 10px !important;
    font-size: .6rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    order: 4;
}
html .mobile-home .mh-action .mh-btn-mini {
    margin-top: 10px !important;
    font-size: .6rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    padding: 5px 10px !important;
    border-radius: 99px;
    order: 5;
}

/* principal (mockup: .sk-marina .act.pri, skinkit línea 41) — MISMO
   degradado del banner: índigo → violeta con parada intermedia */
html .mobile-home .mh-action.vehicle {
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75) !important;
}
html .mobile-home .mh-action.vehicle .mh-ico-wrap { background: rgba(255,255,255,.2) !important; color: #fff !important; }
html .mobile-home .mh-action.vehicle .mh-ttl { color: #fff !important; }
html .mobile-home .mh-action.vehicle .mh-sub,
html .mobile-home .mh-action.vehicle .mh-lbl { color: rgba(255,255,255,.85) !important; }
html .mobile-home .mh-action.vehicle .mh-btn-mini { background: rgba(255,255,255,.22) !important; color: #fff !important; }

/* secundaria (mockup: .act.gh) */
html .mobile-home .mh-action.pedestrian {
    background: #fff !important;
    border-color: var(--sk-line) !important;
    color: var(--sk-1) !important;
}
html .mobile-home .mh-action.pedestrian .mh-ico-wrap {
    background: color-mix(in srgb, var(--sk-2) 11%, #fff) !important;
    color: var(--sk-2) !important;
}
html .mobile-home .mh-action.pedestrian .mh-ttl { color: var(--sk-1) !important; }
html .mobile-home .mh-action.pedestrian .mh-sub,
html .mobile-home .mh-action.pedestrian .mh-lbl { color: var(--sk-muted) !important; }
html .mobile-home .mh-action.pedestrian .mh-btn-mini {
    background: color-mix(in srgb, var(--sk-2) 11%, #fff) !important;
    color: var(--sk-2) !important;
}

/* el mockup no muestra estos elementos */
html .mobile-home .qr-hora,
html .mobile-home .rfid-stage { display: none !important; }

/* ═══ 3 · STATS  (mockup: .stats / .stat) ═══════════════════════════════ */
html .mobile-home .mh-stats {
    display: flex !important;
    margin: 13px 20px 2px !important;
    padding: 13px 4px !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--sk-card-shadow) !important;
    gap: 0 !important;
}
html .mobile-home .mh-stat {
    flex: 1;
    text-align: center !important;
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 6px !important;
}
html .mobile-home .mh-stat + .mh-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 14%;
    height: 72%; width: 1px;
    background: var(--sk-line);
}
html .mobile-home .mh-stat i, html .mobile-home .mh-stat .bi { display: none !important; }
html .mobile-home .mh-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-home .mh-lbl-stat {
    font-size: .54rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
}
/* sub-línea del stat: la clase real es .mh-sub-stat ("de 5", "Hoy", "Total") */
html .mobile-home .mh-sub-stat { font-size: .54rem !important; color: #a7adc6 !important; margin-top: 1px !important; }

/* ═══ 4 · PRÓXIMA RESERVA  (mockup: .card) ══════════════════════════════ */
html .mobile-home .mh-next-event {
    margin: 8px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-home .mh-ne-ico { width: 46px !important; height: 46px !important; border-radius: 13px !important; }
html .mobile-home .mh-ne-ttl { font-size: .9rem !important; font-weight: 700; }
html .mobile-home .mh-ne-when { font-size: .7rem !important; color: var(--sk-muted) !important; }

/* ═══ 5 · ACTIVIDAD  (mockup: .sect + .card.pad0) ═══════════════════════ */
/* encabezado FUERA de la tarjeta */
html .mobile-home .mh-activity {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html .mobile-home .mh-act-header {
    padding: 15px 22px 6px !important;
    background: transparent !important;
    border-bottom: none !important;
    font-size: .64rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
html .mobile-home .mh-act-header .bi { display: none !important; }

/* la tabla es la tarjeta blanca */
html .mobile-home .mh-act-table {
    margin: 8px 15px 0 !important;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 18px;
    box-shadow: var(--sk-card-shadow);
    overflow: hidden;
    width: calc(100% - 30px) !important;
}
html .mobile-home .mh-act-table thead { display: none !important; }
html .mobile-home .mh-act-table,
html .mobile-home .mh-act-table tbody { display: block !important; }
html .mobile-home .mh-act-table tr {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 11px;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sk-line);
}
html .mobile-home .mh-act-table tr:last-child { border-bottom: none; }
html .mobile-home .mh-act-table td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
}
/* orden del mockup: [badge MODO] Persona / fecha-hora debajo */
html .mobile-home .mh-act-table td:nth-child(2) { order: 1; flex: 0 0 64px; text-align: center; }
html .mobile-home .mh-act-table td:nth-child(3) {
    order: 2; flex: 1 1 auto;
    font-weight: 700; color: var(--sk-1); font-size: .82rem;
}
html .mobile-home .mh-act-table td:nth-child(1) {
    order: 3; flex: 0 0 100%;
    margin-left: 75px;
    color: var(--sk-muted); font-size: .7rem;
}
/* el mockup no muestra TIPO ni GUARDIA */
html .mobile-home .mh-act-table td:nth-child(4),
html .mobile-home .mh-act-table td:nth-child(5) { display: none !important; }

/* ═══ 6 · BOTTOM NAV  (mockup: .bn) ═════════════════════════════════════
   OJO: el nav vive FUERA de .mobile-home, por eso los selectores NO se
   anidan bajo ese contenedor. */
html .mh-bottom-nav {
    background: #fff !important;
    border-top: 1px solid var(--sk-line) !important;
    padding: 9px 6px 11px !important;
}
html .mh-bottom-nav .mh-bn-item {
    position: relative;
    color: #a2a8c2 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
html .mh-bottom-nav .mh-bn-item span { font-size: .54rem !important; font-weight: 600 !important; }
/* SVG centrado (el item original usa text-align, no flex) */
html .mh-bottom-nav .mh-bn-item .mh-svg { margin: 0 auto; }
html .mh-bottom-nav .mh-bn-item.active { color: var(--sk-2) !important; }
html .mh-bottom-nav .mh-bn-item.active::before {
    content: "";
    position: absolute;
    top: -9px; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 3px;
    border-radius: 3px;
    background: var(--sk-2);
}

/* ═══ 6b · BOTTOM SHEETS (.qr-sheet)  (mockup: 16_marina_acceso-peatonal) ═
   El mockup es un bottom sheet; la app trae diálogos centrados. Aplica a
   cualquier modal con clase .qr-sheet (escanear QR, confirmar invitación).
   SOLO móvil: en desktop los modales quedan centrados como siempre. */
@media (max-width: 991.98px) {
/* anclado ABAJO (anula .modal-dialog-centered, que lo centra vertical)
   y entra deslizando desde el borde inferior */
html .qr-sheet .modal-dialog,
html .qr-sheet .modal-dialog-centered {
    position: fixed !important;
    left: 6px; right: 6px; bottom: 0;
    top: auto !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    display: block !important;
    align-items: flex-end !important;
    animation: qr-sheet-up .32s cubic-bezier(.2, .9, .25, 1);
}
@keyframes qr-sheet-up {
    from { transform: translateY(100%); opacity: .4; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* el fondo oscuro también entra suave, dejando ver el inicio detrás */
html .qr-sheet { animation: qr-dim-in .32s ease; overscroll-behavior: contain; }
@keyframes qr-dim-in { from { background: rgba(6,9,20,0); } to { background: rgba(6,9,20,.5); } }

/* ── CIERRE: el sheet se esconde deslizando hacia abajo ─────────────────
   La clase .closing la pone Blazor (_qrCerrando) 300ms antes de quitar el
   modal del DOM; el gesto de arrastre (qrSheet.initDrag) anima por JS. */
html .qr-sheet.closing .modal-dialog {
    animation: qr-sheet-down .3s cubic-bezier(.5, .05, .7, .5) forwards;
}
@keyframes qr-sheet-down {
    from { transform: translateY(0); }
    to   { transform: translateY(112%); }
}
html .qr-sheet.closing { animation: qr-dim-out .3s ease forwards; }
@keyframes qr-dim-out { to { background: rgba(6,9,20,0); } }

@media (prefers-reduced-motion: reduce) {
    html .qr-sheet .modal-dialog, html .qr-sheet,
    html .qr-sheet.closing .modal-dialog, html .qr-sheet.closing { animation: none; }
}
html .qr-sheet .modal-content {
    border: none !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 18px 18px 20px !important;
    box-shadow: 0 -20px 50px rgba(0,0,0,.35) !important;
}
/* asa superior (mockup: .grab) */
html .qr-sheet .modal-content::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    border-radius: 99px;
    background: #dfe1ec;
    margin: 0 auto 14px;
}
/* título centrado en serif, sin borde ni icono */
html .qr-sheet .modal-header {
    border-bottom: none !important;
    padding: 0 !important;
    display: block !important;
    text-align: center;
    position: relative;
}
html .qr-sheet .modal-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    width: 100%;
}
/* sin X: se cierra con Cancelar o arrastrando hacia abajo (oculto, NO eliminado) */
html .qr-sheet .modal-header .btn-close { display: none !important; }
html .qr-sheet .modal-body { padding: 8px 0 0 !important; }
/* texto descriptivo */
html .qr-sheet .modal-body .text-muted { font-size: .78rem !important; line-height: 1.55; }
/* icono de cámara: ámbar → acento del skin */
html .qr-sheet .bi-camera-fill { color: var(--sk-2) !important; }
/* botón primario: ámbar/primary → degradado de marca, ancho completo */
html .qr-sheet .btn-primary,
html .qr-sheet .btn-warning {
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
    border: none !important;
    color: #fff !important;
    width: 100%;
    border-radius: 14px !important;
    padding: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 14px 26px -16px rgba(122,69,232,.7);
}
/* botón cancelar: blanco con borde (mockup: .btn.gh) */
html .qr-sheet .btn-secondary,
html .qr-sheet .btn-outline-secondary {
    width: 100%;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    padding: 13px !important;
    color: var(--sk-1) !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    margin-top: 10px;
}
/* visor de cámara con esquinas del mockup */
html .qr-sheet #qr-camara-video {
    border: none !important;
    border-radius: 16px !important;
    max-width: 100% !important;
}
html .qr-sheet .spinner-border { color: var(--sk-2) !important; }

/* ── estado inicial: visor con esquinas verdes (mockup: .camera + .ret) ── */
html .qr-sheet .qr-lead {
    font-size: .78rem !important;
    color: var(--sk-muted) !important;
    text-align: center;
    line-height: 1.55;
    margin: 8px 0 0 !important;
}
html .qr-sheet .qr-viewer {
    margin-top: 14px;
    height: 150px;
    border-radius: 16px;
    background: radial-gradient(120% 90% at 50% 20%, #1a2340, #0a0f1f 70%);
    position: relative;
}
/* retícula 104×104 CENTRADA (mockup 16: .ret) — antes usaba insets fijos
   del phone de 330px y en pantallas reales las esquinas se abrían en un
   rectángulo ancho en vez de formar el cuadrado del mockup */
html .qr-sheet .qr-ret {
    position: absolute;
    width: 22px; height: 22px;
    border: 3px solid #6cf0a4;
}
html .qr-sheet .qr-ret.tl { top: calc(50% - 52px); left: calc(50% - 52px);  border-right: none; border-bottom: none; border-radius: 7px 0 0 0; }
html .qr-sheet .qr-ret.tr { top: calc(50% - 52px); right: calc(50% - 52px); border-left: none;  border-bottom: none; border-radius: 0 7px 0 0; }
html .qr-sheet .qr-ret.bl { bottom: calc(50% - 52px); left: calc(50% - 52px);  border-right: none; border-top: none; border-radius: 0 0 0 7px; }
html .qr-sheet .qr-ret.br { bottom: calc(50% - 52px); right: calc(50% - 52px); border-left: none;  border-top: none; border-radius: 0 0 7px 0; }
/* línea de escaneo dentro de la retícula (mockup 16: .ret .sc) */
html .qr-sheet .qr-scan {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 50%;
    width: 92px; height: 2px;
    background: linear-gradient(90deg, transparent, #6cf0a4, transparent);
    box-shadow: 0 0 10px #6cf0a4;
    animation: qr-scan-move 2.2s ease-in-out infinite;
}
@keyframes qr-scan-move {
    0%, 100% { top: calc(50% - 36px); }
    50%      { top: calc(50% + 32px); }
}
@media (prefers-reduced-motion: reduce) { html .qr-sheet .qr-scan { animation: none; } }
html .qr-sheet .qr-preview .btn-warning { margin-top: 16px; }

/* aviso "Apunta la cámara…" con la cámara activa: la app lo trae como
   alert ámbar; el mockup lo muestra como texto gris centrado. */
html .qr-sheet .alert-warning {
    background: transparent !important;
    border: none !important;
    color: var(--sk-muted) !important;
    text-align: center !important;
    font-size: .78rem !important;
    line-height: 1.55;
    padding: 10px 0 0 !important;
    margin: 0 !important;
}
html .qr-sheet .alert-warning .bi { display: none !important; }

/* ── modal Confirmar invitación (mismo sheet estándar) ─────────────────── */
html .qr-sheet .modal-title i { display: none !important; }
/* footer en columna: Confirmar (degradado) arriba, Cancelar debajo */
html .qr-sheet .modal-footer {
    display: flex !important;
    flex-direction: column-reverse;
    border: none !important;
    padding: 8px 0 0 !important;
    gap: 0;
    margin: 0 !important;
}
html .qr-sheet .modal-footer .btn { margin-left: 0 !important; margin-right: 0 !important; }
/* texto de responsabilidad: gris centrado, sin caja azul */
html .qr-sheet .alert-info {
    background: transparent !important;
    border: none !important;
    color: var(--sk-muted) !important;
    font-size: .78rem !important;
    line-height: 1.55;
    text-align: center;
    justify-content: center;
    padding: 0 0 4px !important;
    margin: 0 0 10px !important;
}
html .qr-sheet .alert-info i { display: none !important; }
/* resumen del visitante: caja gris suave estilo .inp */
html .qr-sheet .modal-body .bg-light {
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
}

/* botón destructivo dentro de un sheet (mockup 28: .mbtn.red) */
html .qr-sheet .btn-danger {
    width: 100%;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(150deg, #ff6b78, #e0293c) !important;
    box-shadow: 0 14px 26px -16px rgba(224, 41, 60, .7);
}
html .qr-sheet .btn-danger i { display: none !important; }
html .qr-sheet .btn-secondary i,
html .qr-sheet .modal-footer .btn-outline-secondary i { display: none !important; }

/* formularios dentro de un sheet (p. ej. cambio de teléfono): .field/.inp */
html .qr-sheet .form-label {
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .qr-sheet .modal-body .form-control {
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    height: auto !important;
}
html .qr-sheet .modal-body .form-control:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .qr-sheet .modal-body .form-control:disabled { color: var(--sk-muted) !important; opacity: 1; }
html .qr-sheet .modal-body .form-control::placeholder { color: #a7adc6 !important; }

} /* fin @media ≤991.98px (bottom sheets solo móvil) */

/* ═══ 7 · BANNERS DE LAS DEMÁS PÁGINAS ══════════════════════════════════
   Clases verificadas una por una en el código (NO inventar prefijos). */
html .av-banner, html .ay-banner, html .dn-banner, html .dr-banner,
html .ep-banner, html .ev-banner, html .mp-banner, html .nf-banner,
html .na-banner, html .np-banner, html .nv-banner, html .pa-banner,
html .ra-banner, html .vh-banner {
    margin: 15px 15px 0 !important;
    border-radius: 24px !important;
    padding: 17px 18px 18px !important;
    box-shadow: 0 18px 36px -20px rgba(65, 84, 241, .55);
    position: relative;
    overflow: hidden;
    /* las páginas traen sticky+top:56px; con relative ese top empujaba el
       banner 56px hacia abajo — anclarlo igual que el banner de inicio */
    top: 0 !important;
}
html .ay-banner-name, html .mp-banner-name, html .nf-banner-name,
html .pa-banner-name, html .ra-banner-name, html .vh-banner-name {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06;
}
html .ay-banner-info::before, html .mp-banner-info::before,
html .nf-banner-info::before, html .pa-banner-info::before,
html .ra-banner-info::before, html .vh-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}

/* ═══ 9 · PERSONAS AUTORIZADAS  (mockup: 03_marina_personas) ════════════
   Correspondencia verificada en PersonasAutorizadas.razor:
     .hero → .pa-banner        .eyb  → .pa-banner-page-label
     .ibtn → .pa-banner-add    .chips/.chip → .pa-stats/.pa-stat
     .search → .pa-search      .list/.lrow → .pa-list/.pa-item
     .tags/.bdg2 → .pa-item-meta/.pa-badge
     .cnt → .pa-item-visitas   .note → .pa-info-foot */

html .mobile-pa { background: #f5f6fb; }

/* mismo lugar y misma altura que el banner de inicio (.mh-banner) */
html .mobile-pa .pa-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
/* el botón + arriba a la derecha (como el .ibtn del mockup y el badge del inicio) */
html .mobile-pa .pa-banner-add { position: absolute; top: 16px; right: 16px; }

/* hero: sin avatar (el mockup no lo muestra) — oculto, NO eliminado */
html .mobile-pa .pa-banner-avatar { display: none !important; }
html .mobile-pa .pa-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-pa .pa-banner-name { color: #fff !important; }
html .mobile-pa .pa-banner-unit {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}
/* botón + (mockup: .ibtn blanco) */
html .mobile-pa .pa-banner-add {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    flex: none;
}

/* KPI chips (mockup: .chips / .chip) */
html .mobile-pa .pa-stats {
    display: flex !important;
    gap: 8px !important;
    padding: 13px 15px 2px !important;
    margin: 0 !important;
}
html .mobile-pa .pa-stat {
    flex: 1;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    padding: 10px 6px !important;
    text-align: center !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-pa .pa-stat i { display: none !important; } /* los chips del mockup no llevan icono */
html .mobile-pa .pa-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-pa .pa-lbl {
    font-size: .54rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}
/* chip activo (mockup: .sk-marina .chip.on) */
html .mobile-pa .pa-stat.active {
    background: linear-gradient(180deg, #ffffff, #f0eaff) !important;
    border-color: #e0d5ff !important;
}
html .mobile-pa .pa-stat.active .pa-num { color: var(--sk-1) !important; }
html .mobile-pa .pa-stat.active .pa-lbl { color: var(--sk-1) !important; opacity: .7; }

/* búsqueda (mockup: .search) */
html .mobile-pa .pa-search {
    margin: 12px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 13px !important;
    padding: 10px 13px !important;
    display: flex; align-items: center; gap: 9px;
    color: var(--sk-muted) !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-pa .pa-search i { font-size: 16px; color: var(--sk-muted); }
html .mobile-pa .pa-search input {
    border: none !important; outline: none !important;
    background: transparent !important;
    flex: 1; font-size: .76rem !important;
    color: #151b34;
}
html .mobile-pa .pa-search input::placeholder { color: var(--sk-muted); }

/* lista (mockup: .list / .lrow) */
html .mobile-pa .pa-list { margin: 8px 15px 0 !important; padding: 0 !important; }
html .mobile-pa .pa-item {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    display: flex !important; align-items: center; gap: 12px;
    margin-bottom: 9px !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-pa .pa-item-icon { display: none !important; } /* filas del mockup sin avatar */
html .mobile-pa .pa-item-main { flex: 1; min-width: 0; }
html .mobile-pa .pa-item-name {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
}
/* tags (mockup: .tags) */
html .mobile-pa .pa-item-meta {
    display: flex !important; gap: 6px !important;
    flex-wrap: wrap; align-items: center;
    margin-top: 6px !important;
}
/* teléfono en su propia línea bajo los tags (mockup: .mt) */
html .mobile-pa .pa-item-meta > span:not(.pa-badge) {
    flex: 0 0 100%;
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    margin-top: 2px;
}
/* badges (mockup: .bdg2) */
html .mobile-pa .pa-badge {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    letter-spacing: .02em !important;
    border: none !important;
}
html .mobile-pa .pa-badge-tipo     { background: color-mix(in srgb, var(--sk-2) 12%, #fff) !important; color: var(--sk-1) !important; }
html .mobile-pa .pa-badge-vigente  { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }
html .mobile-pa .pa-badge-fuera    { background: rgba(255,193,7,.18) !important;  color: #a5790a !important; }
html .mobile-pa .pa-badge-inactivo { background: #eef0f7 !important; color: #6b7290 !important; }

/* contador de accesos (mockup: .cnt) */
html .mobile-pa .pa-item-visitas {
    text-align: center !important; flex: none;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
html .mobile-pa .pa-vis-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-pa .pa-vis-lbl {
    font-size: .5rem !important;
    letter-spacing: .08em !important;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
/* nota final (mockup: .note) */
html .mobile-pa .pa-info-foot {
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.5 !important;
    padding: 12px 7px 0 !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
}
html .mobile-pa .pa-info-foot i { display: none !important; }

/* ═══ 10 · EDITAR PERSONA  (mockup: 17_marina_persona-editar) ═══════════
   Correspondencia verificada en EditarPersonaAutorizada.razor:
     .appbar → .ep-banner      .ibtn → .ep-banner-back / .ep-banner-save
     .appttl → .ep-banner-title  .fcard → .ep-card   .fh → .ep-card-title
     .field/.inp → .ep-form-row  .swrow/.sw → .ep-form-switch
     .two → .ep-form-dates       .irow/.bdg2 → .ep-acceso-* / .ep-badge-mov
     .btnrow/.btn.pri → .ep-btnrow/.ep-btn-guardar */

html .mobile-ep { background: #f5f6fb; }

/* banner degradado IDÉNTICO al del inicio (mismo lugar, misma altura),
   con la info de la persona y los botones de navegación en los extremos:
   back a la izquierda · guardar a la derecha (hereda de la sección 7 el
   margen 15px, radio 24, sombra y top:0; el degradado viene de la página) */
html .mobile-ep .ep-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
    gap: 12px;
}
/* botones IDÉNTICOS al botón + del header de Personas, anclados en los
   EXTREMOS SUPERIORES del card (top 16, como el + en Personas) */
html .mobile-ep .ep-banner-back,
html .mobile-ep .ep-banner-save {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    flex: none;
    align-self: auto !important;
    position: absolute !important;
    top: 16px;
    z-index: 3;
}
html .mobile-ep .ep-banner-back { left: 16px; }
html .mobile-ep .ep-banner-save { right: 16px; }
html .mobile-ep .ep-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
/* hairline champagne, igual que el banner de inicio */
html .mobile-ep .ep-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-ep .ep-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-ep .ep-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}
html .mobile-ep .ep-banner-sub {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* cards de formulario (mockup: .fcard dentro de .form) */
html .mobile-ep .ep-card {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    margin: 12px 15px 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-ep .ep-card-title {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-ep .ep-card-title i { display: none !important; } /* los .fh del mockup no llevan icono */
html .mobile-ep .ep-accesos-count {
    color: var(--sk-1) !important;
    font-weight: 800 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* filas de formulario (mockup: .field / .inp) */
html .mobile-ep .ep-form-row { margin-bottom: 13px !important; }
html .mobile-ep .ep-form-row:last-child { margin-bottom: 0 !important; }
html .mobile-ep .ep-form-row label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-ep .ep-form-row .req { color: #ff4351 !important; }
html .mobile-ep .ep-form-row input,
html .mobile-ep .ep-form-row select {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-ep .ep-form-row input:focus,
html .mobile-ep .ep-form-row select:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-ep .ep-form-row input::placeholder { color: #a7adc6; }

/* switch (mockup: .swrow — texto a la izquierda, switch a la derecha) */
html .mobile-ep .ep-form-switch {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 12px;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-ep .ep-form-switch label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
    margin: 0 !important;
}
html .mobile-ep .ep-form-switch .form-check-input {
    width: 44px !important; height: 26px !important;
    background-color: #dfe1ec;
    border: none !important;
}
html .mobile-ep .ep-form-switch .form-check-input:checked {
    background-color: var(--sk-2) !important;
}

/* fechas en dos columnas (mockup: .two) */
html .mobile-ep .ep-form-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 13px !important;
}
html .mobile-ep .ep-form-dates .ep-form-row { margin-bottom: 0 !important; }

/* accesos registrados (mockup: .irow — fecha izquierda, badge derecha) */
html .mobile-ep .ep-acceso-item {
    display: flex !important;
    align-items: center;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--sk-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html .mobile-ep .ep-acceso-item:last-child { border-bottom: none !important; }
html .mobile-ep .ep-acceso-icon { display: none !important; }
html .mobile-ep .ep-acceso-main { flex: 1; min-width: 0; }
html .mobile-ep .ep-acceso-top {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
html .mobile-ep .ep-acceso-fecha {
    font-size: .78rem !important;
    color: var(--sk-muted) !important;
    font-weight: 600 !important;
}
html .mobile-ep .ep-badge-mov {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    letter-spacing: .02em;
    border: none !important;
}
html .mobile-ep .ep-badge-mov.entrada { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }
html .mobile-ep .ep-badge-mov.salida  { background: #eef0f7 !important; color: #6b7290 !important; }
html .mobile-ep .ep-acceso-meta { font-size: .66rem !important; color: var(--sk-muted) !important; margin-top: 2px; }

/* Guardar inferior (mockup: .btnrow .btn.pri) */
html .mobile-ep .ep-btnrow { padding: 14px 15px 0; }
html .mobile-ep .ep-btn-guardar {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 13px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%);
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
}
html .mobile-ep .ep-btn-guardar:disabled { opacity: .6; }

/* ═══ 11 · ESTADOS DE CONEXIÓN  (mockup: 25_marina_conexion) ════════════
   Elementos globales de ResidenteLayout: dot del topbar, toast offline,
   overlay de recarga y el indicador pull-to-refresh. */

/* dot con glow (mockup: .cdot green/yellow/red) */
html .conn-status-dot.connected    { box-shadow: 0 0 6px rgba(46,202,106,.7) !important; }
html .conn-status-dot.reconnecting { box-shadow: 0 0 6px rgba(255,193,7,.7); }
html .conn-status-dot.disconnected { box-shadow: 0 0 6px rgba(255,67,81,.7); }

/* toast "Sin conexión" (mockup: .toast) */
html .conn-toast {
    left: 12px !important; right: 12px !important; bottom: 74px !important;
    border-radius: 14px !important;
    padding: 12px 13px !important;
    gap: 11px !important;
    box-shadow: 0 12px 28px rgba(255,67,81,.45) !important;
}
html .conn-toast-msg strong { font-size: .8rem !important; font-weight: 700 !important; line-height: 1.25; }
html .conn-toast-msg small  { font-size: .66rem !important; opacity: .92; font-weight: 500; }
/* botón Recargar (mockup: .rb — pastilla blanca solo texto) */
html .conn-toast-btn {
    color: #d3384a !important;
    padding: 7px 13px !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
}
html .conn-toast-btn i { display: none !important; }

/* overlay "Recargando..." (mockup: .ovl — claro con blur, no navy) */
html .reload-overlay {
    background: rgba(245,246,251,.7) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    color: #151b34 !important;
}
/* spinner violeta (mockup: .spin 44px sobre phone de 290px — escalado a
   pantalla real ~440px, factor 1.52 → 66px / textos 1.9rem y 1.1rem) */
html .reload-spinner {
    width: 66px !important; height: 66px !important;
    border: 4px solid color-mix(in srgb, var(--sk-2) 22%, #fff) !important;
    border-top-color: var(--sk-2) !important;
    animation-duration: 1s !important;
    margin-bottom: 0 !important;
}
html .reload-msg {
    font-family: var(--sk-serif) !important;
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
    margin: 18px 0 0 !important;
}
html .reload-sub {
    font-size: 1.1rem !important;
    color: var(--sk-muted) !important;
    opacity: 1 !important;
    margin-top: 6px;
}

/* indicador pull-to-refresh (mockup: .ptr — violeta) */
html #ptrIndicator {
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,246,251,.95)) !important;
    color: var(--sk-2) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
}
/* CLAVE: sin esto, el pull-to-refresh NATIVO de Chrome/Android captura el
   gesto y recarga la página sin pasar por triggerReload() — el usuario
   nunca ve el overlay skineado. `contain` desactiva el PTR nativo y deja
   el gesto en manos del PTR propio de _Host.cshtml. */
@media (max-width: 991.98px) {
    html, body { overscroll-behavior-y: contain; }
}

/* ═══ 12 · MENÚ LATERAL  (mockup: 15_marina_menu) ═══════════════════════
   Drawer blanco con header degradado. SOLO móvil (≤991px) — el sidebar
   desktop conserva el sb-sidenav-dark original con iconos FontAwesome.
     .dpanel → .sb-sidenav        .dhead → .sk-dhead
     .dsec → .sb-sidenav-menu-heading   .ditem → .nav-link
     .cbdg → .badge               .dfoot → .sb-sidenav-footer */
@media (max-width: 991.98px) {

    html .sb-sidenav.sb-sidenav-dark {
        background: #fff !important;
        color: #151b34 !important;
        box-shadow: 12px 0 40px rgba(0,0,0,.3);
    }

    /* header degradado (mockup: .dhead) */
    html .sb-sidenav .sk-dhead {
        background: linear-gradient(150deg, var(--sk-1) 0%, var(--sk-2) 62%, color-mix(in srgb, var(--sk-2) 45%, #fff) 100%);
        color: #fff;
        padding: 22px 18px 16px;
    }
    html .sb-sidenav .sk-dhead-av {
        width: 46px; height: 46px;
        border-radius: 50%;
        background: rgba(255,255,255,.22);
        border: 2px solid rgba(255,255,255,.4);
        display: flex; align-items: center; justify-content: center;
        font-family: var(--sk-serif);
        font-weight: 700;
        font-size: 1.05rem;
    }
    html .sb-sidenav .sk-dhead-nm {
        font-family: var(--sk-serif);
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 9px;
    }
    html .sb-sidenav .sk-dhead-un { font-size: .68rem; opacity: .9; margin-top: 1px; }

    /* secciones (mockup: .dsec) */
    html .sb-sidenav .sb-sidenav-menu-heading {
        font-size: .56rem !important;
        letter-spacing: .2em !important;
        text-transform: uppercase;
        color: var(--sk-muted) !important;
        font-weight: 800 !important;
        padding: 14px 18px 6px !important;
    }

    /* items (mockup: .ditem) */
    html .sb-sidenav .nav-link {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 18px !important;
        font-size: .85rem !important;
        font-weight: 600 !important;
        color: #151b34 !important;
    }
    html .sb-sidenav .nav-link .sb-nav-link-icon {
        color: var(--sk-2) !important;
        margin: 0 !important;
        width: auto !important;
    }
    html .sb-sidenav .nav-link .sb-nav-link-icon svg { width: 18px; height: 18px; display: block; }
    html .sb-sidenav .nav-link.active {
        background: color-mix(in srgb, var(--sk-2) 8%, #fff) !important;
        color: var(--sk-1) !important;
        font-weight: 700 !important;
    }
    /* Cerrar Sesión trae inline rosado del tema oscuro */
    html .sb-sidenav .nav-link[href="/logout"] { color: #151b34 !important; }

    /* badge de notificaciones (mockup: .cbdg) */
    html .sb-sidenav .nav-link .badge {
        margin-left: auto !important;
        background: #ff4351 !important;
        color: #fff !important;
        font-size: .56rem !important;
        font-weight: 800 !important;
        border-radius: 99px !important;
        padding: 2px 7px !important;
    }

    /* footer (mockup: .dfoot) */
    html .sb-sidenav .sb-sidenav-footer {
        background: #fff !important;
        border-top: 1px solid var(--sk-line);
        padding: 14px 18px 18px !important;
        font-size: .66rem !important;
        color: var(--sk-muted) !important;
    }
    html .sb-sidenav .sb-sidenav-footer .small { font-size: .66rem !important; color: var(--sk-muted) !important; }
    html .sb-sidenav .sk-dfoot-nm {
        color: #151b34;
        font-size: .78rem;
        font-weight: 700;
        margin-top: 2px;
    }
}

/* ═══ 13 · RESERVAR AMENIDAD  (mockup: 05_marina_amenidades) ════════════
   Correspondencia verificada en ReservarAmenidad.razor:
     .hero → .ra-banner        .chips/.chip → .ra-stats/.ra-stat
     .card → .ra-card          .inp.sel → .ra-selector select
     .calhead → .ra-cal-header  .calgrid → .ra-cal-weekdays/.ra-cal-grid
     .d → .ra-cal-day          .callegend → .ra-cal-legend
     .fh → .ra-card-title/.ra-form-header   .two → .ra-form-cols
     .field/.inp → .ra-form-row  .btn.pri → .ra-form-save */

html .mobile-resamenidad { background: #f5f6fb; }

/* banner: mismo lugar/altura que inicio; sin avatar (mockup no lo trae) */
html .mobile-resamenidad .ra-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-resamenidad .ra-banner-avatar { display: none !important; }
html .mobile-resamenidad .ra-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-resamenidad .ra-banner-name { color: #fff !important; }
html .mobile-resamenidad .ra-banner-unit {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* KPI chips (mockup: .chips/.chip) */
html .mobile-resamenidad .ra-stats {
    display: flex !important;
    gap: 8px !important;
    padding: 13px 15px 2px !important;
    margin: 0 !important;
}
html .mobile-resamenidad .ra-stat {
    flex: 1;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    padding: 10px 6px !important;
    text-align: center !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-resamenidad .ra-stat i { display: none !important; }
html .mobile-resamenidad .ra-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-resamenidad .ra-lbl {
    font-size: .54rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}
html .mobile-resamenidad .ra-stat.active {
    background: linear-gradient(180deg, #ffffff, #f0eaff) !important;
    border-color: #e0d5ff !important;
}
html .mobile-resamenidad .ra-stat.active .ra-num { color: var(--sk-1) !important; }
html .mobile-resamenidad .ra-stat.active .ra-lbl { color: var(--sk-1) !important; opacity: .7; }

/* cards (mockup: .card) */
html .mobile-resamenidad .ra-card {
    margin: 8px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: var(--sk-card-shadow) !important;
    display: flex;
    flex-direction: column;
}
html .mobile-resamenidad .ra-card-title,
html .mobile-resamenidad .ra-form-header {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
html .mobile-resamenidad .ra-card-title i,
html .mobile-resamenidad .ra-form-header i { display: none !important; }

/* selector de amenidad (mockup: .inp.sel) */
html .mobile-resamenidad .ra-selector select {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-resamenidad .ra-selector-desc {
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.5;
    margin-top: 8px;
}
html .mobile-resamenidad .ra-selector-desc i { display: none !important; }

/* calendario (mockup: .calhead/.calgrid/.d) */
html .mobile-resamenidad .ra-cal-header {
    order: 1;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-resamenidad .ra-cal-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
    text-transform: capitalize;
}
html .mobile-resamenidad .ra-cal-nav {
    background: transparent !important;
    border: none !important;
    color: var(--sk-muted) !important;
    padding: 0 4px;
}
html .mobile-resamenidad .ra-cal-weekdays {
    order: 2;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 5px !important;
}
html .mobile-resamenidad .ra-cal-weekdays div {
    text-align: center;
    font-size: .52rem !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    padding-bottom: 3px;
}
html .mobile-resamenidad .ra-cal-grid {
    order: 3;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 5px !important;
}
html .mobile-resamenidad .ra-cal-empty { background: transparent !important; }
html .mobile-resamenidad .ra-cal-day {
    aspect-ratio: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
    border-radius: 10px !important;
    background: #f7f8fc !important;
    border: none !important;
    padding: 0 !important;
}
html .mobile-resamenidad .ra-cal-day:disabled {
    color: #c3c8dd !important;
    background: transparent !important;
}
/* día seleccionado (mockup: .sk-marina .d.on — degradado de marca) */
html .mobile-resamenidad .ra-cal-day.selected {
    background: linear-gradient(145deg, var(--sk-grad-a), var(--sk-grad-b)) !important;
    color: #fff !important;
}
/* leyenda DEBAJO del grid, como el mockup (cuadritos 9px radio 3) */
html .mobile-resamenidad .ra-cal-legend {
    order: 4;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
    padding: 10px 2px 0 !important;
    margin: 0 !important;
    font-size: .6rem !important;
    color: var(--sk-muted) !important;
    font-weight: 600 !important;
}
html .mobile-resamenidad .ra-cal-legend .ra-dot {
    width: 9px; height: 9px;
    border-radius: 3px !important;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}
html .mobile-resamenidad .ra-cal-occupied { order: 5; font-size: .66rem !important; color: var(--sk-muted) !important; margin-top: 10px; }
html .mobile-resamenidad .ra-bloque {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    display: inline-block;
    margin: 2px 4px 0 0;
}
html .mobile-resamenidad .ra-bloque-pendiente { background: rgba(255,193,7,.2) !important;  color: #a5790a !important; }
html .mobile-resamenidad .ra-bloque-aprobada  { background: rgba(255,67,81,.14) !important; color: #d3384a !important; }

/* form de reserva (mockup: .two + .field/.inp + .btn.pri) */
html .mobile-resamenidad .ra-form-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
html .mobile-resamenidad .ra-form-row label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-resamenidad .ra-form-row input,
html .mobile-resamenidad .ra-form-row textarea {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-resamenidad .ra-form-row input:focus,
html .mobile-resamenidad .ra-form-row textarea:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-resamenidad .ra-form-row { margin-top: 13px; }
html .mobile-resamenidad .ra-form-cols .ra-form-row { margin-top: 0; }
html .mobile-resamenidad .ra-form-save {
    width: 100%;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
    margin-top: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
html .mobile-resamenidad .ra-form-save i:not(.spin) { display: none !important; }
html .mobile-resamenidad .ra-form-save:disabled { opacity: .6; }

/* lista de reservas agendadas — MISMO patrón que las rows de Personas
   Autorizadas (.pa-item / mockup .lrow): header afuera + cada reserva
   como card blanca individual. La card contenedora se vuelve transparente */
html .mobile-resamenidad .ra-card:has(.ra-list-header) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html .mobile-resamenidad .ra-list-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 15px 7px 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-resamenidad .ra-list-header .ra-card-title { margin: 0 !important; }
html .mobile-resamenidad .ra-list-month-badge {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    background: color-mix(in srgb, var(--sk-2) 12%, #fff) !important;
    color: var(--sk-1) !important;
    text-transform: capitalize;
}
/* row = card blanca (verbatim .lrow) */
html .mobile-resamenidad .ra-list-item {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-resamenidad .ra-list-item-main { flex: 1; min-width: 0; }
html .mobile-resamenidad .ra-list-item-name {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
}
html .mobile-resamenidad .ra-list-item-date {
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    margin-top: 2px !important;
}
/* badge de estado (verbatim .bdg2 green/amber/red/grey) */
html .mobile-resamenidad .ra-list-item-badge {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    letter-spacing: .02em;
    border: none !important;
}
html .mobile-resamenidad .ra-list-item-badge.ra-bg-aprobada  { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }
html .mobile-resamenidad .ra-list-item-badge.ra-bg-pendiente { background: rgba(255,193,7,.18) !important;  color: #a5790a !important; }
html .mobile-resamenidad .ra-list-item-badge.ra-bg-rechazada { background: rgba(255,67,81,.12) !important;  color: #d3384a !important; }
html .mobile-resamenidad .ra-list-item-badge.ra-bg-cancelada { background: #eef0f7 !important; color: #6b7290 !important; }
/* botón cancelar discreto */
html .mobile-resamenidad .ra-list-cancel {
    background: transparent !important;
    border: none !important;
    color: #d3384a !important;
    flex: none;
    padding: 4px !important;
}

/* ═══ 14 · DETALLE DE RESERVA  (mockup: 06_marina_reserva-detalle) ══════
   Banner estándar de detalle (igual que editar persona): degradado con
   back circular arriba-izquierda. Cards: 3 stats, Visitantes+CTA, irows. */

html .mobile-dr { background: #f5f6fb; }

html .mobile-dr .dr-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-dr .dr-banner-back {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px; left: 16px;
    z-index: 3;
}
html .mobile-dr .dr-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-dr .dr-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-dr .dr-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-dr .dr-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}
html .mobile-dr .dr-banner-when {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* 3 stats: Estado / Tiempo / Capacidad (mockup líneas 21-25) */
html .mobile-dr .dr-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 9px !important;
    padding: 6px 15px 0 !important;
    margin: 0 !important;
}
html .mobile-dr .dr-stat {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 12px 6px !important;
    text-align: center !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-dr .dr-stat-ico { display: none !important; }
html .mobile-dr .dr-stat-val {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
}
html .mobile-dr .dr-stat.stat-success .dr-stat-val { color: #159a4e !important; }
html .mobile-dr .dr-stat.stat-warning .dr-stat-val { color: #a5790a !important; }
html .mobile-dr .dr-stat.stat-danger  .dr-stat-val { color: #d3384a !important; }
html .mobile-dr .dr-stat-lbl {
    text-transform: uppercase;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
    font-size: .52rem !important;
    color: var(--sk-muted) !important;
    margin-top: 2px;
}

/* card Visitantes + CTA (mockup líneas 27-32) */
html .mobile-dr .dr-action {
    margin: 8px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: var(--sk-card-shadow) !important;
    color: #151b34 !important;
    text-align: left !important;
    display: block !important;
}
html .mobile-dr .dr-action-ico { display: none !important; }
html .mobile-dr .dr-action-lbl {
    font-size: .56rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
html .mobile-dr .dr-action-val {
    font-family: var(--sk-serif) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
}
html .mobile-dr .dr-action-sub { font-size: .7rem !important; color: var(--sk-muted) !important; }
html .mobile-dr .dr-action-btn {
    width: 100%;
    margin-top: 12px !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
html .mobile-dr .dr-action-btn i { font-size: 17px; }

/* información (mockup: .irow) */
html .mobile-dr .dr-info-card {
    margin: 12px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-dr .dr-info-card-title {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-dr .dr-info-card-title i { display: none !important; }
html .mobile-dr .dr-info-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--sk-line) !important;
    font-size: .78rem !important;
}
html .mobile-dr .dr-info-row:last-child { border-bottom: none !important; }
html .mobile-dr .dr-info-row dt { color: var(--sk-muted) !important; font-weight: 600 !important; }
html .mobile-dr .dr-info-row dd { color: #151b34 !important; font-weight: 700 !important; text-align: right; margin: 0; }
html .mobile-dr .dr-info-notas dd { color: var(--sk-muted) !important; font-weight: 600 !important; }
html .mobile-dr .dr-info-badge {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    border: none !important;
}
html .mobile-dr .dr-badge-aprobada  { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }
html .mobile-dr .dr-badge-pendiente { background: rgba(255,193,7,.18) !important;  color: #a5790a !important; }
html .mobile-dr .dr-badge-rechazada { background: rgba(255,67,81,.12) !important;  color: #d3384a !important; }
html .mobile-dr .dr-badge-cancelada { background: #eef0f7 !important; color: #6b7290 !important; }

/* ═══ 15 · VISITANTES DE RESERVA  (mockup: 07_marina_visitantes) ════════
   Banner estándar de detalle: back circular arriba-izq + agregar (+)
   arriba-der. Card de cupo + rows blancas tipo .lrow con badge al extremo. */

html .mobile-av { background: #f5f6fb; }

html .mobile-av .av-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-av .av-banner-back,
html .mobile-av .av-banner-add {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px;
    z-index: 3;
}
html .mobile-av .av-banner-back { left: 16px; }
html .mobile-av .av-banner-add  { right: 16px; }
html .mobile-av .av-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-av .av-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-av .av-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-av .av-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}
html .mobile-av .av-banner-when {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* card de cupo (mockup línea 21) */
html .mobile-av .av-occupancy {
    margin: 8px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: var(--sk-card-shadow) !important;
    display: flex !important;
    align-items: center;
}
html .mobile-av .av-occupancy-ico { display: none !important; }
html .mobile-av .av-occupancy-lbl {
    font-size: .56rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
html .mobile-av .av-occupancy-main > div:last-child {
    font-family: var(--sk-serif) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
}
html .mobile-av .av-occupancy-num { font-family: inherit !important; color: inherit !important; }

/* lista (mockup: .list/.lrow — badge al extremo derecho) */
html .mobile-av .av-list { margin: 8px 15px 0 !important; padding: 0 !important; }
html .mobile-av .av-item {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
    position: relative;
}
html .mobile-av .av-item-ico { display: none !important; } /* filas del mockup sin avatar */
html .mobile-av .av-item-main { flex: 1; min-width: 0; padding-right: 78px; }
html .mobile-av .av-item-name {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
}
html .mobile-av .av-item-meta {
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    margin-top: 2px !important;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
html .mobile-av .av-item-meta i { display: none !important; }
/* badge anclado al extremo derecho de la row (mockup) */
html .mobile-av .av-badge {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    letter-spacing: .02em;
    border: none !important;
}
html .mobile-av .av-badge-activa   { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }
html .mobile-av .av-badge-expirada { background: #eef0f7 !important; color: #6b7290 !important; }
html .mobile-av .av-badge-revocada { background: rgba(255,67,81,.12) !important; color: #d3384a !important; }

/* ═══ 16 · NUEVO VISITANTE  (mockup: 08_marina_visitante-nuevo) ═════════
   Banner estándar (back izq + enviar der), 2 mini-stats, fcard de datos,
   switches limpios y botón inferior degradado (mockup .btn.green). */

html .mobile-na { background: #f5f6fb; }

html .mobile-na .na-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-na .na-banner-back,
html .mobile-na .na-banner-send {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px;
    z-index: 3;
}
html .mobile-na .na-banner-back { left: 16px; }
html .mobile-na .na-banner-send { right: 16px; }
html .mobile-na .na-banner-send:disabled { opacity: .5; }
html .mobile-na .na-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-na .na-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-na .na-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-na .na-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}
html .mobile-na .na-banner-when {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* mini stats 2 cols (mockup líneas 21-24) */
html .mobile-na .na-mini-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    padding: 6px 15px 0 !important;
    margin: 0 !important;
}
html .mobile-na .na-mini {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 12px 6px !important;
    text-align: center !important;
    box-shadow: var(--sk-card-shadow) !important;
    display: block !important;
}
html .mobile-na .na-mini-ico { display: none !important; }
html .mobile-na .na-mini-val {
    font-family: var(--sk-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
}
html .mobile-na .na-mini-lbl {
    text-transform: uppercase;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
    font-size: .52rem !important;
    color: var(--sk-muted) !important;
    margin-top: 2px;
}

/* fcard de datos (mockup: .fcard/.fh/.field/.inp) */
html .mobile-na .na-card {
    margin: 12px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-na .na-card-title {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-na .na-card-title i { display: none !important; }
html .mobile-na .na-form-row { margin-bottom: 13px !important; }
html .mobile-na .na-form-row label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-na .na-form-row .req { color: #ff4351 !important; }
html .mobile-na .na-form-row input {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-na .na-form-row input:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-na .na-form-row input::placeholder { color: #a7adc6; }

/* switch peatonal (mockup: .swrow + .note — texto izq, switch der) */
html .mobile-na .na-peatonal { margin-bottom: 14px; }
html .mobile-na .na-peatonal .form-check {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: 0 !important;
    margin: 0 !important;
}
html .mobile-na .na-peatonal .form-check-input {
    width: 44px !important; height: 26px !important;
    margin: 0 !important;
    flex: none;
}
html .mobile-na .na-peatonal .form-check-label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
}
html .mobile-na .na-peatonal .form-check-label i { display: none !important; }
html .mobile-na .na-peatonal-note {
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.5;
    margin-top: 8px;
}

/* consentimiento (mockup: .note + .swrow) */
html .mobile-na .na-consent {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.5;
}
html .mobile-na .na-consent > i { display: none !important; }
html .mobile-na .na-consent .form-check {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: 0 !important;
    margin: 12px 0 0 !important;
}
html .mobile-na .na-consent .form-check-input {
    width: 44px !important; height: 26px !important;
    margin: 0 !important;
    flex: none;
}
html .mobile-na .na-consent .form-check-label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
}
/* switches encendidos → acento del skin */
html .mobile-na .form-check-input:checked {
    background-color: var(--sk-2) !important;
    border-color: var(--sk-2) !important;
}

/* botón inferior (mockup: .btn.green → degradado en Marina, skinkit l.42) */
html .mobile-na .na-btnrow { padding: 14px 15px 0; }
html .mobile-na .na-btn-enviar {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 13px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%);
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
    display: flex; align-items: center; justify-content: center; gap: 9px;
}
html .mobile-na .na-btn-enviar i { font-size: 17px; }
html .mobile-na .na-btn-enviar:disabled { opacity: .6; }

/* ═══ 17 · NOTIFICACIONES  (mockup: 09_marina_avisos) ═══════════════════
   Correspondencia verificada en Notificaciones.razor:
     .hero → .nf-banner (chip PUSH translúcido arriba-der)
     .chips → .nf-stats     .search → .nf-search
     .tlh → .nf-day-header  .lrow → .nf-item
     .bdg2 info → .nf-tipo  .bdg2 red/green → .nf-estado */

html .mobile-notif { background: #f5f6fb; }

html .mobile-notif .nf-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-notif .nf-banner-avatar { display: none !important; }
html .mobile-notif .nf-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-notif .nf-banner-name { color: #fff !important; }
html .mobile-notif .nf-banner-unit {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}
/* chip PUSH translúcido arriba-derecha (mockup línea 19) */
html .mobile-notif .nf-push-toggle {
    position: absolute !important;
    top: 16px; right: 16px;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    color: #fff !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    border-radius: 99px !important;
}
html .mobile-notif .nf-push-lbl { color: #fff !important; font-size: .62rem !important; font-weight: 700 !important; }
html .mobile-notif .nf-push-toggle .form-check-input:checked {
    background-color: var(--sk-2) !important;
    border-color: rgba(255,255,255,.7) !important;
}

/* KPI chips (mockup: .chips/.chip) */
html .mobile-notif .nf-stats {
    display: flex !important;
    gap: 8px !important;
    padding: 13px 15px 2px !important;
    margin: 0 !important;
}
html .mobile-notif .nf-stat {
    flex: 1;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    padding: 10px 6px !important;
    text-align: center !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-notif .nf-stat i { display: none !important; }
html .mobile-notif .nf-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-notif .nf-lbl {
    font-size: .54rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}
html .mobile-notif .nf-stat.active {
    background: linear-gradient(180deg, #ffffff, #f0eaff) !important;
    border-color: #e0d5ff !important;
}
html .mobile-notif .nf-stat.active .nf-num { color: var(--sk-1) !important; }
html .mobile-notif .nf-stat.active .nf-lbl { color: var(--sk-1) !important; opacity: .7; }

/* búsqueda (mockup: .search) */
html .mobile-notif .nf-search {
    margin: 12px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 13px !important;
    padding: 10px 13px !important;
    display: flex; align-items: center; gap: 9px;
    color: var(--sk-muted) !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-notif .nf-search i { font-size: 16px; color: var(--sk-muted); }
html .mobile-notif .nf-search input {
    border: none !important; outline: none !important;
    background: transparent !important;
    flex: 1; font-size: .76rem !important;
    color: #151b34;
}
html .mobile-notif .nf-search input::placeholder { color: var(--sk-muted); }

/* lista agrupada por día (mockup: .tlh + .list/.lrow) */
html .mobile-notif .nf-list { margin: 0 15px !important; padding: 0 !important; }
html .mobile-notif .nf-day-header {
    padding: 14px 7px 6px !important;
    font-size: .62rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
html .mobile-notif .nf-item {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-notif .nf-icon { display: none !important; } /* filas del mockup sin icono */
html .mobile-notif .nf-content { flex: 1; min-width: 0; }
html .mobile-notif .nf-row1 {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
/* tipo como badge violeta (mockup: .bdg2 info) */
html .mobile-notif .nf-tipo {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    background: color-mix(in srgb, var(--sk-2) 12%, #fff) !important;
    color: var(--sk-1) !important;
    letter-spacing: .02em;
    text-transform: none !important;
}
html .mobile-notif .nf-hora { font-size: .66rem !important; color: var(--sk-muted) !important; }
html .mobile-notif .nf-asunto {
    font-size: .84rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
}
/* badge estado al extremo (mockup: bdg2 red/green) */
html .mobile-notif .nf-estado {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    letter-spacing: .02em;
    flex: none;
}
html .mobile-notif .nf-estado.nueva { background: rgba(255,67,81,.12); color: #d3384a; }
html .mobile-notif .nf-estado.leida { background: rgba(46,202,106,.14); color: #159a4e; }

/* ═══ 18 · DETALLE DE NOTIFICACIÓN  (mockup: 10/19/20/21) ═══════════════
   Banner estándar (back circular) + card principal con badges pill,
   asunto serif y cards blancas con títulos en versalitas. */

html .mobile-dn { background: #f5f6fb; }

html .mobile-dn .dn-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-dn .dn-banner-back {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px; left: 16px;
    z-index: 3;
}
html .mobile-dn .dn-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-dn .dn-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-dn .dn-banner-page-label {
    font-family: var(--sk-serif) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}
html .mobile-dn .dn-banner-when-only {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 4px;
}
html .mobile-dn .dn-banner-when-only i { display: none !important; }

/* cards blancas + títulos en versalitas */
html .mobile-dn .dn-card {
    margin: 8px 15px 0 !important;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 18px !important;
    padding: 15px !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-dn .dn-card-title {
    font-size: .62rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-dn .dn-card-title i { display: none !important; }

/* badges pill (mockup: .tags/.bdg2) */
html .mobile-dn .dn-badges-inline { display: flex !important; gap: 6px !important; flex-wrap: wrap; margin-bottom: 8px !important; }
html .mobile-dn .dn-badge {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    letter-spacing: .02em;
    border: none !important;
    display: inline-flex; align-items: center;
}
html .mobile-dn .dn-badge i { display: none !important; }
/* tipo → violeta (bdg2 info); estados con los colores del sistema */
html .mobile-dn .dn-badge-aviso,
html .mobile-dn .dn-badge-estado,
html .mobile-dn .dn-badge-default  { background: color-mix(in srgb, var(--sk-2) 12%, #fff) !important; color: var(--sk-1) !important; }
html .mobile-dn .dn-badge-circular { background: #eef0f7 !important; color: #6b7290 !important; }
html .mobile-dn .dn-badge-nueva    { background: rgba(255,67,81,.12) !important; color: #d3384a !important; }
html .mobile-dn .dn-badge-leida    { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }

/* asunto serif (mockup línea 23) + cuerpo */
html .mobile-dn .dn-asunto {
    font-family: var(--sk-serif) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
    line-height: 1.1 !important;
    margin: 0 0 6px !important;
}
html .mobile-dn .dn-cuerpo {
    font-size: .84rem !important;
    color: #4a5170 !important;
    line-height: 1.7 !important;
}
html .mobile-dn .dn-leida-en { font-size: .66rem !important; color: var(--sk-muted) !important; margin-top: 10px; }
html .mobile-dn .dn-leida-en i { display: none !important; }

/* filas de información (mockup: .irow) */
html .mobile-dn .dn-info-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--sk-line) !important;
    font-size: .78rem !important;
}
html .mobile-dn .dn-info-row:last-child { border-bottom: none !important; }

/* botones de acción (PDF, unirse, calendario) → .btn.pri del mockup */
html .mobile-dn .dn-pdf-btn {
    width: 100%;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px;
    text-decoration: none !important;
}
html .mobile-dn .dn-pdf-btn i { font-size: 17px; }

/* QR de la notificación */
html .mobile-dn .dn-qr-title {
    font-size: .62rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
html .mobile-dn .dn-qr-hint { font-size: .66rem !important; color: var(--sk-muted) !important; }

/* ═══ 19 · MI PERFIL  (mockup: 11_marina_perfil) ════════════════════════
   Banner estándar con guardar (✓) arriba-der, avatar 104px con anillo
   violeta, irows de datos, botones .gh blancos y Guardar inferior. */

html .mobile-perfil { background: #f5f6fb; }

html .mobile-perfil .mp-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-perfil .mp-banner-avatar { display: none !important; } /* el hero del mockup no lleva avatar */
html .mobile-perfil .mp-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-perfil .mp-banner-name { color: #fff !important; }
html .mobile-perfil .mp-banner-unit {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}
html .mobile-perfil .mp-banner-save {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px; right: 16px;
    z-index: 3;
    align-self: auto !important;
}
html .mobile-perfil .mp-banner-save:disabled { opacity: .6; }

/* cards (mockup: .fcard) + títulos en versalitas */
html .mobile-perfil .mp-card {
    margin: 12px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-perfil .mp-card-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-perfil .mp-ch-left {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
html .mobile-perfil .mp-ch-left i { display: none !important; }
/* botón tour: circulito blanco discreto */
html .mobile-perfil .mp-tour-btn {
    width: 30px; height: 30px;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-2) !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0 !important;
}

/* avatar 104px con anillo violeta (mockup línea 29) */
html .mobile-perfil .mp-foto-display { text-align: center; }
html .mobile-perfil .mp-foto-display img,
html .mobile-perfil .mp-foto-placeholder {
    width: 104px !important; height: 104px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sk-2) 10%, #fff) !important;
    border: 3px solid var(--sk-2) !important;
    font-family: var(--sk-serif) !important;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    object-fit: cover;
}

/* datos personales (mockup: .irow) */
html .mobile-perfil .mp-dl { margin: 0 !important; }
html .mobile-perfil .mp-dl-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--sk-line) !important;
    font-size: .78rem !important;
}
html .mobile-perfil .mp-dl-row:last-child { border-bottom: none !important; }
html .mobile-perfil .mp-dl-row dt { color: var(--sk-muted) !important; font-weight: 600 !important; }
html .mobile-perfil .mp-dl-row dd { color: #151b34 !important; font-weight: 700 !important; text-align: right; margin: 0; }

/* botones secundarios (mockup: .btn.gh — blanco con borde, texto navy) */
html .mobile-perfil .mp-btn-cambio,
html .mobile-perfil .input-group .btn {
    width: 100%;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    padding: 13px !important;
    color: var(--sk-1) !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    margin-top: 12px;
}
html .mobile-perfil .mp-btn-cambio i { display: none !important; }

/* nota del email (mockup: .note) */
html .mobile-perfil .mp-info-alert {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.5 !important;
    display: block !important;
}
html .mobile-perfil .mp-info-alert i { display: none !important; }
html .mobile-perfil .mp-pending-alert { font-size: .72rem !important; }

/* email: input arriba + botón validar debajo (mockup líneas 46-47) */
html .mobile-perfil .input-group {
    display: flex !important;
    flex-direction: column;
}
html .mobile-perfil .input-group .form-control { width: 100%; }

/* inputs (mockup: .inp) */
html .mobile-perfil .mp-form-group label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-perfil .mp-form-group { margin-bottom: 13px !important; }
html .mobile-perfil .mp-form-group:last-child { margin-bottom: 0 !important; }
html .mobile-perfil .form-control {
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    height: auto !important;
}
html .mobile-perfil .form-control:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-perfil .form-control::placeholder { color: #a7adc6 !important; }

/* Guardar inferior (mockup: .btn.pri) */
html .mobile-perfil .mp-btnrow { padding: 14px 15px 0; }
html .mobile-perfil .mp-btn-guardar {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 13px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%);
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
}
html .mobile-perfil .mp-btn-guardar:disabled { opacity: .6; }

/* ═══ 20 · MIS VEHÍCULOS  (mockup: 12_marina_vehiculos) ═════════════════
   Igual patrón que Personas (03): banner con +, chips, búsqueda y rows
   .lrow — aquí las filas SÍ llevan thumb (carro violeta 46px). */

html .mobile-vh { background: #f5f6fb; }

html .mobile-vh .vh-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-vh .vh-banner-avatar { display: none !important; }
html .mobile-vh .vh-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-vh .vh-banner-name { color: #fff !important; }
html .mobile-vh .vh-banner-unit {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}
html .mobile-vh .vh-banner-add {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px; right: 16px;
    z-index: 3;
}

/* KPI chips */
html .mobile-vh .vh-stats {
    display: flex !important;
    gap: 8px !important;
    padding: 13px 15px 2px !important;
    margin: 0 !important;
}
html .mobile-vh .vh-stat {
    flex: 1;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    padding: 10px 6px !important;
    text-align: center !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-vh .vh-stat i { display: none !important; }
html .mobile-vh .vh-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-vh .vh-lbl {
    font-size: .54rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}
html .mobile-vh .vh-stat.active {
    background: linear-gradient(180deg, #ffffff, #f0eaff) !important;
    border-color: #e0d5ff !important;
}
html .mobile-vh .vh-stat.active .vh-num { color: var(--sk-1) !important; }
html .mobile-vh .vh-stat.active .vh-lbl { color: var(--sk-1) !important; opacity: .7; }

/* búsqueda */
html .mobile-vh .vh-search {
    margin: 12px 15px 0 !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 13px !important;
    padding: 10px 13px !important;
    display: flex; align-items: center; gap: 9px;
    color: var(--sk-muted) !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
html .mobile-vh .vh-search i { font-size: 16px; color: var(--sk-muted); }
html .mobile-vh .vh-search input {
    border: none !important; outline: none !important;
    background: transparent !important;
    flex: 1; font-size: .76rem !important;
    color: #151b34;
}
html .mobile-vh .vh-search input::placeholder { color: var(--sk-muted); }

/* rows (mockup: .lrow con .thumb) */
html .mobile-vh .vh-list { margin: 8px 15px 0 !important; padding: 0 !important; }
html .mobile-vh .vh-item {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px !important;
    box-shadow: 0 6px 16px rgba(20,26,52,.04) !important;
}
/* thumb carro violeta (mockup: .thumb — 46px radio 13, tinte violeta) */
html .mobile-vh .vh-item-icon {
    width: 46px !important; height: 46px !important;
    border-radius: 13px !important;
    flex: none;
    display: flex !important; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sk-2) 11%, #fff) !important;
    color: var(--sk-2) !important;
    border: none !important;
}
html .mobile-vh .vh-item-icon i { font-size: 23px !important; }
html .mobile-vh .vh-item-main { flex: 1; min-width: 0; }
html .mobile-vh .vh-item-title {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #151b34 !important;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
html .mobile-vh .vh-item-meta {
    font-size: .66rem !important;
    color: var(--sk-muted) !important;
    margin-top: 2px !important;
}
html .mobile-vh .vh-badge {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    white-space: nowrap;
    letter-spacing: .02em;
    border: none !important;
}
html .mobile-vh .vh-badge-activo   { background: rgba(46,202,106,.14) !important; color: #159a4e !important; }
html .mobile-vh .vh-badge-inactivo { background: #eef0f7 !important; color: #6b7290 !important; }
/* contador de accesos (mockup: .cnt) */
html .mobile-vh .vh-item-accesos {
    text-align: center !important; flex: none;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
html .mobile-vh .vh-acc-num {
    font-family: var(--sk-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--sk-1) !important;
    line-height: 1 !important;
}
html .mobile-vh .vh-acc-lbl {
    font-size: .5rem !important;
    letter-spacing: .08em !important;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}

/* ═══ 21 · EDITAR VEHÍCULO  (mockup: 18_marina_vehiculo-editar) ═════════
   Banner estándar de detalle (back/guardar circulares en esquinas), fcards
   con .field/.inp, switch texto-izq/switch-der y Guardar inferior. */

html .mobile-ev { background: #f5f6fb; }

html .mobile-ev .ev-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-ev .ev-banner-back,
html .mobile-ev .ev-banner-save {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px;
    z-index: 3;
    align-self: auto !important;
}
html .mobile-ev .ev-banner-back { left: 16px; }
html .mobile-ev .ev-banner-save { right: 16px; }
html .mobile-ev .ev-banner-save:disabled { opacity: .6; }
html .mobile-ev .ev-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-ev .ev-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-ev .ev-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-ev .ev-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}
html .mobile-ev .ev-banner-sub {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* fcards + títulos en versalitas */
html .mobile-ev .ev-card {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    margin: 12px 15px 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-ev .ev-card-title {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-ev .ev-card-title i { display: none !important; }
html .mobile-ev .ev-accesos-count {
    color: var(--sk-1) !important;
    font-weight: 800 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* campos (mockup: .field/.inp/.two) */
html .mobile-ev .ev-form-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
html .mobile-ev .ev-form-row { margin-bottom: 13px !important; }
html .mobile-ev .ev-form-cols-2 .ev-form-row { margin-bottom: 0 !important; }
html .mobile-ev .ev-form-row label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-ev .ev-form-row .req { color: #ff4351 !important; }
html .mobile-ev .ev-form-row input,
html .mobile-ev .ev-form-row select,
html .mobile-ev .ev-card .form-select {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-ev .ev-form-row input:focus,
html .mobile-ev .ev-form-row select:focus,
html .mobile-ev .ev-card .form-select:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-ev .ev-form-row input:disabled,
html .mobile-ev .ev-form-row select:disabled,
html .mobile-ev .ev-card .form-select:disabled { color: var(--sk-muted) !important; opacity: 1; }
html .mobile-ev .ev-form-row input::placeholder { color: #a7adc6; }

/* switch (mockup: .swrow — texto izq, switch der) */
html .mobile-ev .ev-form-switch {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 12px;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-ev .ev-form-switch label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
    margin: 0 !important;
}
html .mobile-ev .ev-form-switch .form-check-input {
    width: 44px !important; height: 26px !important;
    background-color: #dfe1ec;
    border: none !important;
}
html .mobile-ev .ev-form-switch .form-check-input:checked {
    background-color: var(--sk-2) !important;
}
html .mobile-ev .form-text { font-size: .66rem !important; color: var(--sk-muted) !important; line-height: 1.5; }
html .mobile-ev .form-text i { display: none !important; }

/* accesos registrados (mockup: .irow — fecha izq, badge der) */
html .mobile-ev .ev-acceso-item {
    display: flex !important;
    align-items: center;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--sk-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html .mobile-ev .ev-acceso-item:last-child { border-bottom: none !important; }
html .mobile-ev .ev-acceso-icon { display: none !important; }
html .mobile-ev .ev-acceso-main { flex: 1; min-width: 0; }
html .mobile-ev .ev-acceso-top {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
html .mobile-ev .ev-acceso-fecha {
    font-size: .78rem !important;
    color: var(--sk-muted) !important;
    font-weight: 600 !important;
}
html .mobile-ev .ev-badge-mov {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 4px 9px !important;
    border-radius: 99px !important;
    letter-spacing: .02em;
    border: none !important;
    background: color-mix(in srgb, var(--sk-2) 12%, #fff) !important;
    color: var(--sk-1) !important;
}
html .mobile-ev .ev-acceso-meta { font-size: .66rem !important; color: var(--sk-muted) !important; margin-top: 2px; }

/* Guardar inferior (mockup: .btn.pri) */
html .mobile-ev .ev-btnrow { padding: 14px 15px 0; }
html .mobile-ev .ev-btn-guardar {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 13px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%);
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
}
html .mobile-ev .ev-btn-guardar:disabled { opacity: .6; }

/* ═══ 22 · NUEVO VEHÍCULO  (mockup: 13_marina_vehiculo-nuevo) ═══════════
   Gemela de la sección 21 (editar vehículo) con prefijo nv-. */

html .mobile-nv { background: #f5f6fb; }

html .mobile-nv .nv-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-nv .nv-banner-back,
html .mobile-nv .nv-banner-save {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px;
    z-index: 3;
    align-self: auto !important;
}
html .mobile-nv .nv-banner-back { left: 16px; }
html .mobile-nv .nv-banner-save { right: 16px; }
html .mobile-nv .nv-banner-save:disabled { opacity: .6; }
html .mobile-nv .nv-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-nv .nv-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-nv .nv-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-nv .nv-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}

html .mobile-nv .nv-card {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    margin: 12px 15px 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-nv .nv-card-title {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-nv .nv-card-title i { display: none !important; }

html .mobile-nv .nv-form-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
html .mobile-nv .nv-form-row { margin-bottom: 13px !important; }
html .mobile-nv .nv-form-cols-2 .nv-form-row { margin-bottom: 0 !important; }
html .mobile-nv .nv-form-row label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-nv .nv-form-row .req { color: #ff4351 !important; }
html .mobile-nv .nv-form-row input,
html .mobile-nv .nv-form-row select,
html .mobile-nv .nv-card .form-select {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-nv .nv-form-row input:focus,
html .mobile-nv .nv-form-row select:focus,
html .mobile-nv .nv-card .form-select:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-nv .nv-form-row select:disabled { color: var(--sk-muted) !important; opacity: 1; }
html .mobile-nv .nv-form-row input::placeholder { color: #a7adc6; }

html .mobile-nv .nv-form-switch {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 12px;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-nv .nv-form-switch label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
    margin: 0 !important;
}
html .mobile-nv .nv-form-switch .form-check-input {
    width: 44px !important; height: 26px !important;
    background-color: #dfe1ec;
    border: none !important;
}
html .mobile-nv .nv-form-switch .form-check-input:checked {
    background-color: var(--sk-2) !important;
}
html .mobile-nv .form-text { font-size: .66rem !important; color: var(--sk-muted) !important; line-height: 1.5; }

html .mobile-nv .nv-btnrow { padding: 14px 15px 0; }
html .mobile-nv .nv-btn-guardar {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 13px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%);
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
}
html .mobile-nv .nv-btn-guardar:disabled { opacity: .6; }

/* ═══ 23 · NUEVA PERSONA  (mockup: 04_marina_persona-nueva) ═════════════
   Gemela de la sección 10 (editar persona) con prefijo np-. */

html .mobile-np { background: #f5f6fb; }

html .mobile-np .np-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
}
html .mobile-np .np-banner-back,
html .mobile-np .np-banner-save {
    width: 37px !important; height: 37px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-1) !important;
    box-shadow: 0 4px 12px rgba(20,26,52,.05) !important;
    display: flex; align-items: center; justify-content: center;
    position: absolute !important;
    top: 16px;
    z-index: 3;
    align-self: auto !important;
}
html .mobile-np .np-banner-back { left: 16px; }
html .mobile-np .np-banner-save { right: 16px; }
html .mobile-np .np-banner-save:disabled { opacity: .6; }
html .mobile-np .np-banner-info {
    flex: 1; min-width: 0;
    text-align: left !important;
    position: relative; z-index: 2;
}
html .mobile-np .np-banner-info::before {
    content: "";
    display: block;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c8a24a, transparent);
    margin-bottom: 10px;
}
html .mobile-np .np-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
html .mobile-np .np-banner-title {
    font-family: var(--sk-serif) !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #fff !important;
    margin-top: 3px;
}

html .mobile-np .np-card {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    margin: 12px 15px 0 !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-np .np-card-title {
    font-size: .64rem !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-np .np-card-title i { display: none !important; }

html .mobile-np .np-form-row { margin-bottom: 13px !important; }
html .mobile-np .np-form-row:last-child { margin-bottom: 0 !important; }
html .mobile-np .np-form-row label {
    display: block;
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #4a5170 !important;
    margin-bottom: 5px !important;
}
html .mobile-np .np-form-row .req { color: #ff4351 !important; }
html .mobile-np .np-form-row input,
html .mobile-np .np-form-row select {
    width: 100%;
    background: #f7f8fc !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 11px !important;
    padding: 11px 12px !important;
    font-size: .82rem !important;
    color: #151b34 !important;
    font-family: inherit;
}
html .mobile-np .np-form-row input:focus,
html .mobile-np .np-form-row select:focus {
    border-color: var(--sk-2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
    background: #fff !important;
    outline: none !important;
}
html .mobile-np .np-form-row input::placeholder { color: #a7adc6; }

html .mobile-np .np-form-switch {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 12px;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-np .np-form-switch label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #151b34 !important;
    margin: 0 !important;
}
html .mobile-np .np-form-switch .form-check-input {
    width: 44px !important; height: 26px !important;
    background-color: #dfe1ec;
    border: none !important;
}
html .mobile-np .np-form-switch .form-check-input:checked {
    background-color: var(--sk-2) !important;
}

html .mobile-np .np-form-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 13px !important;
}
html .mobile-np .np-form-dates .np-form-row { margin-bottom: 0 !important; }

html .mobile-np .np-btnrow { padding: 16px 15px 0; }
html .mobile-np .np-btn-guardar {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 13px;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%);
    box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
}
html .mobile-np .np-btn-guardar:disabled { opacity: .6; }

/* ═══ 24 · SUGERENCIAS  (mockup: 14_marina_sugerencias) ═════════════════
   Página compartida móvil/desktop — el skin solo interviene ≤991px:
   banner degradado, nota gris, fcards con qblocks/estrellas, txta y
   botones pri/gh. Desktop conserva sus cards Bootstrap. */
@media (max-width: 991.98px) {

    html .sg-page { padding: 0 !important; max-width: none !important; }

    /* banner degradado estándar */
    html .sg-page .sg-banner {
        margin: 15px 15px 0;
        border-radius: 24px;
        padding: 17px 18px 18px;
        min-height: 176px;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--sk-grad-a), var(--sk-grad-b));
        box-shadow: 0 18px 36px -20px rgba(65, 84, 241, .55);
        color: #fff;
    }
    html .sg-page .sg-banner::after {
        content: "";
        position: absolute;
        top: -40px; right: -30px;
        width: 170px; height: 170px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
        pointer-events: none;
    }
    html .sg-page .sg-banner-info { position: relative; z-index: 2; }
    html .sg-page .sg-banner-info::before {
        content: "";
        display: block;
        width: 36px; height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #c8a24a, transparent);
        margin-bottom: 10px;
    }
    html .sg-page .sg-banner-page-label {
        font-size: .62rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        opacity: .85;
        font-weight: 700;
    }
    html .sg-page .sg-banner-title {
        font-family: var(--sk-serif);
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.06;
        margin-top: 3px;
    }
    html .sg-page .sg-banner-sub {
        font-size: .74rem;
        color: rgba(255,255,255,.92);
        margin-top: 6px;
        line-height: 1.5;
    }

    /* avisos → nota gris del mockup (línea 21) */
    html .sg-page .alert {
        background: transparent !important;
        border: none !important;
        color: var(--sk-muted) !important;
        font-size: .66rem !important;
        line-height: 1.5;
        padding: 12px 22px 0 !important;
        margin: 0 !important;
    }
    html .sg-page .alert i { display: none !important; }
    html .sg-page .alert strong { color: #151b34; }

    /* cards → fcard */
    html .sg-page .card {
        margin: 12px 15px 0 !important;
        background: #fff !important;
        border: 1px solid var(--sk-line) !important;
        border-radius: 18px !important;
        padding: 15px !important;
        box-shadow: var(--sk-card-shadow) !important;
    }
    html .sg-page .card-header {
        background: transparent !important;
        border: none !important;
        padding: 0 0 12px !important;
        font-size: .64rem !important;
        letter-spacing: .16em !important;
        text-transform: uppercase;
        color: var(--sk-muted) !important;
        font-weight: 700 !important;
    }
    html .sg-page .card-header i { display: none !important; }
    html .sg-page .card-body { padding: 0 !important; }

    /* preguntas (mockup: .qblock/.qtext/.qhelp) — sin numeritos */
    html .sg-page .sug-q { padding: 12px 0 !important; border-bottom: 1px solid var(--sk-line) !important; }
    html .sg-page .sug-q:last-child { border-bottom: none !important; }
    html .sg-page .sug-q-num { display: none !important; }
    html .sg-page .sug-q-txt { font-size: .86rem !important; font-weight: 700 !important; color: #151b34 !important; }
    html .sg-page .sug-q-help { font-size: .66rem !important; color: var(--sk-muted) !important; margin: 3px 0 0 0 !important; line-height: 1.45; }
    /* estrellas (mockup: .stars — 1.35rem, ámbar #e8a91e) */
    html .sg-page .sug-stars { margin: 8px 0 0 0 !important; gap: 6px !important; }
    html .sg-page .sug-star { font-size: 1.35rem !important; color: #dfe1ec !important; }
    html .sg-page .sug-star.on { color: #e8a91e !important; }
    html .sg-page .sug-star-lbl { margin-left: 6px !important; font-size: .66rem !important; font-weight: 700 !important; color: var(--sk-muted) !important; min-width: 0 !important; }

    /* textarea (mockup: .txta) */
    html .sg-page textarea.form-control {
        background: #f7f8fc !important;
        border: 1px solid var(--sk-line) !important;
        border-radius: 11px !important;
        padding: 11px 12px !important;
        font-size: .78rem !important;
        color: #151b34 !important;
        line-height: 1.5 !important;
    }
    html .sg-page textarea.form-control:focus {
        border-color: var(--sk-2) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
        background: #fff !important;
        outline: none !important;
    }
    html .sg-page textarea.form-control::placeholder { color: #a7adc6 !important; }

    /* botones (mockup: .btn.pri + .btn.gh, en columna a lo ancho) */
    html .sg-page .card-body .d-flex.mt-3 { flex-direction: column; }
    html .sg-page .btn-primary {
        width: 100%;
        border: none !important;
        border-radius: 14px !important;
        padding: 13px !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
        box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
    }
    html .sg-page .btn-primary i { display: none !important; }
    html .sg-page .btn-outline-secondary {
        width: 100%;
        background: #fff !important;
        border: 1px solid var(--sk-line) !important;
        border-radius: 14px !important;
        padding: 13px !important;
        color: var(--sk-1) !important;
        font-weight: 700 !important;
        font-size: .88rem !important;
    }
}

/* ═══ 25 · CENTRO DE AYUDA  (mockup: 23_marina_ayuda) ═══════════════════
   Banner CON avatar translúcido (este mockup sí lo trae), búsqueda tipo
   .search, secciones en versalitas y acordeón Bootstrap → .faq cards. */

html .mobile-ay { background: #f5f6fb; padding-bottom: 30px; }

html .mobile-ay .ay-banner {
    min-height: 176px;
    display: flex !important;
    align-items: center;
    gap: 13px;
}
/* sin avatar en el banner (pedido del usuario 2026-09-03 — oculto, NO eliminado) */
html .mobile-ay .ay-banner-avatar { display: none !important; }
html .mobile-ay .ay-banner-page-label {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: #fff !important;
    opacity: .85;
    font-weight: 700 !important;
}
/* el mockup 23 usa el nombre más compacto (1.4rem) */
html .mobile-ay .ay-banner-name { font-size: 1.4rem !important; color: #fff !important; }
html .mobile-ay .ay-banner-unit {
    font-size: .74rem !important;
    color: rgba(255,255,255,.92) !important;
    margin-top: 2px;
}

/* contenedor interior de AyudaContent sin padding bootstrap */
html .mobile-ay .container-fluid { padding: 0 !important; margin-top: 0 !important; }

/* búsqueda (mockup: .search) — la card padre ya aporta los 15px laterales,
   sin margen propio o queda más angosta que las demás cards */
html .mobile-ay .input-group {
    margin: 12px 0 0 !important;
    width: 100% !important;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 13px;
    box-shadow: 0 6px 16px rgba(20,26,52,.04);
    padding: 2px 6px;
    align-items: center;
}
html .mobile-ay .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--sk-muted) !important;
}
html .mobile-ay .input-group .form-control {
    background: transparent !important;
    border: none !important;
    font-size: .76rem !important;
    color: #151b34 !important;
    box-shadow: none !important;
}
html .mobile-ay .input-group .form-control::placeholder { color: var(--sk-muted) !important; }
html .mobile-ay .input-group .btn { border: none !important; color: var(--sk-muted) !important; background: transparent !important; }

/* cada card de categoría → sección transparente con header en versalitas */
html .mobile-ay .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 15px !important;
    border-radius: 0 !important;
}
html .mobile-ay .card-header {
    background: transparent !important;
    border: none !important;
    padding: 15px 7px 6px !important;
    font-size: .64rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    font-weight: 700 !important;
}
html .mobile-ay .card-header i { display: none !important; }
/* contador de la categoría (mockup: .cc) */
html .mobile-ay .card-header .badge {
    background: transparent !important;
    color: var(--sk-muted) !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
}
html .mobile-ay .card-body { padding: 0 !important; }

/* acordeón → .faq cards del mockup */
html .mobile-ay .accordion-item {
    background: #fff !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px !important;
    margin-bottom: 8px;
    box-shadow: 0 6px 16px rgba(20,26,52,.04);
    overflow: hidden;
}
html .mobile-ay .accordion-button {
    background: #fff !important;
    color: #151b34 !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}
html .mobile-ay .accordion-button:not(.collapsed) {
    background: #fff !important;
    color: #151b34 !important;
}
html .mobile-ay .accordion-button:focus { box-shadow: none !important; border: none !important; }
html .mobile-ay .accordion-body {
    font-size: .72rem !important;
    color: var(--sk-muted) !important;
    line-height: 1.55 !important;
    border-top: 1px solid var(--sk-line);
    padding: 9px 14px 12px !important;
    background: #fff;
}

/* ═══ 26 · ESTADOS VACÍOS  (mockup: 27_marina_estados-vacios) ═══════════
   Ícono en círculo de 72px con tinte violeta + texto gris.
   Clases reales verificadas: pa/vh/nf/av-empty y ra-list-empty. */
html .mobile-pa .pa-empty,
html .mobile-vh .vh-empty,
html .mobile-notif .nf-empty,
html .mobile-av .av-empty,
html .mobile-resamenidad .ra-list-empty {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    padding: 40px 26px !important;
    gap: 12px;
    color: #7b81a0 !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
}
html .mobile-pa .pa-empty i,
html .mobile-vh .vh-empty i,
html .mobile-notif .nf-empty i,
html .mobile-av .av-empty i,
html .mobile-resamenidad .ra-list-empty i {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex !important;
    align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sk-2) 8%, #fff);
    color: color-mix(in srgb, var(--sk-2) 55%, #fff) !important;
    font-size: 32px !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* ═══ 27 · RESULTADOS DE ACCESO  (mockup: 26_marina_acceso-resultados) ══
   Estados de la card "Entrar" del inicio: éxito (verde), fuera de rango
   (ámbar) y GPS apagado (blanca atenuada). Los inline styles de la página
   se anulan con !important. */
/* ✓ portón activado */
html .mobile-home .mh-action.vehicle.exito {
    background: linear-gradient(150deg, #2eca6a, #159a4e) !important;
    box-shadow: 0 14px 26px -16px rgba(46, 202, 106, .75) !important;
}
html .mobile-home .mh-action.vehicle.exito .mh-sub {
    color: rgba(255,255,255,.9) !important;
    font-weight: 700 !important;
}
/* fuera de rango / reintento */
html .mobile-home .mh-action.vehicle.fuera {
    background: linear-gradient(150deg, #ffd257, #e0a500) !important;
    color: #5c4300 !important;
    box-shadow: 0 14px 26px -16px rgba(224, 165, 0, .7) !important;
}
html .mobile-home .mh-action.vehicle.fuera .mh-ico-wrap { background: rgba(255,255,255,.35) !important; color: #5c4300 !important; }
html .mobile-home .mh-action.vehicle.fuera .mh-ttl { color: #5c4300 !important; }
html .mobile-home .mh-action.vehicle.fuera .mh-sub,
html .mobile-home .mh-action.vehicle.fuera .mh-lbl { color: #6b4f00 !important; font-size: .62rem !important; }
/* GPS apagado / bloqueada → card apagada (mockup: .act.off) */
html .mobile-home .mh-action.vehicle.disabled {
    background: #fff !important;
    border-color: var(--sk-line) !important;
    color: #8a90a8 !important;
    box-shadow: var(--sk-card-shadow) !important;
}
html .mobile-home .mh-action.vehicle.disabled .mh-ico-wrap { background: #f1f2f8 !important; color: #a7adc6 !important; }
html .mobile-home .mh-action.vehicle.disabled .mh-ttl { color: #8a90a8 !important; }
html .mobile-home .mh-action.vehicle.disabled .mh-sub,
html .mobile-home .mh-action.vehicle.disabled .mh-lbl { color: #a7adc6 !important; }
html .mobile-home .mh-action.vehicle.disabled .mh-btn-mini { background: #f1f2f8 !important; color: #a7adc6 !important; }

/* ═══ 8 · LOGIN MÓVIL  (mockup: 01_marina_login) ════════════════════════
   Solo aplica en Login.cshtml (body.login-page) y ≤767px — el breakpoint
   móvil propio de esa página. Desktop y el carrusel del SuperAdmin quedan
   intactos (ocultos aquí, NO eliminados). Valores copiados de skinkit.css
   (.field / .inp / .btn.pri) y del propio mockup. */
@media (max-width: 767px) {

    /* fondo phone plano (mockup: --bg) — sin foto ni overlay */
    html body.login-page .login-bg { background: #f5f6fb !important; }
    html body.login-page .login-bg .carousel,
    html body.login-page .login-bg::after { display: none !important; }

    /* el mockup no tiene navbar */
    html body.login-page .login-navbar { display: none !important; }

    /* contenedor = phone interior (mockup línea 15) */
    html body.login-page .login-content {
        padding: 24px 26px 18px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        min-height: 100dvh;
    }
    /* la card deja de ser card: pantalla plana a lo alto */
    html body.login-page .login-card {
        background: transparent !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: none !important;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* marca centrada (mockup líneas 16-19; agrandada a pedido del usuario) */
    html body.login-page .login-brand-m {
        display: block;
        text-align: center;
        margin-top: 18px;
    }
    html body.login-page .login-brand-m svg { width: 92px; height: 92px; }
    html body.login-page .login-brand-m-name {
        font-family: var(--sk-serif);
        font-weight: 700;
        font-size: 1.55rem;
        color: var(--sk-1);
        margin-top: 6px;
    }
    html body.login-page .login-brand-m-name span { color: var(--sk-grad-a); }

    /* título + subtítulo (mockup líneas 21-24) */
    html body.login-page .login-card h1 {
        font-family: var(--sk-serif) !important;
        font-size: 2rem !important;
        font-weight: 700 !important;
        color: #151b34 !important;
        line-height: 1 !important;
        margin: 32px 0 0 !important;
    }
    html body.login-page .login-subtitle {
        font-size: .82rem !important;
        color: var(--sk-muted) !important;
        margin: 6px 0 22px !important;
    }

    /* campos (mockup: .field / .inp) */
    html body.login-page .mb-3 { margin-bottom: 13px !important; }
    html body.login-page .form-label {
        font-size: .68rem !important;
        font-weight: 700 !important;
        color: #4a5170 !important;
        margin-bottom: 5px !important;
    }
    html body.login-page .form-control {
        height: auto !important;
        background: #f7f8fc !important;
        border: 1px solid var(--sk-line) !important;
        border-radius: 11px !important;
        padding: 11px 12px !important;
        font-size: .82rem !important;
        color: #151b34 !important;
    }
    html body.login-page .form-control::placeholder { color: #a7adc6 !important; font-size: .82rem !important; }
    html body.login-page .form-control:focus {
        border-color: var(--sk-2) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-2) 16%, transparent) !important;
        background: #fff !important;
    }
    html body.login-page .pwd-toggle { color: #a7adc6 !important; }

    /* fila Recordarme / Olvidé (mockup líneas 29-32) */
    html body.login-page .login-options { margin: 4px 0 18px !important; }
    html body.login-page .form-check-input {
        width: 17px; height: 17px;
        border: 1.6px solid #cfd3e4;
        border-radius: 5px;
        accent-color: var(--sk-2);
    }
    html body.login-page .form-check-input:checked {
        background-color: var(--sk-2);
        border-color: var(--sk-2);
    }
    html body.login-page .form-check-label {
        font-size: .74rem !important;
        color: #4a5170 !important;
        font-weight: 600 !important;
    }
    html body.login-page .login-forgot {
        font-size: .74rem !important;
        color: var(--sk-2) !important;
        font-weight: 700 !important;
    }

    /* botón (mockup: .btn.pri en sk-marina, skinkit.css línea 42) */
    html body.login-page .btn-login {
        height: auto !important;
        background: linear-gradient(145deg, var(--sk-grad-a) 0%, #6b48ec 50%, var(--sk-grad-b) 100%) !important;
        border-radius: 14px !important;
        padding: 13px !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
        box-shadow: 0 14px 26px -16px rgba(110, 70, 230, .75);
    }

    /* © pegado abajo (mockup línea 36) */
    html body.login-page .login-footer-card {
        margin-top: auto !important;
        padding-top: 22px;
        font-size: .66rem !important;
        color: #a7adc6 !important;
    }
}