/* ═══════════════════════════════════════════════════════════════════
   POLISH.CSS — Capa de rediseño global de Veriffai
   Se carga DESPUÉS de style.css para refinar el tema sociala:
   tokens de diseño, componentes modernos, micro-interacciones y
   responsive fino (móvil / tablet / escritorio). Respeta el modo
   oscuro (body.theme-dark) y prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --p-brand: #1e74fd;
    --p-brand-2: #7c3aed;
    --p-grad: linear-gradient(135deg, #1e74fd 0%, #7c3aed 100%);
    --p-grad-soft: linear-gradient(135deg, rgba(30,116,253,.12), rgba(124,58,237,.12));
    --p-surface: #ffffff;
    --p-surface-2: #f8fafc;
    --p-bg: #f4f6fb;
    --p-text: #0f172a;
    --p-text-2: #475569;
    --p-text-3: #94a3b8;
    --p-border: #e8edf4;
    --p-danger: #ef4444;
    --p-success: #22c55e;
    --p-warning: #f59e0b;
    --p-radius-sm: 10px;
    --p-radius: 16px;
    --p-radius-lg: 22px;
    --p-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px -4px rgba(15,23,42,.08);
    --p-shadow: 0 2px 6px rgba(15,23,42,.04), 0 16px 40px -20px rgba(15,23,42,.18);
    --p-shadow-lg: 0 8px 24px rgba(15,23,42,.06), 0 30px 70px -30px rgba(15,23,42,.28);
    --p-ease: cubic-bezier(.25,.8,.25,1);
}

body.theme-dark {
    --p-surface: #1b2130;
    --p-surface-2: #141a26;
    --p-bg: #0e1420;
    --p-text: #eef2f7;
    --p-text-2: #c3cbd8;
    --p-text-3: #7d8aa0;
    --p-border: #2a3346;
    --p-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --p-shadow: 0 2px 8px rgba(0,0,0,.35);
    --p-shadow-lg: 0 12px 30px rgba(0,0,0,.45);
}

/* ── Base: fondo, tipografía, scrollbar, foco accesible ───────────── */
html { scroll-behavior: smooth; }

body {
    background-color: var(--p-bg);
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(30,116,253,.06), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(124,58,237,.05), transparent 60%);
    background-attachment: fixed;
    color: var(--p-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.theme-dark {
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(30,116,253,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(124,58,237,.08), transparent 60%);
}

.mont-font { letter-spacing: -0.01em; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }

::selection { background: rgba(30,116,253,.2); }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(120,134,156,.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120,134,156,.55); background-clip: padding-box; }

/* Anillo de foco accesible (solo teclado) */
:focus-visible {
    outline: 3px solid rgba(30,116,253,.45);
    outline-offset: 2px;
    border-radius: 6px;
}

a, button, .btn, .menu-icon, .nav-content-bttn, .dropdown-item {
    transition: color .18s var(--p-ease), background-color .18s var(--p-ease),
                border-color .18s var(--p-ease), box-shadow .18s var(--p-ease),
                transform .18s var(--p-ease), opacity .18s var(--p-ease);
}

/* ── Header superior: vidrio + sombra ─────────────────────────────── */
/* Header: fondo sólido por defecto (robusto); efecto vidrio solo si el
   navegador soporta backdrop-filter (progressive enhancement). */
.nav-header {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -18px rgba(15,23,42,.22) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .nav-header {
        background: rgba(255,255,255,.88) !important;
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
    }
}
body.theme-dark .nav-header {
    background: #141a26 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -18px rgba(0,0,0,.6) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    body.theme-dark .nav-header {
        background: rgba(20,26,38,.9) !important;
    }
}
.nav-header .nav-top img { filter: drop-shadow(0 2px 6px rgba(15,23,42,.12)); }
body.theme-dark .nav-header .nav-top img { filter: brightness(1.05) drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

.nav-header .menu-icon i {
    transition: transform .2s var(--p-ease), color .2s var(--p-ease), box-shadow .2s var(--p-ease);
}
.nav-header .menu-icon:hover i {
    transform: translateY(-1px) scale(1.06);
}
.nav-header .menu-icon:active i { transform: scale(.94); }

/* Badge de notificaciones: punto con pulso */
.dot-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(255,255,255,.9);
    animation: p-badge-pop .3s var(--p-ease);
}
@keyframes p-badge-pop {
    0% { transform: scale(.4); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
body.theme-dark .dot-count { box-shadow: 0 0 0 3px rgba(20,26,38,.9); }

/* Input de búsqueda del header */
.header-search .form-control,
.header-search input {
    border-radius: 999px !important;
    transition: box-shadow .2s var(--p-ease), background-color .2s var(--p-ease);
}
.header-search input:focus {
    box-shadow: 0 0 0 4px rgba(30,116,253,.16);
    background: #fff !important;
}
body.theme-dark .header-search input:focus { background: #1b2130 !important; }

#search-results-dropdown {
    border-radius: 16px !important;
    box-shadow: var(--p-shadow-lg) !important;
    border: 1px solid var(--p-border) !important;
    overflow: hidden;
}

/* ── Dropdowns: sombra + entrada suave ────────────────────────────── */
.dropdown-menu {
    border-radius: 16px !important;
    box-shadow: var(--p-shadow-lg) !important;
    border: 1px solid var(--p-border) !important;
    /* Ojo: NO usar transform en la animación: Bootstrap/Popper posiciona
       los dropdowns con transform, y una animación de transform lo pisa
       y hace que el menú aparezca en la esquina y luego salte. Solo opacidad. */
    animation: p-drop-in .18s var(--p-ease);
}
@keyframes p-drop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dropdown-menu .dropdown-item {
    border-radius: 10px !important;
}
.dropdown-menu .dropdown-item:hover {
    background: rgba(30,116,253,.08) !important;
}

/* ── Tarjetas: radio, sombra y elevación en hover ─────────────────── */
.card {
    border-radius: var(--p-radius-lg) !important;
    box-shadow: var(--p-shadow-sm) !important;
    border-color: var(--p-border) !important;
}
body.theme-dark .card { background: var(--p-surface) !important; }

/* Tarjetas de publicación: elevación sutil al pasar el cursor */
.pub-card, .feed-item {
    transition: transform .22s var(--p-ease), box-shadow .22s var(--p-ease), border-color .22s var(--p-ease) !important;
}
.pub-card:hover, .feed-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--p-shadow) !important;
}
@media (hover: none) {
    .pub-card:hover, .feed-item:hover { transform: none; }
}

/* Imágenes dentro de tarjetas de feed */
.pub-card img, .feed-item img, .album-card img, .story-card img {
    border-radius: 12px;
}
.pub-card .pub-image, .feed-item .pub-image {
    overflow: hidden;
}
.pub-card .pub-image img, .feed-item .pub-image img {
    transition: transform .45s var(--p-ease);
}
.pub-card .pub-image:hover img, .feed-item .pub-image:hover img {
    transform: scale(1.03);
}

/* ── Botones: gradiente de marca + micro-interacción ──────────────── */
.btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
}
.btn-primary, .btn.btn-primary, a.btn-primary {
    background-image: var(--p-grad) !important;
    border: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(30,116,253,.55);
}
.btn-primary:hover, .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(30,116,253,.6);
    filter: brightness(1.04);
}
.btn-primary:active { transform: translateY(0) scale(.97); }

