/* ==========================================================================
   Aura como app (docs/pwa-plan.md, P0.3): estados sin conexión. Lo cargan index.html y app-home.html; los elementos
   solo los crea app/js/app-pwa.js en teléfonos, así que en ordenador no se ve nada.
   ========================================================================== */
:root {
    --pwa-tinta: #172b28;
    --pwa-suave: #5f6c68;
    --pwa-linea: #e3e9ec;
    --pwa-fondo: #f4f3ef;
    --pwa-marca: #3580bb;
    --pwa-marca-osc: #255b83;
    --pwa-ok: #1b6b4b;
}

/* Barra superior: «Sin conexión» y «Conexión recuperada» */
.aura-pwa-red {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    z-index: 1029;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px));
    color: #fff;
    background: #3a4448;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
    animation: aura-pwa-bajar 0.2s ease-out;
}
body.aura-movil .aura-pwa-red {
    top: calc(52px + env(safe-area-inset-top, 0px)); /* bajo la cabecera de la app */
}
.aura-pwa-red[hidden] { display: none; }
/* Con la barra visible, el contenido de la app baja su altura para no quedar tapado */
body.aura-movil.aura-sin-red .main-panel > .content {
    margin-top: 94px;
}
body.aura-movil.aura-sin-red .aura-mficha__tabs {
    top: calc(86px + env(safe-area-inset-top, 0px));
}
.aura-pwa-red i { opacity: 0.85; }
.aura-pwa-red span { opacity: 0.8; }
.aura-pwa-red b { font-weight: 650; }
.aura-pwa-red.is-recuperada { background: var(--pwa-ok); }
@keyframes aura-pwa-bajar {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* Estado de una pantalla que no ha podido cargarse */
.aura-pwa-sinred {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 24px auto;
    max-width: 340px;
    padding: 32px 22px;
    border: 1px solid var(--pwa-linea);
    border-radius: 20px;
    color: var(--pwa-tinta);
    background: #fff;
    text-align: center;
}
.aura-pwa-sinred__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: var(--pwa-marca-osc);
    background: #e8f2fa;
    font-size: 24px;
}
.aura-pwa-sinred h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.aura-pwa-sinred p {
    margin: 0;
    color: var(--pwa-suave);
    font-size: 14px;
    line-height: 1.5;
}
.aura-pwa-sinred__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--pwa-marca), var(--pwa-marca-osc));
    font-size: 15px;
    font-weight: 650;
}
.aura-pwa-sinred__boton:disabled { opacity: 0.7; }
.aura-pwa-sinred__boton:focus-visible { outline: 2px solid var(--pwa-marca-osc); outline-offset: 3px; }

/* Arranque sin red: ocupa toda la pantalla porque la app no ha podido cargar su menú */
.aura-pwa-arranque {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
    background: var(--pwa-fondo);
}
.aura-pwa-arranque .aura-pwa-sinred { margin: 0; box-shadow: 0 18px 40px -24px rgba(15, 41, 61, 0.45); }

/* ---------- Huella (P1.2): modal «Entra con tu huella» (modals/modalActivarHuella.php) ---------- */
.aura-huella-modal .modal-dialog {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}
.aura-huella-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 24px 60px -20px rgba(15, 41, 61, 0.5);
}
.aura-huella-modal__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 24px 8px;
    color: var(--pwa-tinta);
    text-align: center;
    background: radial-gradient(120% 60% at 50% 0%, #e8f2fa 0%, #fff 70%);
}
.aura-huella-modal__icono {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--pwa-marca), var(--pwa-marca-osc));
    box-shadow: 0 0 0 8px rgba(53, 128, 187, 0.12), 0 12px 24px -10px rgba(37, 91, 131, 0.7);
    font-size: 34px;
}
.aura-huella-modal__titulo {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.aura-huella-modal__texto {
    margin: 8px 0 0;
    color: var(--pwa-suave);
    font-size: 14.5px;
    line-height: 1.5;
}
.aura-huella-modal__puntos {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--pwa-fondo);
    list-style: none;
    text-align: left;
}
.aura-huella-modal__puntos li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.4;
}
.aura-huella-modal__puntos i {
    flex: 0 0 18px;
    margin-top: 2px;
    color: var(--pwa-marca-osc);
    text-align: center;
}
.aura-huella-modal__estado {
    width: 100%;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: #9a3a3a;
    background: #fbeeee;
    font-size: 13.5px;
    line-height: 1.4;
}
.aura-huella-modal__estado.is-ok {
    color: var(--pwa-ok);
    background: #e6f5ee;
}
.aura-huella-modal__pie {
    display: grid;
    gap: 6px;
    padding: 16px 24px 20px;
}
.aura-huella-modal__activar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 650;
}
.aura-huella-modal__activar:disabled { opacity: 0.7; }
.aura-huella-modal__ahora-no {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    color: var(--pwa-suave);
    background: transparent;
    font-size: 14.5px;
    font-weight: 600;
}
.aura-huella-modal__ahora-no:focus-visible,
.aura-huella-modal__activar:focus-visible {
    outline: 2px solid var(--pwa-marca-osc);
    outline-offset: 2px;
}

