:root {
    --azul: #2563eb;
    --azul-claro: #eff6ff;
    --cian: #06b6d4;
    --gris-texto: #6b7280;
    --gris-fondo: #f9fafb;
    --superficie-2: #ffffff;
    --bg-app: #ffffff;
    --texto: #111827;
    --borde: #e5e7eb;
    --rojo: #ef4444;
    --amarillo: #f59e0b;
    --verde: #10b981;
    --radio: 16px;

    /* Tema premium: solo se usa en las pantallas de acceso (login, registro, consulta) */
    --premium-bg-deep: #07060b;
    --premium-gold: #cda86a;
    --premium-gold-light: #e8d7ab;
    --premium-gold-dim: rgba(205, 168, 106, .32);
    --premium-ivory: #f2ece0;
    --premium-ivory-dim: rgba(242, 236, 224, .62);
    --premium-border: rgba(205, 168, 106, .22);
    --premium-texto-oscuro: #1a1509;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overscroll-behavior-y: contain; touch-action: manipulation; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-app);
    color: var(--texto);
    overscroll-behavior-y: contain;
    touch-action: manipulation;
}

.app-container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-app);
    padding: 20px 16px 90px;
    position: relative;
}

/* Login */
.pantalla-centrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 15% 20%, rgba(129, 140, 248, .55), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(56, 189, 248, .45), transparent 50%),
        radial-gradient(circle at 20% 85%, rgba(99, 102, 241, .5), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(37, 99, 235, .55), transparent 45%),
        linear-gradient(160deg, #4338ca, #1d4ed8 55%, #1e40af);
}
.tarjeta-login {
    background: #fff;
    border-radius: 24px;
    padding: 36px 28px;
    max-width: 360px;
    width: 90%;
    text-align: center;
}
.titulo-bienvenida { font-size: 22px; margin-bottom: 8px; }
.subtitulo { color: var(--gris-texto); margin-bottom: 28px; }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid var(--borde); border-radius: 12px; padding: 14px;
    text-decoration: none; color: var(--texto); font-weight: 600;
}
.aviso-info {
    background: var(--azul-claro); color: var(--azul); font-size: 13px;
    padding: 10px; border-radius: 10px; margin-top: 16px;
}