.btn-light {
    background: var(--p-surface-2) !important;
    border: 1px solid var(--p-border) !important;
    color: var(--p-text-2) !important;
}
.btn-light:hover {
    background: #eef2f8 !important;
    border-color: #dbe3ee !important;
    color: var(--p-text) !important;
}
body.theme-dark .btn-light {
    background: #232c3e !important;
    border-color: #2f3a50 !important;
    color: #c3cbd8 !important;
}

.btn-lg, .btn { letter-spacing: -0.01em; }

/* ── Formularios: consistencia + anillo de foco ───────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
    border-radius: 12px !important;
    border: 1px solid var(--p-border);
    transition: border-color .2s var(--p-ease), box-shadow .2s var(--p-ease), background-color .2s var(--p-ease);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--p-brand) !important;
    box-shadow: 0 0 0 4px rgba(30,116,253,.14) !important;
}
.style2-input {
    border-radius: 12px !important;
}

.form-check-input:checked {
    background-color: var(--p-brand);
    border-color: var(--p-brand);
}

/* ── Insignias: píldoras suaves ───────────────────────────────────── */
.badge, .badge-pill {
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: .02em;
}
.badge.bg-warning { color: #fff !important; }
.badge.bg-primary-gradiant { background-image: var(--p-grad) !important; }

/* ── Compositor del feed ──────────────────────────────────────────── */
#compositor.card {
    background: var(--p-surface);
}
#compositor .form-control[readonly], #compositor button.form-control {
    cursor: pointer;
    border-radius: 999px !important;
    background: var(--p-surface-2) !important;
    transition: background-color .2s var(--p-ease), box-shadow .2s var(--p-ease), transform .2s var(--p-ease);
}
#compositor button.form-control:hover {
    background: #eef2f8 !important;
    box-shadow: 0 0 0 4px rgba(30,116,253,.08);
    transform: translateY(-1px);
}
body.theme-dark #compositor button.form-control:hover { background: #232c3e !important; }

/* ── Estados vacíos ───────────────────────────────────────────────── */
.feed-empty, #feed-empty-filtro {
    border: 2px dashed var(--p-border) !important;
    background: transparent !important;
    text-align: center;
    padding: 48px 24px !important;
}
.feed-empty .feather, #feed-empty-filtro .feather {
    font-size: 34px;
    color: var(--p-text-3);
}
.feed-empty h4, #feed-empty-filtro h4 { color: var(--p-text-2); }
.feed-empty p, #feed-empty-filtro p { color: var(--p-text-3); }
body.theme-dark .feed-empty, body.theme-dark #feed-empty-filtro {
    border-color: #2f3a50 !important;
}

/* ── Paginación / "Cargar más" ────────────────────────────────────── */
#feed-pagination .btn {
    border-radius: 999px !important;
    padding-left: 24px;
    padding-right: 24px;
}
#feed-pagination .btn .feather { vertical-align: -2px; }

/* ── Historias: tarjetas redondeadas con elevación ────────────────── */
.story-card, .story-col, #stories .story-item {
    transition: transform .22s var(--p-ease), box-shadow .22s var(--p-ease);
}
.story-card:hover, .story-col:hover, #stories .story-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--p-shadow);
}
.story-card img, .story-col img, #stories .story-item img {
    transition: transform .4s var(--p-ease);
}
.story-card:hover img, .story-col:hover img, #stories .story-item:hover img {
    transform: scale(1.05);
}

/* ── Modales: radio generoso + sombra profunda ────────────────────── */
.modal-content {
    border-radius: 20px !important;
    box-shadow: var(--p-shadow-lg) !important;
    border: 0 !important;
    overflow: hidden;
}
.modal-header {
    padding: 18px 22px;
    border-bottom-color: var(--p-border) !important;
}
.modal-title { font-weight: 700; }

/* ── Chat: burbujas refinadas ─────────────────────────────────────── */
.msg-bubble-self, .msg-bubble.msg-self {
    background-image: var(--p-grad) !important;
    box-shadow: 0 4px 12px -4px rgba(30,116,253,.4);
}
.msg-bubble-other, .msg-bubble.msg-other {
    background: #eef2f7 !important;
    color: var(--p-text) !important;
}
body.theme-dark .msg-bubble-other, body.theme-dark .msg-bubble.msg-other {
    background: #2a3346 !important;
}

/* ── Sidebar derecho (contactos) ──────────────────────────────────── */
.middle-sidebar-right-content {
    border-radius: 20px !important;
    box-shadow: var(--p-shadow) !important;
    border: 1px solid var(--p-border);
}
.sidebar-contact-item:hover {
    box-shadow: 0 4px 12px -6px rgba(15,23,42,.12);
}

/* ── Navegación lateral (drawer) ──────────────────────────────────── */
.nav-links li a, .navigation a {
    transition: background-color .18s var(--p-ease), color .18s var(--p-ease), transform .18s var(--p-ease);
}
.navigation a:hover { transform: translateX(2px); }

/* ── Barra inferior móvil: dock flotante estilo app ───────────────── */
@media (max-width: 991.98px) {
    .app-footer {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: calc(100% - 28px);
        max-width: 520px;
        border-radius: 24px !important;
        background: rgba(255,255,255,.9) !important;
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        box-shadow: 0 12px 40px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.05) !important;
        border: 0 !important;
        padding: 8px 10px !important;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 1080 !important;
    }
    body.theme-dark .app-footer {
        background: rgba(27,33,48,.92) !important;
        box-shadow: 0 12px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) !important;
    }
    .app-footer .nav-content-bttn {
        position: relative;
        width: 56px;
        height: 54px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border-radius: 16px;
        color: #64748b !important;
        text-decoration: none;
    }
    body.theme-dark .app-footer .nav-content-bttn { color: #94a3b8 !important; }
    .app-footer .nav-content-bttn i { font-size: 20px; line-height: 1; }
    .app-footer .nav-content-bttn img { width: 26px; height: 26px; object-fit: cover; border: 2px solid #fff; border-radius: 50%; }
    body.theme-dark .app-footer .nav-content-bttn img { border-color: #2a3346; }
    .app-footer .dock-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1;
        color: inherit;
        opacity: .8;
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-footer .dock-avatar-fallback {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-image: var(--p-grad);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 2px #fff;
    }
    body.theme-dark .app-footer .dock-avatar-fallback { box-shadow: 0 0 0 2px #2a3346; }
    .app-footer .nav-content-bttn.active {
        background: var(--p-grad-soft);
        color: var(--p-brand) !important;
    }
    body.theme-dark .app-footer .nav-content-bttn.active { color: #6ea8ff !important; }
    .app-footer .nav-content-bttn.active .dock-label { opacity: 1; color: inherit; }
    .app-footer .nav-content-bttn:active { transform: scale(.9); }
    body.modal-open .app-footer { display: none !important; }
}

/* ── Ajustes de espaciado en escritorio ───────────────────────────── */
@media (min-width: 992px) {
    .middle-sidebar-left {
        padding-left: 28px;
        padding-right: 28px;
    }
    .middle-sidebar-bottom .middle-sidebar-left > .card,
    .middle-sidebar-bottom .middle-sidebar-left > .row > .col-xl-8 > .card {
        box-shadow: var(--p-shadow-sm);
    }
}

/* ── Responsive fino: tipografía y espacios en móvil ──────────────── */
@media (max-width: 767.98px) {
    body { font-size: 15px; }
    .card { border-radius: 18px !important; }
    .modal-content { border-radius: 18px 18px 0 0 !important; }
    .pub-card, .feed-item { border-radius: 18px !important; }
    .main-content { padding-top: 0; }
    /* Header compacto en móvil */
    .nav-header { padding-top: max(8px, env(safe-area-inset-top)); }
    .nav-header .header-search input { width: 150px !important; }
    /* Evitar desbordes por inputs/selects */
    input, select, textarea, .form-control { max-width: 100%; }
    .feed-body .col-xl-8, .feed-body .col-lg-8 { padding-left: 10px; padding-right: 10px; }
    .right-chat { display: none; }
    /* Sombra suave en el dock inferior para que flote sobre el contenido */
    .app-footer { width: calc(100% - 24px); }
}

@media (max-width: 575.98px) {
    .middle-sidebar-left { padding-left: 8px !important; padding-right: 8px !important; }
    .feed-body .col-xl-8, .feed-body .col-lg-8 { padding-left: 6px; padding-right: 6px; }
    .pub-card, .feed-item, #compositor { padding-left: 14px !important; padding-right: 14px !important; }
    .modal-dialog { margin: 0 6px !important; }
}

/* ── Preloader de navegación: radio y sombra ──────────────────────── */
.nav-preload-shell { border-radius: 20px; }
.nav-preload-card {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.14);
}

/* ── Páginas de autenticación: panel de marca + botones ───────────── */
.login-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(30,116,253,.20) 0%, rgba(124,58,237,.42) 55%, rgba(10,15,35,.82) 100%);
    pointer-events: none;
}
.login-overlay + .p-4 { z-index: 2; }

.btn-login-submit {
    background-image: var(--p-grad) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px -10px rgba(30,116,253,.6) !important;
    transition: transform .18s var(--p-ease), box-shadow .18s var(--p-ease), filter .18s var(--p-ease) !important;
}
.btn-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(30,116,253,.65) !important;
    filter: brightness(1.05);
}
.btn-login-submit:active { transform: translateY(0) scale(.98); }