/* ---------- Huella (P1.3): pantalla de desbloqueo (app-huella.js) ---------- */
body.aura-desbloqueando { overflow: hidden; }
.aura-desbloqueo {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 18vh) 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
    color: #fff;
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(140, 196, 239, 0.35) 0%, rgba(140, 196, 239, 0) 70%),
        linear-gradient(170deg, #2f6fa6 0%, #1d4a72 55%, #163a5a 100%);
    text-align: center;
}
.aura-desbloqueo__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.aura-desbloqueo__avatar {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.aura-desbloqueo__titulo {
    margin: 18px 0 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.aura-desbloqueo__texto {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}
.aura-desbloqueo__huella {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-top: 44px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.07), 0 0 0 22px rgba(255, 255, 255, 0.04);
    font-size: 46px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.15s ease;
}
.aura-desbloqueo__huella:active { transform: scale(0.95); }
.aura-desbloqueo__huella:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.aura-desbloqueo__huella.is-leyendo { animation: aura-huella-latido 1.2s ease-in-out infinite; }
.aura-desbloqueo__huella.is-ok { background: #2e9b6a; animation: none; }
@keyframes aura-huella-latido {
    0%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.07), 0 0 0 22px rgba(255, 255, 255, 0.04); }
    50% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.12), 0 0 0 32px rgba(255, 255, 255, 0.05); }
}
.aura-desbloqueo__estado {
    max-width: 300px;
    margin: 26px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.22);
    font-size: 14px;
    line-height: 1.4;
}
.aura-desbloqueo__otra {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
}
.aura-desbloqueo__otra:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Huella (P1.4): opciones del menú de cuenta del móvil (topNav.php, app-huella.js) ---------- */
.aura-mtop__huella {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pwa-linea);
}
.aura-mtop__menu button.aura-mtop__opcion {
    color: var(--pwa-tinta);
    font-weight: 600;
}
.aura-mtop__menu button.aura-mtop__opcion i {
    width: 18px;
    color: var(--pwa-marca-osc);
    text-align: center;
}
.aura-mtop__menu button.aura-mtop__opcion:active,
.aura-mtop__menu button.aura-mtop__opcion:focus-visible {
    background: #eef5fb;
}