/* Iconos SVG (reemplazan a los emojis) */
.svg-icono { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.icono-campana .svg-icono, .flecha-atras .svg-icono, .acciones-derecha .svg-icono { width: 20px; height: 20px; }
.nav-inferior .svg-icono { width: 21px; height: 21px; }
.nav-inferior .btn-central .svg-icono { width: 24px; height: 24px; }
.icono-acceso .svg-icono { width: 17px; height: 17px; }
.acciones-derecha { gap: 18px; color: var(--texto); }
.acciones-derecha a, .acciones-derecha span { color: var(--texto); display: flex; }
.pie-seguridad { margin-top: 24px; color: var(--gris-texto); font-size: 13px; }
.pie-seguridad a { color: var(--azul); font-weight: 600; text-decoration: none; }

/* Login v2 - fondo oscuro tipo aurora + tarjeta glass */
.pantalla-centrada {
    position: relative; padding: 20px;
    background: radial-gradient(ellipse at top, #1e1b4b 0%, #0b0a1f 60%, #050510 100%);
}
.fondo-decorado { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.blob {
    position: absolute; border-radius: 50%; filter: blur(70px);
    animation: flotar 12s ease-in-out infinite;
    mix-blend-mode: screen;
}
.blob-1 { width: 320px; height: 320px; top: -100px; left: -80px; background: #7c3aed; opacity: .55; }
.blob-2 { width: 360px; height: 360px; bottom: -120px; right: -90px; background: #06b6d4; opacity: .45; animation-delay: -4s; animation-duration: 14s; }
.blob-3 {
    width: 260px; height: 260px; top: 32%; right: -90px; background: #ec4899; opacity: .35;
    animation-delay: -7s; animation-duration: 10s;
}
.blob-4 {
    width: 220px; height: 220px; bottom: 8%; left: -70px; background: #f59e0b; opacity: .25;
    animation-delay: -2s; animation-duration: 13s;
}
@keyframes flotar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -26px) scale(1.08); }
}

.tarjeta-login-v2 {
    position: relative; z-index: 1;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, .55);
    animation: aparecer .4s ease-out;
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes alertaEntrada {
    0%   { opacity: 0; transform: translateY(-14px) scale(.96); }
    60%  { opacity: 1; transform: translateY(2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes alertaSalida {
    from { opacity: 1; transform: translateY(0) scale(1); max-height: 120px; margin-bottom: 14px; padding-top: 12px; padding-bottom: 12px; }
    to   { opacity: 0; transform: translateY(-8px) scale(.98); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
@keyframes alertaBarra {
    from { width: 100%; }
    to   { width: 0%; }
}
.tarjeta-login-v2 .titulo-bienvenida { color: #fff; }
.tarjeta-login-v2 .subtitulo { color: rgba(255, 255, 255, .65); }
.tarjeta-login-v2 .pie-seguridad { color: rgba(255, 255, 255, .55); }
.tarjeta-login-v2 .pie-seguridad a { color: #c4b5fd; }
.tarjeta-login-v2 .form-login label { color: rgba(255, 255, 255, .7); }

/* ===== Consulta premium v2 (estilo aprobado por Clau) ===== */
.pantalla-consulta-v2 {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px 16px;
    background: #050509;
    position: relative;
    overflow: hidden;
}
.pantalla-consulta-v2::before,
.pantalla-consulta-v2::after {
    content: '';
    position: fixed;
    width: 180%;
    height: 65%;
    background: linear-gradient(120deg, transparent, rgba(139, 92, 246, .38), transparent);
    transform: rotate(-18deg);
    top: -12%;
    left: -35%;
    pointer-events: none;
    z-index: 0;
}
.pantalla-consulta-v2::after {
    top: auto;
    bottom: -22%;
    left: -30%;
    background: linear-gradient(120deg, transparent, rgba(59, 130, 246, .32), transparent);
    transform: rotate(-14deg);
}

.tarjeta-consulta-v2 {
    position: relative;
    z-index: 1;
    width: 100%;
    transform-origin: top center;
    transition: transform .2s ease-out;
    max-width: 380px;
    background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 28px;
    padding: 40px 26px 30px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .12), 0 30px 80px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
    animation: aparecer .4s ease-out;
}
.tarjeta-consulta-v2::before {
    content: '';
    position: absolute;
    top: -45%; left: -45%;
    width: 85%; height: 85%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 60%);
    transform: rotate(25deg);
    pointer-events: none;
}

.logo-app-v2 {
    width: 76px; height: 76px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: linear-gradient(160deg, #0c0a18, #030308);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(96, 165, 250, .55);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .3), 0 0 22px 2px rgba(96, 165, 250, .45), 0 0 40px 8px rgba(139, 92, 246, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
    position: relative; z-index: 1;
}
.logo-app-v2 span {
    font-size: 34px; font-weight: 800;
    background: linear-gradient(160deg, #ffffff, #cfd9ff 45%, #93a9fa);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.titulo-consulta-v2 {
    position: relative; z-index: 1;
    font-size: 27px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 16px;
}
.titulo-consulta-v2 .degradado-texto {
    background: linear-gradient(90deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.divisor-sparkle {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; color: #c4b5fd;
}
.divisor-sparkle::before, .divisor-sparkle::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}
.divisor-sparkle svg { width: 14px; height: 14px; flex-shrink: 0; }

.subtitulo-v2 {
    position: relative; z-index: 1;
    color: rgba(255, 255, 255, .5); font-size: 14.5px; margin-bottom: 26px; line-height: 1.4;
}

.campo-consulta-v2 { position: relative; z-index: 1; text-align: left; margin-bottom: 20px; }
.campo-consulta-v2 label { display: block; color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.input-wrap-v2 {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px; padding: 14px 16px;
}
.input-wrap-v2 svg { color: #a78bfa; flex-shrink: 0; }
.input-wrap-v2 input {
    flex: 1; background: none; border: none; outline: none;
    color: #fff; font-size: 15px;
}
.input-wrap-v2 input::placeholder { color: rgba(255, 255, 255, .32); }
.input-wrap-v2:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .18); }

.btn-consultar-v2 {
    position: relative; z-index: 1;
    width: 100%; border: none; border-radius: 16px; padding: 16px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    color: #fff; font-weight: 700; font-size: 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 12px 30px -10px rgba(99, 102, 241, .65);
    cursor: pointer;
}
.btn-consultar-v2 svg { width: 18px; height: 18px; }
.btn-consultar-v2:disabled { opacity: .7; }

.linea-confianza-v2 {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    margin-top: 24px; color: #a78bfa;
}
.linea-confianza-v2::before, .linea-confianza-v2::after {
    content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12);
}
.linea-confianza-v2 svg { width: 16px; height: 16px; flex-shrink: 0; }
.texto-confianza-v2 {
    position: relative; z-index: 1;
    margin-top: 8px; color: rgba(255, 255, 255, .4); font-size: 12.5px;
}

/* Tarjeta de resultado, versión oscura a juego con el resto */
.tarjeta-codigo-resultado-v2 {
    position: relative; z-index: 1;
    margin-top: 22px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
    animation: aparecer .35s ease-out;
}
.tarjeta-codigo-resultado-v2 h2 {
    font-size: 18px; font-weight: 800; letter-spacing: .5px; margin-bottom: 8px;
}
.tarjeta-codigo-resultado-v2 .texto-codigo-label { color: rgba(255, 255, 255, .55); font-size: 13.5px; margin-bottom: 14px; }
.caja-digitos-v2 {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px; padding: 16px 8px;
    display: flex; justify-content: center; gap: 10px;
    margin-bottom: 14px;
}
.caja-digitos-v2 span {
    font-size: 28px; font-weight: 800; color: #fff; line-height: 1;
}
.tarjeta-codigo-resultado-v2 .texto-expira { color: rgba(255, 255, 255, .45); font-size: 12.5px; margin-bottom: 16px; }
.btn-copiar-codigo-v2 {
    width: 100%; border: none; cursor: pointer; border-radius: 14px; padding: 13px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    color: #fff; font-weight: 700; font-size: 14.5px;
}
.tarjeta-codigo-resultado-v2 .texto-aviso { color: rgba(255, 255, 255, .3); font-size: 11.5px; margin-top: 14px; }

.alerta-v2 {
    position: relative; z-index: 1;
    border-radius: 12px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; text-align: left;
}
.alerta-v2.error { background: rgba(239, 68, 68, .12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .3); }

.tarjeta-codigo-resultado {
    margin-top: 20px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    animation: aparecer .35s ease-out;
}
.tarjeta-codigo-resultado h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0 0 10px;
}
.tarjeta-codigo-resultado .texto-codigo-label {
    color: #475569;
    font-size: 14px;
    margin: 0 0 14px;
}
.caja-digitos {
    background: #fff;
    border-radius: 12px;
    padding: 16px 8px;
    display: flex;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    margin-bottom: 14px;
}
.caja-digitos span {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.tarjeta-codigo-resultado .texto-expira {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 16px;
}
.btn-copiar-codigo {
    width: 100%;
    border: none;
    cursor: pointer;
}
.tarjeta-codigo-resultado .texto-aviso {
    color: #94a3b8;
    font-size: 12px;
    margin: 14px 0 0;
}

.logo-app {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700;
    box-shadow: 0 8px 24px -6px rgba(139, 92, 246, .6);
}

.campo-con-icono { text-align: left; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .icono-input {
    position: absolute; left: 12px; font-size: 15px; opacity: .7; pointer-events: none;
}
.form-login input {
    padding-left: 38px !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}
.form-login input::placeholder { color: rgba(255, 255, 255, .4); }
.input-wrap .toggle-password {
    position: absolute; right: 8px; background: none; border: none; cursor: pointer;
    font-size: 15px; padding: 6px; opacity: .7; line-height: 1;
}
.input-wrap .toggle-password:hover { opacity: 1; }
.form-login input:focus {
    outline: none; border-color: #a78bfa !important; background: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .25);
}

.btn-login {
    width: 100%; text-align: center; margin-top: 4px; position: relative;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4); border: none;
    box-shadow: 0 8px 20px -6px rgba(139, 92, 246, .5);
}
.btn-login.cargando { opacity: .75; cursor: wait; }
.btn-login.cargando .btn-texto::after {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px;
    border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
    vertical-align: middle; animation: girar .6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Spinner del pull-to-refresh (mismo estilo que .btn-login.cargando) */
#ptr-wrap {
    position: fixed; top: -50px; left: 0; right: 0; width: 100%;
    display: flex; justify-content: center; z-index: 9999;
    transition: top .2s; pointer-events: none;
}
#ptr-spinner {
    width: 30px; height: 30px;
    border: 3px solid rgba(167, 139, 250, .3); border-top-color: #a78bfa;
    border-radius: 50%;
}
#ptr-spinner.girando { animation: girar .6s linear infinite; }

/* Encabezados */
.encabezado-inicio { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.encabezado-inicio h1 { font-size: 20px; }
.encabezado-inicio p { color: var(--gris-texto); font-size: 14px; }
.icono-campana { font-size: 20px; }

.encabezado-simple, .encabezado-acciones {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.encabezado-simple h1 { font-size: 18px; }
.flecha-atras { text-decoration: none; color: var(--texto); font-size: 20px; display:flex; align-items:center; }
.acciones-derecha { display: flex; gap: 16px; font-size: 16px; }

/* Tarjeta resumen */
.tarjeta-resumen {
    background: var(--azul); color: #fff; border-radius: var(--radio);
    padding: 20px; display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}
.etiqueta-resumen { font-size: 13px; opacity: .9; }
.numero-grande { font-size: 32px; font-weight: 700; }
.icono-sobre { background: rgba(255,255,255,.2); border-radius: 12px; padding: 12px; font-size: 20px; }

.titulo-seccion { font-size: 15px; margin: 20px 0 12px; }
.encabezado-seccion { display: flex; justify-content: space-between; align-items: center; }
.link-ver-todos { color: var(--azul); font-size: 13px; text-decoration: none; }

/* Accesos rápidos */
.grid-accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acceso-rapido {
    background: var(--gris-fondo); border-radius: 14px; padding: 14px;
    text-decoration: none; color: var(--texto); font-size: 14px; font-weight: 600;
    display: flex; flex-direction: column; gap: 8px; position: relative;
    border: 1px solid var(--borde);
}
.icono-acceso { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.icono-acceso.azul { background: var(--azul-claro); }
.icono-acceso.rojo { background: #fee2e2; }
.icono-acceso.amarillo { background: #fef3c7; }
.icono-acceso.verde { background: #d1fae5; }
.badge { position: absolute; top: 12px; right: 12px; background: var(--azul); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; }

/* Códigos recientes */
.item-codigo, .item-direccion {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--borde);
}
.icono-servicio {
    width: 40px; height: 40px; border-radius: 10px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    flex-shrink: 0;
}
.icono-servicio-img {
    width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
    flex-shrink: 0; background: var(--gris-fondo);
}
.item-direccion-wrap { border-bottom: 1px solid var(--borde); }
.item-direccion-wrap .item-direccion { border-bottom: none; }
.link-editar-direccion {
    display: inline-block; color: var(--azul); font-size: 12px; font-weight: 600;
    text-decoration: none; padding: 0 0 10px 52px;
}
.info-codigo { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.info-codigo span { color: var(--gris-texto); }
.btn-copiar {
    background: var(--azul); color: #fff; border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* Búsqueda y filtros */
.barra-busqueda { margin-bottom: 14px; }
.barra-busqueda input {
    width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde);
    background: var(--gris-fondo); color: var(--texto); font-size: 14px;
}
.oculto { display: none; }
.tabs-filtro {
    display: flex; gap: 4px; background: var(--gris-fondo); border: 1px solid var(--borde);
    border-radius: 12px; padding: 4px; margin-bottom: 16px;
}
.tabs-filtro a {
    flex: 1; text-align: center; text-decoration: none; color: var(--gris-texto);
    font-size: 13px; font-weight: 600; padding: 9px 6px; border-radius: 9px;
}
.tabs-filtro a.activo { background: var(--superficie-2); color: var(--azul); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Lista de correos */
.item-correo {
    display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borde);
    text-decoration: none; color: var(--texto); position: relative;
}
.detalle-correo { flex: 1; display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.linea-superior { display: flex; justify-content: space-between; font-size: 14px; }
.hora { color: var(--gris-texto); font-size: 12px; }
.asunto { font-weight: 500; }
.preview { color: var(--gris-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto-no-leido { width: 8px; height: 8px; background: var(--azul); border-radius: 50%; align-self: center; }
.item-correo.no-leido strong, .item-correo.no-leido .asunto { font-weight: 700; }

/* Vista de correo */
.contenido-correo h2 { font-size: 19px; margin-bottom: 4px; }
.carpeta-origen { color: var(--gris-texto); font-size: 13px; margin-bottom: 16px; }
.info-remitente { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.info-remitente div { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.info-remitente span { color: var(--gris-texto); }
.hora-correo { color: var(--gris-texto); font-size: 12px; }

.tarjeta-codigo {
    background: var(--gris-fondo); border-radius: var(--radio); padding: 24px;
    text-align: center;
}
.marca-servicio { color: var(--rojo); font-weight: 800; font-size: 20px; letter-spacing: 1px; margin-bottom: 16px; }
.codigo-grande { font-size: 30px; font-weight: 700; letter-spacing: 6px; background: #fff; color: #111827; border-radius: 10px; padding: 14px; margin: 12px 0; }
.expira { color: var(--gris-texto); font-size: 12px; margin-bottom: 16px; }
.btn-copiar-grande { width: 100%; background: var(--azul); color: #fff; border: none; border-radius: 12px; padding: 14px; font-weight: 700; margin-bottom: 12px; cursor: pointer; }
.aviso-ignorar { color: var(--gris-texto); font-size: 12px; }
.botones-respuesta { display: flex; gap: 10px; margin-top: 20px; }
.btn-secundario { flex: 1; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); border-radius: 10px; padding: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Direcciones (tarjetas, estilo Cuentas IMAP) */
.lista-direcciones { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tarjeta-direccion {
    border: 1px solid var(--borde); border-radius: 14px; padding: 14px;
    background: var(--gris-fondo);
}
.cabecera-direccion { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nombre-direccion { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nombre-direccion > div { display: flex; flex-direction: column; min-width: 0; }
.nombre-direccion strong { font-size: 14px; }
.correo-direccion { color: var(--gris-texto); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pill-nuevos {
    display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
}
.pill-nuevos .punto-estado { width: 7px; height: 7px; border-radius: 50%; }
.pill-nuevos.con-nuevos { background: var(--azul-claro); color: var(--azul); }
.pill-nuevos.con-nuevos .punto-estado { background: var(--azul); }
.pill-nuevos.al-dia { background: #f3f4f6; color: #6b7280; }
.pill-nuevos.al-dia .punto-estado { background: #9ca3af; }

.acciones-direccion { display: flex; gap: 8px; flex-wrap: wrap; }

/* Direcciones: contadores heredados */
.detalle-direccion { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.detalle-direccion span { color: var(--gris-texto); }
.badge-numero { background: var(--azul); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 10px; }
.fab-agregar {
    position: fixed; bottom: 90px; right: calc(50% - 240px + 20px);
    width: 52px; height: 52px; border-radius: 50%; background: var(--azul); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    text-decoration: none; box-shadow: 0 4px 12px rgba(37,99,235,.4);
}

/* Nav inferior */
.nav-inferior {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; background: var(--gris-fondo); border-top: 1px solid var(--borde);
    display: flex; justify-content: space-around; align-items: center; padding: 10px 0;
    backdrop-filter: blur(12px);
}
.nav-inferior a { text-decoration: none; color: var(--gris-texto); display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 2px; }
.nav-inferior a.activo { color: var(--azul); }
.nav-inferior .btn-central {
    background: var(--azul); color: #fff; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin-top: -20px;
}

.texto-vacio { text-align: center; color: var(--gris-texto); padding: 40px 0; font-size: 14px; }

/* Ajustes / Admin */
.item-ajuste {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--borde); text-decoration: none; color: var(--texto);
}
.lista-ajustes { margin-bottom: 20px; }

.tabla-admin { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.tabla-admin th, .tabla-admin td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--borde); }
.tabla-admin th { color: var(--gris-texto); font-weight: 600; }

/* Cuentas IMAP (tarjetas) */
.lista-cuentas-imap { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tarjeta-cuenta-imap {
    border: 1px solid var(--borde); border-radius: 14px; padding: 14px;
    background: var(--gris-fondo);
}
.cabecera-cuenta-imap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nombre-cuenta-imap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nombre-cuenta-imap > div { display: flex; flex-direction: column; min-width: 0; }
.nombre-cuenta-imap strong { font-size: 14px; }
.host-cuenta-imap { color: var(--gris-texto); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.estado-pill {
    display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
}
.estado-pill .punto-estado { width: 7px; height: 7px; border-radius: 50%; }
.estado-pill.activa { background: #d1fae5; color: #065f46; }
.estado-pill.activa .punto-estado { background: #10b981; }
.estado-pill.pausada { background: #f3f4f6; color: #6b7280; }
.estado-pill.pausada .punto-estado { background: #9ca3af; }

.acciones-cuenta-imap { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-accion-chica {
    flex: 1; text-align: center; text-decoration: none; font-size: 12.5px; font-weight: 600;
    padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--borde);
    color: var(--texto);
}
.btn-accion-chica.peligro { color: var(--rojo); border-color: rgba(239,68,68,.3); }

/* Patrones OTP (tarjetas) */
.lista-patrones-otp { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tarjeta-patron-otp {
    border: 1px solid var(--borde); border-radius: 14px; padding: 14px;
    background: var(--gris-fondo);
}
.cabecera-patron-otp { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.nombre-patron-otp { display: flex; flex-direction: column; min-width: 0; }
.nombre-patron-otp strong { font-size: 14px; }
.remitente-patron-otp { color: var(--gris-texto); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regex-patron-otp {
    display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
    background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px;
    color: var(--texto); overflow-x: auto; white-space: nowrap; margin-bottom: 12px;
}
.acciones-patron-otp { display: flex; gap: 8px; flex-wrap: wrap; }

/* Usuarios y roles (tarjetas) */
.lista-usuarios { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tarjeta-usuario {
    border: 1px solid var(--borde); border-radius: 14px; padding: 14px;
    background: var(--gris-fondo);
}
.cabecera-usuario { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nombre-usuario { display: flex; flex-direction: column; min-width: 0; }
.nombre-usuario strong { font-size: 14px; }
.correo-usuario { color: var(--gris-texto); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pill-rol {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px; flex-shrink: 0; text-transform: capitalize;
    background: var(--azul-claro); color: var(--azul);
}

.acciones-usuario { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acciones-usuario select {
    flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--borde);
    background: #fff; color: var(--texto); font-size: 13px;
}
.acciones-usuario .btn-accion-chica { flex: 0 0 auto; padding: 10px 14px; }

/* Asignar direcciones a clientes (acordeón de tarjetas + buscador) */
.texto-ayuda { color: var(--gris-texto); font-size: 13px; margin: 12px 0 4px; line-height: 1.5; }

.buscador-clientes { margin-top: 16px; margin-bottom: 14px; }
.buscador-clientes input {
    width: 100%; padding: 12px 14px 12px 40px; border-radius: 12px; border: 1px solid var(--borde);
    background: var(--gris-fondo); color: var(--texto); font-size: 14px;
}
.buscador-clientes .icono-input { left: 12px; color: var(--gris-texto); }

.lista-clientes-acordeon { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.tarjeta-cliente-acordeon {
    border: 1px solid var(--borde); border-radius: 14px; background: var(--gris-fondo); overflow: hidden;
}
.tarjeta-cliente-acordeon[open] { border-color: var(--azul); }
.cabecera-cliente-acordeon {
    display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none;
}
.cabecera-cliente-acordeon::-webkit-details-marker { display: none; }
.nombre-cuenta-imap-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nombre-cuenta-imap-info strong { font-size: 14px; }
.icono-cliente { background: var(--azul); font-size: 18px; }
.chevron-acordeon { display: flex; color: var(--gris-texto); transition: transform .2s ease; flex-shrink: 0; }
.chevron-acordeon svg { width: 18px; height: 18px; }
.tarjeta-cliente-acordeon[open] .chevron-acordeon { transform: rotate(90deg); }

.cuerpo-cliente-acordeon { padding: 0 14px 14px; border-top: 1px solid var(--borde); margin-top: 2px; padding-top: 14px; }

.pill-asignacion.tiene-asignadas { background: #eff6ff; color: var(--azul); }
.pill-asignacion.tiene-asignadas .punto-estado { background: var(--azul); }

.lista-alias-asignables { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.tarjeta-alias-asignable {
    display: block; border: 1px solid var(--borde); border-radius: 14px; padding: 14px;
    background: var(--gris-fondo); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.tarjeta-alias-asignable:active { transform: scale(.98); }
.tarjeta-alias-asignable:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.checkbox-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cabecera-alias-asignable { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.pill-asignacion {
    display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
    background: #f3f4f6; color: #6b7280;
    transition: background-color .15s ease, color .15s ease;
}
.pill-asignacion .punto-estado { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; transition: background-color .15s ease; }
.pill-asignacion .texto-on { display: none; }
.tarjeta-alias-asignable:has(input:checked) .pill-asignacion { background: #d1fae5; color: #065f46; }
.tarjeta-alias-asignable:has(input:checked) .pill-asignacion .punto-estado { background: #10b981; }
.tarjeta-alias-asignable:has(input:checked) .texto-on { display: inline; }
.tarjeta-alias-asignable:has(input:checked) .texto-off { display: none; }

.tarjeta-vacio {
    border: 1px solid var(--borde); border-radius: 14px; padding: 28px 20px;
    background: var(--gris-fondo); text-align: center; margin-top: 16px;
}
.tarjeta-vacio .icono-vacio {
    width: 52px; height: 52px; border-radius: 50%; background: var(--azul-claro); color: var(--azul);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.tarjeta-vacio .icono-vacio svg { width: 26px; height: 26px; }
.tarjeta-vacio strong { display: block; font-size: 15px; margin-bottom: 6px; }
.tarjeta-vacio p { color: var(--gris-texto); font-size: 13px; margin-bottom: 18px; line-height: 1.5; }

.btn-primario {
    background: var(--azul); color: #fff; border: none; border-radius: 10px;
    padding: 12px 16px; font-weight: 600; cursor: pointer; text-decoration: none;
    display: inline-block; font-size: 14px;
}
.btn-peligro { color: var(--rojo); background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; }

.tarjeta-form {
    border: 1px solid var(--borde); border-radius: 14px; padding: 16px;
    background: var(--gris-fondo); margin-top: 16px;
}
.tarjeta-form.form-admin { margin-top: 0; }
.tarjeta-form input, .tarjeta-form select, .tarjeta-form textarea { background: var(--superficie-2); }
.form-admin { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.form-admin label { font-size: 13px; font-weight: 600; color: var(--gris-texto); display: block; margin-bottom: 4px; }
.form-admin input, .form-admin select, .form-admin textarea {
    width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--borde);
    font-size: 14px; background: var(--gris-fondo); color: var(--texto);
}
.form-admin input::placeholder, .form-admin textarea::placeholder { color: var(--gris-texto); }
.form-admin select option { background: var(--gris-fondo); color: var(--texto); }
.form-admin input[type="color"] { padding: 4px; height: 44px; cursor: pointer; }
.form-admin .input-wrap input { padding-right: 40px; }
.alerta {
    padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px;
    position: relative; overflow: hidden; border: 1px solid transparent;
    animation: alertaEntrada .45s cubic-bezier(.34,1.56,.64,1) both;
}
.alerta.exito { background: #d1fae5; color: #065f46; border-color: #86efac; }
.alerta.error { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.alerta::after {
    content: ''; position: absolute; bottom: 0; left: 0; height: 3px;
    background: currentColor; opacity: .3;
    animation: alertaBarra 4s linear forwards;
}
.alerta.alerta-salida {
    animation: alertaSalida .35s ease forwards;
    pointer-events: none;
}

/* ===== Modal de confirmación (reemplaza el confirm() nativo del navegador) ===== */
.overlay-confirmar {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(17,24,39,.5); backdrop-filter: blur(3px);
    align-items: flex-end; justify-content: center;
}
.overlay-confirmar.visible { display: flex; animation: fadeInOverlay .2s ease; }
.modal-confirmar {
    width: 100%; max-width: 420px; background: #fff;
    border-radius: 22px 22px 0 0; padding: 28px 22px 22px;
    text-align: center; animation: subirModal .25s ease;
}
@media (min-width: 480px) {
    .overlay-confirmar { align-items: center; }
    .modal-confirmar { border-radius: 22px; }
}
.icono-alerta-modal {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    background: #fef2f2; display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.modal-confirmar p {
    font-size: 15px; color: var(--texto); line-height: 1.5; margin-bottom: 22px;
}
.acciones-modal-confirmar { display: flex; gap: 10px; }
.btn-modal-cancelar, .btn-modal-eliminar {
    flex: 1; padding: 13px; border-radius: 14px; font-weight: 700; font-size: 14.5px;
    text-decoration: none; border: none; cursor: pointer;
}
.btn-modal-cancelar { background: var(--gris-fondo); color: var(--texto); }
.btn-modal-eliminar { background: var(--rojo); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes subirModal { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== Selector de color de marca (nueva_direccion.php / editar_direccion.php) ===== */
.input-color-wrap { display: flex; gap: 10px; align-items: center; }
.input-color-wrap input[type="color"] {
    width: 48px; height: 44px; padding: 2px; border: 1px solid var(--borde);
    border-radius: 10px; background: #fff; cursor: pointer; flex-shrink: 0;
}
.input-color-wrap input[type="text"] {
    flex: 1; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
    font-size: 14px; color: var(--texto); text-transform: lowercase;
}