.btn-google {
    background: #fff !important;
    border: 1px solid var(--p-border) !important;
    color: var(--p-text) !important;
    border-radius: 14px !important;
    box-shadow: var(--p-shadow-sm) !important;
    transition: box-shadow .18s var(--p-ease), border-color .18s var(--p-ease), transform .18s var(--p-ease) !important;
}
.btn-google:hover {
    box-shadow: var(--p-shadow) !important;
    border-color: #dbe3ee !important;
    transform: translateY(-1px);
    color: var(--p-text) !important;
}
.btn-google:active { transform: translateY(0) scale(.98); }

/* ── Accesibilidad: respetar preferencia de movimiento ────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH V2 — Refinamientos adicionales de interfaz
   Iconografía en secciones, jerarquía tipográfica, navegación lateral
   con estados activos, avatares, tabs, estadísticas y micro-detalles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Utilidades reutilizables (usadas en las plantillas) ─────────── */
.grad-text {
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--p-grad-soft);
    color: var(--p-brand) !important;
    flex: 0 0 auto;
}
body.theme-dark .icon-chip { color: #6ea8ff !important; background: rgba(110,168,255,.12); }
.btn-grad {
    background-image: var(--p-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(30,116,253,.6) !important;
    transition: transform .18s var(--p-ease), box-shadow .18s var(--p-ease), filter .18s var(--p-ease) !important;
}
.btn-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(30,116,253,.65) !important; filter: brightness(1.05); color: #fff !important; }
.btn-grad:active { transform: translateY(0) scale(.97); }
.stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--p-text-3);
}

/* ── Jerarquía tipográfica: títulos compactos y legibles ─────────── */
.fw-700 { letter-spacing: -0.015em; }
.font-xsss, .font-xssss, .font-xsssss { letter-spacing: -0.005em; }

/* ── Iconos de encabezado de sección en píldora degradada ────────── */
.card .card-body h4.fw-700 > i.feather,
.card .card-body h5.fw-700 > i.feather,
.card-header h4.fw-700 > i.feather {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--p-grad-soft);
    color: var(--p-brand) !important;
    font-size: 14px;
    margin-right: 8px;
    vertical-align: -7px;
}
body.theme-dark .card .card-body h4.fw-700 > i.feather,
body.theme-dark .card .card-body h5.fw-700 > i.feather { color: #6ea8ff !important; }

/* ── Avatar: anillo suave y elevación ────────────────────────────── */
.avatar img, .pub-card .avatar img, .feed-item .avatar img {
    border: 2px solid #fff;
    box-shadow: var(--p-shadow-sm);
}
body.theme-dark .avatar img, body.theme-dark .pub-card .avatar img,
body.theme-dark .feed-item .avatar img { border-color: #2a3346; }

/* ── Navegación lateral (drawer): captions y estados activos ─────── */
.navigation .nav-caption {
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--p-text-3) !important;
    padding: 0 16px 6px;
}
.navigation .nav-content-bttn {
    border-radius: 12px;
    padding: 9px 12px;
    margin: 1px 10px;
    font-weight: 600;
    font-size: 13.5px;
}
.navigation .nav-content-bttn > i.btn-round-md,
.navigation .nav-content-bttn > i.btn-round-sm {
    box-shadow: var(--p-shadow-sm);
    font-size: 15px;
    flex: 0 0 auto;
}
.navigation .nav-content-bttn:hover {
    background: rgba(30,116,253,.07);
    transform: translateX(2px);
}
.navigation .nav-content-bttn.active {
    background: var(--p-grad-soft);
    color: var(--p-brand) !important;
}
.navigation .nav-content-bttn.active > i,
.navigation .nav-content-bttn.active .feather {
    color: var(--p-brand) !important;
}
body.theme-dark .navigation .nav-content-bttn:hover { background: rgba(110,168,255,.08); }
body.theme-dark .navigation .nav-content-bttn.active { background: rgba(110,168,255,.12); color: #6ea8ff !important; }
body.theme-dark .navigation .nav-content-bttn.active > i { color: #6ea8ff !important; }

/* ── Tabs de perfil estilo píldora ───────────────────────────────── */
#perfil-tabs .tab-link, .product-info-tab .tab-link {
    border-radius: 999px;
    padding: 8px 14px;
    margin-right: 4px;
    font-weight: 700;
}
#perfil-tabs .tab-link:hover, .product-info-tab .tab-link:hover { color: var(--p-brand) !important; }
#perfil-tabs .tab-link.active, .product-info-tab .tab-link.active {
    background: var(--p-grad-soft);
    color: var(--p-brand) !important;
}
body.theme-dark #perfil-tabs .tab-link.active, body.theme-dark .product-info-tab .tab-link.active {
    background: rgba(110,168,255,.12); color: #6ea8ff !important;
}