/* ---------- Huella (P1.4): lista de teléfonos (modalMisDispositivos.php y formUsuario.php) ---------- */
.aura-huella-modal__cuerpo--lista { padding-bottom: 4px; }
.aura-dispositivos {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.aura-dispositivos__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--pwa-linea);
    border-radius: 16px;
    background: #fff;
}
.aura-dispositivos__item.is-este {
    border-color: rgba(53, 128, 187, 0.45);
    background: #f4f9fd;
}
.aura-dispositivos__icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--pwa-marca-osc);
    background: #e8f2fa;
    font-size: 18px;
}
.aura-dispositivos__datos {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}
.aura-dispositivos__datos strong {
    color: var(--pwa-tinta);
    font-size: 14.5px;
    font-weight: 650;
    overflow-wrap: anywhere;
}
.aura-dispositivos__este {
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--pwa-marca);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
}
.aura-dispositivos__este[hidden] { display: none; }
.aura-dispositivos__datos small {
    flex-basis: 100%;
    color: var(--pwa-suave);
    font-size: 12.5px;
    line-height: 1.4;
}
.aura-dispositivos__quitar {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #f0d4d4;
    border-radius: 12px;
    color: #a54242;
    background: #fff;
    font-size: 13.5px;
    font-weight: 650;
}
.aura-dispositivos__quitar:active { background: #fff3f2; }
.aura-dispositivos__quitar:disabled { opacity: 0.6; }
.aura-dispositivos__quitar:focus-visible { outline: 2px solid #a54242; outline-offset: 2px; }
.aura-dispositivos__vacio {
    width: 100%;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--pwa-suave);
    background: var(--pwa-fondo);
    font-size: 14px;
    text-align: center;
}
.aura-dispositivos__vacio[hidden] { display: none; }
/* En el formulario de usuario (ordenador) la lista va dentro de su sección */
.aura-ui-section .aura-dispositivos { margin-top: 0; }
.aura-ui-section .aura-dispositivos__vacio { margin-top: 0; }

/* ---------- P2.3: invitación a instalar (app-pwa.js), en el hueco del aviso de versión ---------- */
.aura-pwa-instalar {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--mnav-alto, 62px) + var(--mnav-seguro, 0px) + 10px);
    z-index: 1032;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 8px 14px 14px;
    border: 1px solid var(--pwa-linea);
    border-radius: 20px;
    color: var(--pwa-tinta);
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(15, 41, 61, 0.45);
    animation: aura-pwa-subir 0.25s ease-out;
}
.aura-pwa-instalar__icono {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: 0 4px 10px -4px rgba(15, 41, 61, 0.4);
}
.aura-pwa-instalar__texto {
    flex: 1 1 auto;
    min-width: 0;
}
.aura-pwa-instalar__texto h2 {
    margin: 2px 0 0;
    color: var(--pwa-tinta);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.aura-pwa-instalar__texto p {
    margin: 4px 0 0;
    color: var(--pwa-suave);
    font-size: 13px;
    line-height: 1.4;
}
.aura-pwa-instalar__si {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 10px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--pwa-marca), var(--pwa-marca-osc));
    font-size: 14px;
    font-weight: 650;
}
.aura-pwa-instalar__si:disabled { opacity: 0.7; }
.aura-pwa-instalar__pasos {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--pwa-suave);
    font-size: 13px;
    line-height: 1.5;
}
.aura-pwa-instalar__pasos li + li { margin-top: 2px; }
.aura-pwa-instalar__pasos b { color: var(--pwa-tinta); font-weight: 650; }
.aura-pwa-instalar__tecla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 7px;
    color: var(--pwa-marca-osc);
    background: #e8f2fa;
    font-weight: 650;
    white-space: nowrap;
}
.aura-pwa-instalar__tecla svg {
    flex: 0 0 auto;
    display: block;
    width: 15px;
    height: 15px !important; /* paper-dashboard.css fuerza svg { height: 800px !important } */
}
.aura-pwa-instalar__no {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: var(--pwa-suave);
    background: transparent;
}
.aura-pwa-instalar__si:focus-visible,
.aura-pwa-instalar__no:focus-visible {
    outline: 2px solid var(--pwa-marca-osc);
    outline-offset: 2px;
}
@keyframes aura-pwa-subir {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* ---------- P3.3: desde el desbloqueo sin conexión (app-huella.js) ---------- */
.aura-desbloqueo__contactos {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 16px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 15px;
    font-weight: 650;
}
.aura-desbloqueo__contactos[hidden] { display: none; }
.aura-desbloqueo__contactos:active { background: rgba(255, 255, 255, 0.22); }
.aura-desbloqueo__contactos:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.aura-copia-capa {
    position: fixed;
    inset: 0;
    z-index: 2200;
    overflow-y: auto;
    padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: var(--pwa-fondo);
    -webkit-overflow-scrolling: touch;
}
.aura-copia-capa__barra {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 0 -16px 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 8px;
    background: linear-gradient(170deg, #2f6fa6 0%, #1d4a72 100%);
}
.aura-copia-capa__volver {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: transparent;
    font-size: 15px;
    font-weight: 650;
}
.aura-copia-capa__volver:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aura-copia-capa__aviso {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    color: #fff;
    background: var(--pwa-tinta);
    box-shadow: 0 12px 30px -10px rgba(15, 41, 61, 0.5);
    font-size: 13.5px;
    line-height: 1.4;
}
.aura-copia-capa__aviso[hidden] { display: none; }

/* ---------- P3.2: Contactos sin conexión (app-copia-contactos.js); las tarjetas usan .aura-mcard ---------- */
.aura-copia {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* los correos largos no ensanchan la columna */
    gap: 12px;
    padding-bottom: 8px;
}
.aura-copia__cabecera {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--pwa-linea);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 41, 61, 0.04), 0 6px 18px -12px rgba(15, 41, 61, 0.2);
}
.aura-copia__antetitulo {
    margin: 0;
    color: var(--pwa-suave);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.aura-copia__titulo {
    margin: 0;
    color: var(--pwa-tinta);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.aura-copia__aviso {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 7px;
    margin: 2px 0 4px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #7a4b00;
    background: #fff3dc;
    font-size: 12.5px;
    font-weight: 600;
}
.aura-copia__aviso i { font-size: 11px; opacity: 0.8; }
.aura-copia__buscar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #dbe4ea;
    border-radius: 14px;
    color: var(--pwa-suave);
    background: var(--pwa-fondo);
    font-weight: 400;
}
.aura-copia__buscar:focus-within {
    border-color: var(--pwa-marca);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(53, 128, 187, 0.15);
}
.aura-copia__buscar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--pwa-tinta);
    background: transparent;
    font-size: 15px;
}
.aura-copia__total {
    margin: 0 4px;
    color: var(--pwa-suave);
    font-size: 12.5px;
}
.aura-copia__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .aura-pwa-instalar { animation: none; }
    .aura-pwa-red { animation: none; }
    .aura-desbloqueo__huella.is-leyendo { animation: none; }
}