/* ── Botones: altura consistente en escritorio ───────────────────── */
.btn:not(.btn-sm):not(.btn-lg):not(.btn-round-sm):not(.btn-round-lg) {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.btn-sm { min-height: 34px; }

/* ── Header: iconos con fondo suave en hover y tooltip sutil ─────── */
.nav-header .menu-icon {
    border-radius: 12px;
}
.nav-header .menu-icon:hover {
    background: rgba(30,116,253,.07);
}
body.theme-dark .nav-header .menu-icon:hover { background: rgba(110,168,255,.1); }
.nav-header .menu-icon:active { transform: scale(.94); }

/* ── Input de búsqueda del header: un poco más ancho en desktop ──── */
@media (min-width: 1200px) {
    .nav-header .header-search input { width: 280px !important; }
}

/* ── Compositor del feed: acciones rápidas bajo el campo ─────────── */
#compositor .composer-quick-actions .composer-action {
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--p-text-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .18s var(--p-ease), color .18s var(--p-ease), transform .18s var(--p-ease);
}
#compositor .composer-quick-actions .composer-action:hover {
    background: var(--p-surface-2);
    color: var(--p-text);
    transform: translateY(-1px);
}
#compositor .composer-quick-actions .composer-action:active { transform: scale(.95); }

/* ── Previsualización de enlaces: refinamiento sutil ─────────────── */
.link-preview-card { box-shadow: var(--p-shadow-sm); border-color: var(--p-border) !important; }
.link-preview-card:hover { box-shadow: var(--p-shadow); }

/* ── Estados vacíos genéricos ────────────────────────────────────── */
.empty-state {
    border: 2px dashed var(--p-border) !important;
    border-radius: var(--p-radius-lg) !important;
    background: transparent !important;
    text-align: center;
    padding: 40px 20px !important;
}
.empty-state .icon-chip { width: 56px; height: 56px; border-radius: 18px; font-size: 24px; margin: 0 auto 12px; }
body.theme-dark .empty-state { border-color: #2f3a50 !important; }

/* ── Banner de creador (completar perfil) ────────────────────────── */
.creator-banner {
    background-image: var(--p-grad) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px -16px rgba(30,116,253,.65) !important;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.25rem;
}
.creator-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(320px 160px at 90% -20%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(220px 140px at 10% 120%, rgba(255,255,255,.14), transparent 60%);
    pointer-events: none;
}
.creator-banner .creator-banner-content { position: relative; z-index: 1; }
.creator-banner .creator-banner-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(255,255,255,.2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
}

/* ── Mini tarjetas de creador (explorar) ─────────────────────────── */
.creator-mini-card { transition: transform .22s var(--p-ease), box-shadow .22s var(--p-ease) !important; }
.creator-mini-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow) !important; }
.creator-mini-card .creator-cover { height: 76px; }
.creator-mini-card .avatar-ring {
    border: 3px solid #fff;
    box-shadow: var(--p-shadow-sm);
}
body.theme-dark .creator-mini-card .avatar-ring { border-color: #1b2130; }

/* ── Chips de disciplina / badges de creador ─────────────────────── */
.badge-creator {
    background: var(--p-grad) !important;
    color: #fff !important;
}
.badge-disciplina {
    background: var(--p-grad-soft) !important;
    color: var(--p-brand) !important;
}
body.theme-dark .badge-disciplina { background: rgba(110,168,255,.14); color: #6ea8ff !important; }

/* ── Feed: fila de autor con más aire y metadatos compactos ──────── */
.pub-card .pub-author-row .pub-author-name { font-size: 13px; font-weight: 700; }
.pub-card .pub-author-row .pub-meta { font-size: 11px; color: var(--p-text-3); }

/* ── Paginación / cargar más: botón ancho con icono ──────────────── */
#feed-pagination { margin-top: 4px; }
#feed-pagination .btn { min-height: 46px; }

/* ── Dropdown de usuario: separadores y avatares ─────────────────── */
.dropdown-menu .dropdown-divider { border-color: var(--p-border); opacity: 1; }

/* ── Alertas: radio y jerarquía ──────────────────────────────────── */
.alert { border-radius: 14px !important; border: 0 !important; box-shadow: var(--p-shadow-sm) !important; }

/* ═══════════════════════════════════════════════════════════════════
   POLISH V3 — Uniformidad "muy profesional" en todas las páginas
   Hero de página, listas, chat, notificaciones, tablas, media cards,
   formularios con icono, tabs y modo oscuro para componentes custom.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero de página consistente ──────────────────────────────────── */
.page-hero {
    background: var(--p-surface);
    border: 1px solid var(--p-border) !important;
    border-radius: var(--p-radius-lg) !important;
    box-shadow: var(--p-shadow) !important;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(460px 240px at 100% -40%, rgba(30,116,253,.10), transparent 60%),
        radial-gradient(360px 220px at -10% 130%, rgba(124,58,237,.08), transparent 60%);
    pointer-events: none;
}
.page-hero .page-hero-inner { position: relative; z-index: 1; }
.page-hero-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--p-grad);
    color: #fff !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
    box-shadow: 0 8px 22px -8px rgba(30,116,253,.65);
}
.page-hero-kicker {
    font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--p-brand);
}
body.theme-dark .page-hero-kicker { color: #6ea8ff; }

/* ── Listas y filas: aire y hover sutil ──────────────────────────── */
.list-row-card { transition: transform .2s var(--p-ease), box-shadow .2s var(--p-ease) !important; }
.list-row-card:hover { transform: translateY(-2px); box-shadow: var(--p-shadow) !important; }

/* ── Chat inbox: tema oscuro + refinado ──────────────────────────── */
.chat-wrapper { background: var(--p-surface) !important; }
.chat-inbox-item { border-bottom-color: var(--p-border) !important; }
.chat-inbox-link { border-radius: 14px !important; }
.chat-inbox-link:hover { background: var(--p-surface-2) !important; }
body.theme-dark .chat-inbox-item { border-bottom-color: #2a3346 !important; }
body.theme-dark .chat-inbox-link:hover { background: #232c3e !important; }

/* ── Bandeja de notificaciones ───────────────────────────────────── */
.notification-box .notif-item,
.notification-box li { border-radius: 14px; }
.notification-box .notif-item:hover,
.notification-box li:hover { background: var(--p-surface-2) !important; }
body.theme-dark .notification-box .notif-item:hover,
body.theme-dark .notification-box li:hover { background: #232c3e !important; }

/* ── Tarjetas de media: álbumes / historias / creadores ──────────── */
.album-card, .story-card, .reto-publication-card, .media-card {
    transition: transform .22s var(--p-ease), box-shadow .22s var(--p-ease) !important;
}
.album-card:hover, .story-card:hover, .reto-publication-card:hover, .media-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--p-shadow) !important;
}
.album-card img, .media-card img { transition: transform .45s var(--p-ease); }
.album-card:hover img, .media-card:hover img { transform: scale(1.04); }
.album-card .card-body, .media-card .card-body { border-top: 1px solid var(--p-border); }

/* ── Tablas ──────────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; }
.table thead th {
    font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--p-text-3); border-bottom-color: var(--p-border) !important;
}
.table td { color: var(--p-text-2); border-bottom-color: var(--p-border) !important; vertical-align: middle; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: var(--p-surface-2); }
body.theme-dark .table thead th { color: #7d8aa0; }

/* ── Paginación: píldoras ────────────────────────────────────────── */
.pagination .page-link {
    border: 0; margin: 0 3px; border-radius: 10px !important;
    font-weight: 700; color: var(--p-text-2);
    background: var(--p-surface-2);
}
.pagination .page-link:hover { color: var(--p-brand); background: var(--p-grad-soft); }
.pagination .page-item.active .page-link { background-image: var(--p-grad); color: #fff; }
body.theme-dark .pagination .page-link { background: #232c3e; color: #c3cbd8; }

/* ── Botón outline primary ───────────────────────────────────────── */
.btn-outline-primary {
    border: 1px solid rgba(30,116,253,.4) !important;
    color: var(--p-brand) !important;
}
.btn-outline-primary:hover {
    background: var(--p-grad-soft) !important;
    border-color: var(--p-brand) !important;
}

/* ── Formularios con icono (icon-input / search-form-2) ──────────── */
.icon-input > i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    font-size: 16px;
    pointer-events: none;
}
.icon-input > input, .icon-input > .form-control { padding-left: 42px; }
.search-form-2 input, .search-form-2 .form-control { border-radius: 999px !important; }

/* ── Chips / badges de filtro (retos, convocatorias) ─────────────── */
.filter-chip {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}
.filter-chip.active, .filter-chip.bg-current {
    background-image: var(--p-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -8px rgba(30,116,253,.6);
}

/* ── Modales: cabecera con borde sutil ───────────────────────────── */
.modal-header { border-bottom: 1px solid var(--p-border) !important; }

/* ── Paneles custom (comunidad / convocatorias) en modo oscuro ───── */
body.theme-dark .community-panel-card,
body.theme-dark .conv-panel-card,
body.theme-dark .conv-hero-card,
body.theme-dark .community-hero-card {
    background: var(--p-surface) !important;
    border-color: #2a3346 !important;
}
body.theme-dark .community-invite-card { border-bottom-color: #2a3346 !important; }

/* ── Retos: tarjeta de creación / detalle ────────────────────────── */
.reto-create-card {
    background: var(--p-surface-2);
    border: 1px solid var(--p-border);
    border-radius: 16px;
    padding: 14px;
}
body.theme-dark .reto-create-card { background: #1b2130; border-color: #2a3346; }
.reto-create-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: .82rem;
    color: var(--p-brand);
    list-style: none;
}
.reto-create-summary::-webkit-details-marker { display: none; }
.reto-create-summary:hover { color: var(--p-brand-2); }

/* ── Encabezados de sección dentro de tarjetas ───────────────────── */
.card .card-body h4.fw-700, .card .card-body h5.fw-700 { letter-spacing: -0.015em; }

/* ── Tarjetas del feed: separación de texto menos dispersa ───────── */
.pub-card .card-body p { line-height: 1.6; }

/* ── Scroll suave del panel derecho ──────────────────────────────── */
.middle-sidebar-right-content { scrollbar-width: thin; }

/* ── Ajustes finales móvil ───────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-hero .page-hero-icon { width: 42px; height: 42px; font-size: 19px; border-radius: 12px; }
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table td { border: 0 !important; padding: 8px 12px; }
    .table tr { border: 1px solid var(--p-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH V4 — Higiene de espaciado y layout "prolijo"
   Ritmo vertical consistente, aire en tarjetas y formularios, y sin
   superposiciones ni controles pegados.
   ═══════════════════════════════════════════════════════════════════ */

/* Contenedor principal: NUNCA queda debajo del header fijo ni sobre el dock */
.main-content { padding-top: 104px !important; }
.middle-sidebar-bottom { padding-top: 0 !important; }
.middle-sidebar-left { padding-bottom: 28px; }
@media (max-width: 991.98px) {
    .main-content { padding-top: 82px !important; }
    .middle-sidebar-left { padding-bottom: 96px; } /* espacio para el dock */
}
@media (max-width: 575.98px) {
    .main-content { padding-top: 76px !important; }
    .middle-sidebar-left { padding-bottom: 88px; }
}

/* Ritmo vertical: toda tarjeta queda separada de la siguiente */
.card { margin-bottom: 1rem; }
.middle-sidebar-left > .row > [class*="col-"] > .card,
.middle-sidebar-left > .row > .col-xl-8 > .card { margin-bottom: 1.1rem; }

/* Contenido de tarjeta con aire uniforme */
.card-body { padding: 1.25rem 1.5rem; }
@media (max-width: 575.98px) { .card-body { padding: 1rem 1.15rem; } }

/* Formularios: grupos siempre separados */
.form-group { margin-bottom: 1rem; }

/* Campos de formulario: altura y aire interior consistentes */
.form-control, input.form-control, select.form-control, textarea.form-control {
    min-height: 46px;
    padding: .65rem .9rem;
}
.form-control-sm { min-height: 36px; }
textarea.form-control { min-height: 92px; }
.icon-input .form-control { padding-left: 2.6rem; }

/* Listas: elementos con aire */
.list-group-item { padding: .8rem 1rem; }
.list-group-item + .list-group-item { border-top-width: 1px; }

/* Tabs: separación entre pestañas */
.nav-tabs .nav-item { margin-right: .25rem; }
.nav-tabs .nav-link { padding: .6rem 1rem; }

/* Modales: aire interior y pie sin controles pegados */
.modal-body { padding: 1.5rem; }
.modal-footer { gap: .5rem; padding: 1rem 1.5rem; }
.modal-header { padding: 1.1rem 1.5rem; }

/* Desplegables: filas con aire */
.dropdown-menu .dropdown-item { padding: .6rem 1rem; }

/* Página: separación entre el hero y el contenido siguiente */
.page-hero { margin-bottom: 1.25rem; }

/* Filas de acciones con botones: mínimo garantizado entre elementos.
   (Solo se aplica a grupos que NO declaran ya un gap propio.) */
.d-flex.gap-1 { gap: .375rem !important; }
.d-flex.gap-2 { gap: .5rem !important; }
.d-flex.gap-3 { gap: 1rem !important; }

/* Composer del feed: separación entre el campo y las acciones */
#compositor .composer-quick-actions { margin-top: .75rem; }

/* Evitar que textos queden pegados dentro de tarjetas */
.card-body p:last-child { margin-bottom: 0; }
.card-body > * + * { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   POLISH V5 — Correcciones de regresión + layout "drásticamente limpio"
   Iconos del dock visibles, más aire entre cajas, header y dock
   adaptativos en tablet/móvil, compositor con acciones tipo píldora.
   ═══════════════════════════════════════════════════════════════════ */

/* ── FIX crítico: iconos del dock móvil blancos sobre fondo blanco ── */
.app-footer .nav-content-bttn i {
    color: #5b6b83 !important;
}
body.theme-dark .app-footer .nav-content-bttn i { color: #b6c2d4 !important; }
.app-footer .nav-content-bttn.active i {
    color: var(--p-brand) !important;
}
body.theme-dark .app-footer .nav-content-bttn.active i { color: #6ea8ff !important; }

/* ── Más aire entre cajas (ritmo vertical reforzado) ──────────────── */
.card { margin-bottom: 1.25rem; }
.card.mb-3 { margin-bottom: 1.25rem !important; }
.pub-card, .feed-item { margin-bottom: 1.5rem !important; }
.middle-sidebar-left > .row > [class*="col-"] > .card,
.middle-sidebar-left > .row > .col-xl-8 > .card,
.row > [class*="col-"] > .card { margin-bottom: 1.5rem; }

/* ── Composer: acciones tipo píldora, separadas y visibles ────────── */
#compositor .composer-quick-actions { gap: .5rem !important; }
#compositor .composer-action {
    border-radius: 999px !important;
    background: var(--p-surface-2) !important;
    border: 1px solid var(--p-border) !important;
    padding: 7px 14px !important;
}
#compositor .composer-action:hover {
    background: var(--p-grad-soft) !important;
    border-color: rgba(30,116,253,.3) !important;
}
body.theme-dark #compositor .composer-action { background: #232c3e !important; border-color: #2f3a50 !important; }

/* ── Header limpio en tablet/móvil: el dock reemplaza los iconos ──── */
@media (max-width: 991.98px) {
    .nav-header .center-menu-icon { display: none !important; }
    .nav-header .header-search input { width: 200px !important; }
}
@media (max-width: 767.98px) {
    .nav-header .header-search { display: none !important; }
}

/* ── Panel de contactos: solo en escritorio (evita solaparse) ─────── */
@media (max-width: 991.98px) {
    .right-chat { display: none !important; }
}

/* ── Separación entre secciones principales ───────────────────────── */
.page-hero { margin-bottom: 1.5rem !important; }

/* ── Stats y filas de información con más aire ─────────────────────── */
.stat-value { margin-bottom: .25rem; }
.stat-label { display: block; }

/* ── Tabs / chips: más aire entre elementos ────────────────────────── */
.nav-tabs { gap: .25rem; }
.filter-chip, .conv-tipo-btn, .btn-group-toggle .btn { margin: 0 .15rem .35rem 0; }

/* ── Evitar overflow horizontal por paneles fijos ──────────────────── */
body { overflow-x: hidden; }

/* ── Elementos de lista con separación interna ─────────────────────── */
.list-group-item { margin-bottom: .35rem; border-radius: 12px !important; border: 1px solid var(--p-border) !important; }

/* ═══════════════════════════════════════════════════════════════════
   POLISH V7 — Formularios "icono + input" estilo Android (Material)
   Icono al inicio de cada campo según su atributo `name` (SVG
   embebido). Respeta los wrappers `.icon-input` del tema (login,
   registro) y excluye campos pequeños / inline / de chat.
   ═══════════════════════════════════════════════════════════════════ */

/* Iconos reutilizables (color gris pizarra, visible claro y oscuro) */
:root {
    --p-ico-mail:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
    --p-ico-lock:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --p-ico-user:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --p-ico-phone:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    --p-ico-link:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --p-ico-pin:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --p-ico-case:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    --p-ico-cal:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    --p-ico-edit:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    --p-ico-msg:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --p-ico-tag:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
    --p-ico-search:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    --p-ico-dollar:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
    --p-ico-hash:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E");
    --p-ico-at:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E");
    --p-ico-globe:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
    --p-ico-music:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
    --p-ico-film:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='2.18' ry='2.18'/%3E%3Cline x1='7' y1='2' x2='7' y2='22'/%3E%3Cline x1='17' y1='2' x2='17' y2='22'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='2' y1='7' x2='7' y2='7'/%3E%3Cline x1='2' y1='17' x2='7' y2='17'/%3E%3Cline x1='17' y1='17' x2='22' y2='17'/%3E%3Cline x1='17' y1='7' x2='22' y2='7'/%3E%3C/svg%3E");
    --p-ico-cam:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    --p-ico-clock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    --p-ico-layers:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
    --p-ico-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
    --p-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Campos con icono: hueco izquierdo + fondo consistente */
input.form-control[name="email"], input.form-control[name="login"], input.form-control[name="correo"],
input.form-control[name="password"], input.form-control[name="password1"], input.form-control[name="password2"], input.form-control[name="password_confirm"], input.form-control[name="nueva_password"],
input.form-control[name="username"], input.form-control[name="usuario"],
input.form-control[name="first_name"], input.form-control[name="last_name"], input.form-control[name="nombre"], input.form-control[name="name"], input.form-control[name="nombre_artistico"],
input.form-control[name="titulo"], input.form-control[name="tema"], input.form-control[name="titulo_cancion"], input.form-control[name="nombre_cancion"],
input.form-control[name="cancion"],
input.form-control[name="sitio_web"], input.form-control[name="web"], input.form-control[name="url"], input.form-control[name="url_externo"], input.form-control[name="enlace_externo"], input.form-control[name="enlace_url"], input.form-control[name="link"],
input.form-control[name="pais"], input.form-control[name="provincia"], input.form-control[name="canton"], input.form-control[name="parroquia"], input.form-control[name="ciudad"], input.form-control[name="ubicacion"], input.form-control[name="localidad"],
input.form-control[name="ocupacion"], input.form-control[name="rol_buscado"],
input.form-control[name="disciplina"],
input.form-control[name="estilo_colaboracion"],
input.form-control[name="telefono"], input.form-control[name="celular"], input.form-control[name="whatsapp"],
input.form-control[name="fecha"], input.form-control[name="fecha_limite"], input.form-control[name="deadline_colaboracion"], input.form-control[name="deadline"], input.form-control[name="fecha_evento"],
input.form-control[name="hashtag"],
input.form-control[name="precio"], input.form-control[name="presupuesto"], input.form-control[name="costo"], input.form-control[name="monto"],
input.form-control[name="q"], input.form-control[name="buscar"], input.form-control[name="search"], input.form-control[name="busqueda"],
input.form-control[name="instagram"], input.form-control[name="tiktok"], input.form-control[name="youtube"], input.form-control[name="facebook"], input.form-control[name="x"], input.form-control[name="spotify"], input.form-control[name="twitch"], input.form-control[name="soundcloud"],
input.form-control[name="portada"], input.form-control[name="imagen"], input.form-control[name="foto"], input.form-control[name="logo"], input.form-control[name="avatar"], input.form-control[name="banner"],
input.form-control[name="video"], input.form-control[name="archivo"], input.form-control[name="video_url"],
input.form-control[name="duracion"], input.form-control[name="hora"],
input.form-control[name="contenido"]:not(.comment-input):not(.js-mention-inline):not(.js-mention-input):not(.group-inline-input):not(.form-control-sm):not(.border-0),
textarea.form-control[name="bio"], textarea.form-control[name="descripcion"], textarea.form-control[name="contenido"]:not(.border-0), textarea.form-control[name="texto"], textarea.form-control[name="mensaje"], textarea.form-control[name="sobre_mi"], textarea.form-control[name="requisitos"], textarea.form-control[name="observacion"], textarea.form-control[name="comentario"],
select.form-control[name="disciplina"], select.form-control[name="tipo"], select.form-control[name="genero"], select.form-control[name="pais"], select.form-control[name="provincia"], select.form-control[name="canton"], select.form-control[name="ciudad"], select.form-control[name="privacidad"], select.form-control[name="rol"], select.form-control[name="estado"], select.form-control[name="categoria"], select.form-control[name="visibilidad"] {
    background-color: var(--p-surface);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 18px 18px;
    padding-left: 52px !important;
    border: 1.5px solid var(--p-border) !important;
    border-radius: 12px !important;
}

/* Textareas: icono arriba a la izquierda */
textarea.form-control[name="bio"], textarea.form-control[name="descripcion"], textarea.form-control[name="contenido"]:not(.border-0), textarea.form-control[name="texto"], textarea.form-control[name="mensaje"], textarea.form-control[name="sobre_mi"], textarea.form-control[name="requisitos"], textarea.form-control[name="observacion"], textarea.form-control[name="comentario"] {
    background-position: 15px 15px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

/* Selects: flecha propia a la derecha (reemplaza la nativa) */
select.form-control[name="disciplina"], select.form-control[name="tipo"], select.form-control[name="genero"], select.form-control[name="pais"], select.form-control[name="provincia"], select.form-control[name="canton"], select.form-control[name="ciudad"], select.form-control[name="privacidad"], select.form-control[name="rol"], select.form-control[name="estado"], select.form-control[name="categoria"], select.form-control[name="visibilidad"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px !important;
    cursor: pointer;
}

/* ── Asignación de iconos ─────────────────────────────────────────── */
input.form-control[name="email"], input.form-control[name="login"], input.form-control[name="correo"] { background-image: var(--p-ico-mail); }
input.form-control[name="password"], input.form-control[name="password1"], input.form-control[name="password2"], input.form-control[name="password_confirm"], input.form-control[name="nueva_password"] { background-image: var(--p-ico-lock); }
input.form-control[name="username"], input.form-control[name="usuario"], input.form-control[name="first_name"], input.form-control[name="last_name"], input.form-control[name="nombre"], input.form-control[name="name"], input.form-control[name="nombre_artistico"] { background-image: var(--p-ico-user); }
input.form-control[name="titulo"], input.form-control[name="tema"] { background-image: var(--p-ico-edit); }
input.form-control[name="titulo_cancion"], input.form-control[name="nombre_cancion"], input.form-control[name="cancion"] { background-image: var(--p-ico-music); }
input.form-control[name="sitio_web"], input.form-control[name="web"], input.form-control[name="url"], input.form-control[name="url_externo"], input.form-control[name="enlace_externo"], input.form-control[name="enlace_url"], input.form-control[name="link"] { background-image: var(--p-ico-link); }
input.form-control[name="pais"], input.form-control[name="provincia"], input.form-control[name="canton"], input.form-control[name="parroquia"], input.form-control[name="ciudad"], input.form-control[name="ubicacion"], input.form-control[name="localidad"] { background-image: var(--p-ico-pin); }
input.form-control[name="ocupacion"], input.form-control[name="rol_buscado"] { background-image: var(--p-ico-case); }
input.form-control[name="disciplina"] { background-image: var(--p-ico-layers); }
input.form-control[name="estilo_colaboracion"] { background-image: var(--p-ico-sliders); }
input.form-control[name="telefono"], input.form-control[name="celular"], input.form-control[name="whatsapp"] { background-image: var(--p-ico-phone); }
input.form-control[name="fecha"], input.form-control[name="fecha_limite"], input.form-control[name="deadline_colaboracion"], input.form-control[name="deadline"], input.form-control[name="fecha_evento"] { background-image: var(--p-ico-cal); }
input.form-control[name="hashtag"] { background-image: var(--p-ico-hash); }
input.form-control[name="precio"], input.form-control[name="presupuesto"], input.form-control[name="costo"], input.form-control[name="monto"] { background-image: var(--p-ico-dollar); }
input.form-control[name="q"], input.form-control[name="buscar"], input.form-control[name="search"], input.form-control[name="busqueda"] { background-image: var(--p-ico-search); }
input.form-control[name="instagram"], input.form-control[name="tiktok"], input.form-control[name="youtube"], input.form-control[name="facebook"], input.form-control[name="x"], input.form-control[name="spotify"], input.form-control[name="twitch"], input.form-control[name="soundcloud"] { background-image: var(--p-ico-at); }
input.form-control[name="portada"], input.form-control[name="imagen"], input.form-control[name="foto"], input.form-control[name="logo"], input.form-control[name="avatar"], input.form-control[name="banner"] { background-image: var(--p-ico-cam); }
input.form-control[name="video"], input.form-control[name="archivo"], input.form-control[name="video_url"] { background-image: var(--p-ico-film); }
input.form-control[name="duracion"], input.form-control[name="hora"] { background-image: var(--p-ico-clock); }
input.form-control[name="contenido"]:not(.comment-input):not(.js-mention-inline):not(.js-mention-input):not(.group-inline-input):not(.form-control-sm):not(.border-0) { background-image: var(--p-ico-msg); }
textarea.form-control[name="bio"], textarea.form-control[name="descripcion"], textarea.form-control[name="contenido"]:not(.border-0), textarea.form-control[name="texto"], textarea.form-control[name="mensaje"], textarea.form-control[name="sobre_mi"], textarea.form-control[name="requisitos"], textarea.form-control[name="observacion"], textarea.form-control[name="comentario"] { background-image: var(--p-ico-msg); }

/* Selects: icono izquierda + flecha derecha */
select.form-control[name="disciplina"] { background-image: var(--p-ico-layers), var(--p-ico-chevron); background-position: 15px center, right 15px center; }
select.form-control[name="tipo"], select.form-control[name="genero"], select.form-control[name="categoria"], select.form-control[name="privacidad"], select.form-control[name="rol"], select.form-control[name="estado"], select.form-control[name="visibilidad"] { background-image: var(--p-ico-tag), var(--p-ico-chevron); background-position: 15px center, right 15px center; }
select.form-control[name="pais"] { background-image: var(--p-ico-globe), var(--p-ico-chevron); background-position: 15px center, right 15px center; }
select.form-control[name="provincia"], select.form-control[name="canton"], select.form-control[name="ciudad"] { background-image: var(--p-ico-pin), var(--p-ico-chevron); background-position: 15px center, right 15px center; }

/* ── Formsets Django (redes-0-url, contenidos-0-titulo, ...) ───────── */
input.form-control[name$="-url"], input.form-control[name$="-url_externo"], input.form-control[name$="-enlace_externo"] {
    background-image: var(--p-ico-link);
    background-repeat: no-repeat; background-position: 15px center; background-size: 18px 18px;
    padding-left: 44px !important;
}
input.form-control[name$="-titulo"], input.form-control[name$="-tema"] {
    background-image: var(--p-ico-edit);
    background-repeat: no-repeat; background-position: 15px center; background-size: 18px 18px;
    padding-left: 44px !important;
}
input.form-control[name$="-archivo"], input.form-control[name$="-video"] {
    background-image: var(--p-ico-film);
    background-repeat: no-repeat; background-position: 15px center; background-size: 18px 18px;
    padding-left: 44px !important;
}
input.form-control[name$="-imagen"], input.form-control[name$="-portada"], input.form-control[name$="-foto"] {
    background-image: var(--p-ico-cam);
    background-repeat: no-repeat; background-position: 15px center; background-size: 18px 18px;
    padding-left: 44px !important;
}
textarea.form-control[name$="-descripcion"], input.form-control[name$="-descripcion"] {
    background-image: var(--p-ico-msg);
    background-repeat: no-repeat; background-position: 15px center; background-size: 18px 18px;
    padding-left: 44px !important;
}
textarea.form-control[name$="-bio"] {
    background-image: var(--p-ico-msg);
    background-repeat: no-repeat; background-position: 15px 15px; background-size: 18px 18px;
    padding-left: 44px !important; padding-top: 13px;
}

/* ── Refinamiento de los campos del tema (auth: icon-input) ────────── */
input.style2-input, select.style2-input {
    height: 54px !important;
    line-height: 54px !important;
    border: 1.5px solid var(--p-border) !important;
    border-radius: 14px !important;
    background-color: var(--p-surface) !important;
}
body.theme-dark input.style2-input, body.theme-dark select.style2-input,
body.theme-dark input.form-control, body.theme-dark select.form-control {
    background-color: #141a26 !important;
    border-color: #2f3a50 !important;
    color: var(--p-text) !important;
}
.icon-input i { color: var(--p-text-3); font-size: 16px; }
.icon-input input { padding-left: 35px !important; }

/* ── Neutralizar iconos duplicados (campos del tema / pequeños) ────── */
.icon-input input, .icon-input select, .icon-input textarea { background-image: none !important; }
.header-search input, .search-form-2 input,
#compositor textarea, .composer-textarea,
input.form-control-sm, select.form-control-sm,
input.comment-input, input.js-mention-input, input.js-mention-inline, input.group-inline-input,
input.il-title, input.invite-username-input, input.user-selector-input, input.retos-control-field,
.chat-footer input, .group-chat-input { background-image: none !important; padding-left: 12px !important; }

/* ═══════════════════════════════════════════════════════════════════
   POLISH V8 — Formularios Material "outlined" (etiqueta flotante)
   Campos estilo Android/Google: icono al inicio, etiqueta que flota
   dentro del borde al enfocar/llenar, subida de imágenes tipo "drop"
   y portada centrada y completa. Se aplica a contenedores con la clase
   `.p-form-material` (scoped para no romper otros formularios).
   ═══════════════════════════════════════════════════════════════════ */

/* Contenedor del campo (label + input juntos) */
.p-form-material :where(div, [class*="col-"]):has(> label + input:where(:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]))),
.p-form-material :where(div, [class*="col-"]):has(> label + select),
.p-form-material :where(div, [class*="col-"]):has(> label + textarea) {
    position: relative;
    margin-bottom: 1.1rem;
}

/* El campo: estilo outlined */
.p-form-material input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.p-form-material select,
.p-form-material textarea {
    width: 100%;
    height: auto !important;
    line-height: normal !important;
    min-height: 58px;
    padding: 26px 14px 8px 52px !important;
    border: 1.5px solid var(--p-border) !important;
    border-radius: 14px !important;
    background-color: var(--p-surface) !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--p-text);
    transition: border-color .18s var(--p-ease), box-shadow .18s var(--p-ease);
}
.p-form-material textarea { padding-top: 30px !important; resize: vertical; }
.p-form-material select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 34px !important; cursor: pointer; }

/* Foco: borde de marca + anillo suave */
.p-form-material input:focus, .p-form-material select:focus, .p-form-material textarea:focus {
    border-color: var(--p-brand) !important;
    box-shadow: 0 0 0 4px rgba(30,116,253,.12) !important;
    outline: none;
}

/* Etiqueta: hace de placeholder y flota al enfocar / llenar */
.p-form-material label:has(+ input:where(:not([type="file"]):not([type="checkbox"]):not([type="radio"]))),
.p-form-material label:has(+ select),
.p-form-material label:has(+ textarea) {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--p-text-3) !important;
    background: transparent;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    transition: all .16s var(--p-ease);
}
.p-form-material label:has(+ textarea) { top: 32px !important; }

/* Estado flotado (focus o con valor; en selects siempre flotada) */
.p-form-material label:has(+ input:focus),
.p-form-material label:has(+ input:not(:placeholder-shown)),
.p-form-material label:has(+ select),
.p-form-material label:has(+ textarea:focus),
.p-form-material label:has(+ textarea:not(:placeholder-shown)) {
    top: 0 !important;
    left: 13px !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    color: var(--p-brand) !important;
    background: var(--p-surface) !important;
    padding: 0 6px !important;
    border-radius: 6px;
}

/* Las etiquetas flotantes reemplazan a los placeholders (se montaban) */
/* Nota: solo ::placeholder — mezclar prefijos de otros navegadores
   en una lista invalida toda la regla. */
.p-form-material ::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Estado de error (JS añade .is-invalid al campo con errores) */
.p-form-material .is-invalid { border-color: var(--p-danger) !important; box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important; }
.p-form-material .text-danger { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.p-form-material .text-danger::before { content: "⚠"; }

/* Modo oscuro */
body.theme-dark .p-form-material input:not([type="file"]),
body.theme-dark .p-form-material select,
body.theme-dark .p-form-material textarea { background-color: #141a26 !important; border-color: #2f3a50 !important; color: var(--p-text) !important; }
body.theme-dark .p-form-material label:has(+ input:focus),
body.theme-dark .p-form-material label:has(+ input:not(:placeholder-shown)),
body.theme-dark .p-form-material label:has(+ select),
body.theme-dark .p-form-material label:has(+ textarea:focus),
body.theme-dark .p-form-material label:has(+ textarea:not(:placeholder-shown)) { background: #141a26; }

/* ── Carga de imágenes: área tipo "drop" ───────────────────────────── */
.p-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    border: 1.5px dashed var(--p-border);
    border-radius: 14px;
    background: var(--p-surface-2);
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.p-upload:hover { border-color: var(--p-brand); background: var(--p-grad-soft); }
.p-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.p-upload-icon {
    flex: 0 0 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-grad-soft); color: var(--p-brand); font-size: 16px;
}
.p-upload-label { font-size: 13px; font-weight: 600; color: var(--p-text-2); }
.p-upload-name { margin-left: auto; font-size: 11px; color: var(--p-text-3); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* File inputs sueltos (formsets / resto del sitio): botón de marca */
input[type="file"].form-control {
    color: transparent;
    padding: 7px 10px !important;
    height: auto !important;
    min-height: 52px;
    display: flex;
    align-items: center;
}
input[type="file"].form-control::file-selector-button {
    border: 1.5px solid var(--p-brand);
    background: var(--p-grad-soft);
    color: var(--p-brand);
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-right: 10px;
    transition: background .18s, transform .18s;
}
input[type="file"].form-control:hover::file-selector-button { background: rgba(30,116,253,.18); }
body.theme-dark input[type="file"].form-control { background-color: #141a26 !important; }

/* ── Portada de perfil: centrada y más alta (se ve completa) ───────── */
.bg-image-center { background-position: center !important; }
.p-cover { height: 240px; background-position: center; background-size: cover; }
@media (max-width: 575.98px) { .p-cover { height: 170px; } }

/* Placeholders más legibles en todo el sitio */
.form-control::placeholder, .style2-input::placeholder, textarea::placeholder { color: var(--p-text-3); font-weight: 500; opacity: 1; }

/* Más aire entre icono y texto en campos de formsets (icono 18px en 15px) */
input.form-control[name$="-url"], input.form-control[name$="-url_externo"], input.form-control[name$="-enlace_externo"],
input.form-control[name$="-titulo"], input.form-control[name$="-tema"],
input.form-control[name$="-archivo"], input.form-control[name$="-video"],
input.form-control[name$="-imagen"], input.form-control[name$="-portada"], input.form-control[name$="-foto"],
textarea.form-control[name$="-descripcion"], input.form-control[name$="-descripcion"],
textarea.form-control[name$="-bio"] { padding-left: 52px !important; }