/* ===============================================================
Anfitrionas AQP — capa de correcciones de interfaz
Se carga despues de app.css y theme.css, asi que manda esta.
Bloques: 1 sello verificado · 2 avisos · 3 subida del chat
4 formularios · 5 botones y contraste · 6 menu
7 movil
=============================================================== */
:root{
--az:#1d7fe0; /* azul de marca: sello, bordes, acentos */
/* Relleno de los botones: mas oscuro a proposito. Con #1d7fe0 el texto
blanco se quedaba en 4,0:1 y el minimo para 13px es 4,5:1. */
--az-btn:#1268c8;
--az-osc:#155fa8;
--az-suave:#e8f2fd;
--ok-v:#1c8a55;
--err-v:#c0392f;
}
html[data-theme="dark"]{
--az:#3d9bf0;
--az-btn:#2a7fd4;
--az-osc:#7cc0ff;
--az-suave:#132840;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Varias reglas ponian display:grid/flex y anulaban el atributo hidden:
el panel de emojis se quedaba abierto tapando la conversacion. */
[hidden]{display:none!important}
/* ---------------------------------------------------------------
1. Sello verificado — check azul plano, sin oro ni anillos
--------------------------------------------------------------- */
.v-seal{
width:19px;height:19px;margin:0 4px;padding:0;border:0;border-radius:50%;
background:var(--az);color:#fff;box-shadow:none;
display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;
cursor:pointer;transition:transform .15s ease,background .15s ease;
}
.v-seal:hover{background:var(--az-osc);transform:scale(1.08)}
.v-seal.sm{width:16px;height:16px;vertical-align:-2px}
.v-seal.vip{background:#7b52d3;box-shadow:none}
.v-seal.vip:hover{background:#6740bd}
.v-seal svg{width:11px;height:11px;display:block}
.v-seal.sm svg{width:10px;height:10px}
.v-seal svg circle{display:none} /* fuera el aro: solo el check */
.v-seal svg path{fill:none;stroke:#fff;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.v-seal-tag{
background:#1f2937;color:#fff;font:600 11px/1 Manrope,system-ui,sans-serif;
box-shadow:0 6px 16px rgba(15,23,42,.28);
}
.v-seal-tag:after{border-top-color:#1f2937}
/* ---------------------------------------------------------------
2. Avisos — campana con contador, ya no un emoji suelto
--------------------------------------------------------------- */
.notif-fab{
position:fixed;top:12px;right:16px;z-index:60;
display:inline-flex;align-items:center;gap:7px;
border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);
border-radius:999px;padding:7px 14px 7px 10px;cursor:pointer;
font:700 12.5px Manrope,system-ui,sans-serif;box-shadow:0 6px 18px rgba(15,23,42,.12);
transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.notif-fab:hover{transform:translateY(-1px);border-color:var(--az)}
.notif-fab-ico{display:inline-flex;width:18px;height:18px}
.notif-fab-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notif-fab.on{border-color:var(--az);background:var(--az-suave);color:var(--az-osc)}
.notif-fab.on .notif-fab-ico svg{stroke:var(--az)}
.notif-fab.ask{border-color:#d99a2b}
.notif-fab.ask .notif-fab-ico{animation:campana 2.6s ease-in-out infinite}
@keyframes campana{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}94%{transform:rotate(10deg)}}
.notif-fab-n{
min-width:18px;height:18px;padding:0 5px;border-radius:999px;
background:#e0245e;color:#fff;font:800 10px/18px Manrope,sans-serif;text-align:center;
}
/* contador del menu, mismo lenguaje */
.nav-count{background:#e0245e;font-weight:800}
/* ---------------------------------------------------------------
3. Subida del chat — cola con porcentaje
--------------------------------------------------------------- */
.chat-file{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:12px;cursor:pointer;
border:1px solid var(--line);background:var(--card);color:var(--muted);
transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.chat-file:hover{border-color:var(--az);color:var(--az);background:var(--az-suave)}
.chat-file svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.up-queue{
margin:0 14px 14px;padding:12px 14px;border:1px solid var(--line);
border-radius:14px;background:var(--bg2,#f6f7f9);
}
.up-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.up-title{font-size:13px;flex:0 0 auto}
.up-global{margin-left:auto;font:800 12px Manrope,sans-serif;color:var(--az-osc);font-variant-numeric:tabular-nums}
.up-cancel{
appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);
border-radius:999px;padding:4px 11px;font:700 11px Manrope,sans-serif;cursor:pointer;
}
.up-cancel:hover{border-color:var(--err-v);color:var(--err-v)}
.up-bar{height:7px;border-radius:999px;background:rgba(120,132,150,.22);overflow:hidden}
.up-bar i{
display:block;height:100%;width:0;border-radius:999px;
background:linear-gradient(90deg,var(--az),#59b0f5);
transition:width .18s linear;
}
.up-bar-global{height:9px}
.up-list{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:9px;max-height:210px;overflow-y:auto}
.up-item-top{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.up-name{
font:600 12px Manrope,sans-serif;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto;
}
.up-pct{font:800 12px Manrope,sans-serif;color:var(--az-osc);flex:0 0 auto;font-variant-numeric:tabular-nums}
.up-note{color:var(--muted);margin-top:4px;font-size:11px}
.up-item.is-ok .up-pct{color:var(--ok-v)}
.up-item.is-ok .up-bar i{background:var(--ok-v)}
.up-item.is-err .up-pct{color:var(--err-v)}
.up-item.is-err .up-bar i{background:var(--err-v);width:100%!important}
.up-item.is-wait .up-pct{color:var(--muted);font-weight:600}
/* ---------------------------------------------------------------
4. Formularios — rejilla que se llena sola, no una columna larga
--------------------------------------------------------------- */
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* Campos sueltos entre rejillas: que tambien se acomoden en columnas */
form .grid.g2>.fld,
form .grid.g2>div{min-width:0}
/* Ancho util: las fichas de formulario dejaban media pantalla vacia */
@media (min-width:1180px){
.form-wide,
.card.form-wide{max-width:1080px;margin-left:auto;margin-right:auto}
form .grid.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
/* Etiquetas y campos mas compactos: menos scroll en formularios largos */
label.f{margin:10px 0 5px;font-size:11.5px}
form .fld{min-width:0}
input,select,textarea{min-width:0}
/* Campo de archivo decente en vez del control gris del navegador */
input[type=file]{
padding:9px 11px;border:1px dashed var(--line);border-radius:12px;
background:var(--bg2,#f6f7f9);color:var(--muted);font-size:12px;cursor:pointer;width:100%;
}
input[type=file]:hover{border-color:var(--az);color:var(--az)}
input[type=file]::file-selector-button{
appearance:none;border:0;border-radius:999px;padding:6px 13px;margin-right:11px;cursor:pointer;
background:var(--az);color:#fff;font:700 12px Manrope,sans-serif;
}
input[type=file]::file-selector-button:hover{background:var(--az-osc)}
/* Filas de acciones al pie del formulario, siempre juntas */
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
/* ---------------------------------------------------------------
5. Botones y contraste
--------------------------------------------------------------- */
/* El degradado cian dejaba el texto casi ilegible. Azul plano, texto blanco.
OJO con la especificidad: el tema define `html[data-theme=...] a{color:...}`,
que gana a un `.btn-gold` suelto y dejaba el texto oscuro sobre azul. Por eso
cada regla lleva delante a./button. */
a.btn-gold,button.btn-gold,a.btn-primary,button.btn-primary,
html[data-theme="light"] a.btn-gold,html[data-theme="dark"] a.btn-gold{
background:var(--az-btn);color:#fff;border-color:var(--az-btn);
}
a.btn-gold:hover,button.btn-gold:hover,a.btn-primary:hover,button.btn-primary:hover,
html[data-theme="light"] a.btn-gold:hover{background:var(--az-osc);border-color:var(--az-osc);color:#fff}
a.btn-wine,button.btn-wine,
html[data-theme="light"] a.btn-wine,html[data-theme="dark"] a.btn-wine{background:#8e3d86;border-color:#8e3d86;color:#fff}
a.btn-wine:hover,button.btn-wine:hover,html[data-theme="light"] a.btn-wine:hover{background:#752f6e;border-color:#752f6e;color:#fff}
a.btn-ok,button.btn-ok,
html[data-theme="light"] a.btn-ok,html[data-theme="dark"] a.btn-ok{background:var(--ok-v);border-color:var(--ok-v);color:#fff}
a.btn-ok:hover,button.btn-ok:hover{background:#166b42;border-color:#166b42;color:#fff}
a.btn-bad,button.btn-bad{background:var(--err-v);border-color:var(--err-v);color:#fff}
html:not([data-theme="dark"]) a.btn-ghost,
html:not([data-theme="dark"]) button.btn-ghost{background:#fff;border-color:#c3cad4;color:#26313d}
html:not([data-theme="dark"]) a.btn-ghost:hover,
html:not([data-theme="dark"]) button.btn-ghost:hover{background:#f2f6fa;border-color:var(--az);color:var(--az-osc)}
html[data-theme="dark"] a.btn-ghost,
html[data-theme="dark"] button.btn-ghost{color:#f2f7ff}
/* Lo mismo con los enlaces que hacen de chip o de pestaña */
a.badge,a.chip{color:inherit}
.perfil-tabs button.on,.perfil-tabs button.on span{color:#fff}
/* Foco visible en todo lo pulsable: hacia falta para teclado y lectores */
.btn:focus-visible,.act-btn:focus-visible,.nav a:focus-visible,
.notif-fab:focus-visible,.v-seal:focus-visible,.chat-file:focus-within,
input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:3px solid rgba(29,127,224,.45);outline-offset:2px;
}
/* El aviso .hint-box estaba fijado en claro; en modo oscuro el enlace de
dentro salia azul palido sobre gris claro y no se leia. */
.hint-box a{color:var(--az-osc);font-weight:700;text-decoration:underline}
.hint-box a:hover{color:var(--az)}
html[data-theme="dark"] .hint-box{background:#1a2432;border-color:#33455c;color:#e6edf5}
html[data-theme="dark"] .hint-box a{color:#8cc6ff}
html[data-theme="dark"] .privacy-box{background:#141d29;border-color:#2c3d52}
/* Texto secundario: el gris anterior no llegaba a 4.5:1 sobre blanco */
html:not([data-theme="dark"]){--muted:#4d5764}
html:not([data-theme="dark"]) .tiny,
html:not([data-theme="dark"]) .muted{color:#4d5764}
/* Logo de la portada: sobre el hero oscuro no se veia */
body.home-premium .navbarlogo .navbar-brand img,
body.home-premium .navbarlogo .navbar-brand svg{
filter:brightness(0) invert(1);opacity:.96;
}
body.home-premium .aqp-mainnav .nav-item>a{color:#eaf1f8}
body.home-premium .aqp-mainnav .nav-item>a:hover,
body.home-premium .aqp-mainnav .nav-item.active>a{color:#fff;background:rgba(255,255,255,.14);border-radius:999px}
/* Panel: el logo llegaba a 300 px dentro de una barra lateral mas estrecha,
asi que el rotulo "Panel / SPAG" se salia y pisaba las migas de la derecha. */
.side{min-width:0;overflow-x:hidden}
.side .brand{flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.side .brand .brand-logos{max-width:100%}
.side .brand .brand-logos img{max-width:100%;height:auto;max-height:40px}
.side .brand>span{min-width:0;flex:1 1 100%}
.side .brand b{font-size:17px;word-break:break-word}
.panel-mobilebar>.brand{display:none}
.crumbs{position:relative;z-index:1}
/* Menu heredado (#menug, barra oscura): las rayas del boton eran gris #888
sobre fondo #22262c, practicamente invisibles en el movil. */
#menug .navbar-toggle{
border-color:rgba(255,255,255,.55);border-radius:10px;margin:8px 10px;padding:9px 11px;
}
#menug .navbar-toggle .icon-bar{background-color:#fff;width:22px;height:2px}
#menug .navbar-toggle:hover,#menug .navbar-toggle:focus{background:rgba(255,255,255,.14)}
#menug .navbar-nav>li>a{color:#e7edf4}
#menug .navbar-nav>li>a:hover,#menug .navbar-nav>li.active>a{color:#fff;background:rgba(255,255,255,.14)}
/* Chips de pais: la bandera emoji no existe en Windows, se leia "PE" suelto */
.flag-country{
display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
border:1px solid var(--line);font:700 11px Manrope,sans-serif;color:var(--muted);
text-decoration:none;line-height:1.6;
}
.flag-country:hover{border-color:var(--az);color:var(--az-osc);background:var(--az-suave)}
.flag-country small{font-weight:800;color:var(--az-osc)}
.flag-country.off{opacity:.42}
/* ---------------------------------------------------------------
6. Menu — no debe partirse en dos lineas en escritorio
--------------------------------------------------------------- */
.topbar{gap:12px;flex-wrap:nowrap}
.nav{flex-wrap:nowrap;gap:2px}
.nav a{padding:9px 11px;font-size:12.5px;white-space:nowrap}
.nav a:hover,.nav a.on{background:var(--az-suave);color:var(--az-osc)}
.nav-toggle{
display:none;align-items:center;gap:7px;font-weight:700;
border-color:var(--line);padding:9px 13px;
}
.nav-toggle:before{
content:"";width:16px;height:11px;flex:0 0 auto;
background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,
linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat;
}
/* Por debajo de 1150 px ya no caben todos los enlaces: hamburguesa */
@media (max-width:1150px){
.topbar{flex-wrap:wrap}
.nav-toggle{display:inline-flex;margin-left:auto}
.nav{
display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;
margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:16px;
background:var(--card);box-shadow:var(--shadow);
}
.nav.open{display:flex}
.nav a{padding:12px 14px;font-size:14px;border-radius:10px}
.nav .btn{justify-content:center}
.nav-dd{width:100%}
.nav-dd-btn{width:100%;text-align:left}
.nav-dd-box{position:static;box-shadow:none;border:0;padding-left:12px}
/* El avatar de chat quedaba como una astilla suelta entre dos enlaces:
en el menu desplegado ya estan el enlace Chat y el chat flotante. */
.nav .nav-chatava{display:none}
}
/* ---------------------------------------------------------------
7. Movil
--------------------------------------------------------------- */
@media (max-width:900px){
/* Tres piezas flotantes apiladas sobre la barra inferior, sin pisarse:
barra inferior -> chat flotante -> campana de avisos. */
.chat-dock{bottom:calc(80px + env(safe-area-inset-bottom));right:14px}
.notif-fab{
top:auto;bottom:calc(152px + env(safe-area-inset-bottom));right:14px;
width:48px;height:48px;padding:0;border-radius:50%;justify-content:center;gap:0;
z-index:73;
}
.notif-fab-lab{display:none}
.notif-fab-ico,.notif-fab-ico svg{width:21px;height:21px}
.notif-fab-n{position:absolute;top:-4px;right:-4px;box-shadow:0 0 0 2px var(--card)}
/* La cabecera no debe gastar una linea entera en el boton de menu */
.topbar{padding:12px 0 8px;gap:10px}
.topbar .brand{flex:1 1 auto;min-width:0}
.topbar .brand small{font-size:10px}
.nav-toggle{flex:0 0 auto;margin-left:0}
.bottomnav{background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(15,23,42,.10)}
.bottomnav a{color:var(--muted);font-weight:600;padding:2px 0}
.bottomnav a:hover,.bottomnav a.on{color:var(--az-osc)}
.bottomnav i{background:#e0245e}
/* Objetivo tactil minimo de 44 px */
.btn,.act-btn,.nav a,.bottomnav a{min-height:44px}
.btn-sm{min-height:40px}
.up-queue{margin:0 12px 12px;padding:11px 12px}
.up-list{max-height:168px}
.chat-compose{gap:8px}
/* Los botones de accion del perfil se salian del ancho */
.meta-row{flex-wrap:wrap}
.meta-row .btn{flex:1 1 auto}
.meta-row select,.meta-row input{flex:1 1 140px;min-width:0}
}
@media (max-width:520px){
.up-head{flex-wrap:wrap}
.up-global{margin-left:0;order:3;width:100%}
.up-name{font-size:11.5px}
.grid.g2,.grid.g3{grid-template-columns:1fr}
.v-seal{width:17px;height:17px}
/* Nada debe empujar la pagina a lo ancho */
body{overflow-x:hidden}
.card,.pad{border-radius:14px}
}
/* ---------------------------------------------------------------
8. Chips de estado — el texto tenue sobre fondo oscuro no se leia
--------------------------------------------------------------- */
.badge{color:#fff;padding:4px 10px;font-size:11px}
.b-spag{background:#5b2b64;color:#fff}
.b-spal{background:#4a3253;color:#fff}
.b-ga{background:#1f5a49;color:#fff}
.b-usuario{background:#3a3340;color:#fff}
.b-ok{background:#1c7a4d;color:#fff}
.b-semi{background:#2f6ea8;color:#fff}
.b-warn{background:#96651a;color:#fff}
.b-priv{background:#4a3f7a;color:#fff}
.b-bad{background:#a83a3a;color:#fff}
.chip{color:var(--ink);border-color:var(--line);background:var(--card)}
.nx-tag{background:#3a3340;color:#fff;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700}
.nx-tag.e{background:#2f6ea8}
/* ---------------------------------------------------------------
9. Llamada a registrarse
--------------------------------------------------------------- */
.cta-registro{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
margin-top:14px;padding:14px 16px;border-radius:14px;
border:1px solid var(--az);background:var(--az-suave);
}
.cta-registro>div{flex:1 1 260px;min-width:0}
.cta-registro strong{display:block;color:var(--az-osc);font-size:14px}
.cta-registro p{margin:3px 0 0}
.cta-perfil{margin-top:12px}
/* ---------------------------------------------------------------
10. Pestañas del perfil
--------------------------------------------------------------- */
.perfil-tabs{
display:flex;gap:6px;margin:0 0 14px;padding:5px;border-radius:14px;
border:1px solid var(--line);background:var(--card);overflow-x:auto;
}
.perfil-tabs button{
appearance:none;border:0;background:transparent;cursor:pointer;
padding:10px 18px;border-radius:10px;white-space:nowrap;
font:700 13.5px Manrope,system-ui,sans-serif;color:var(--muted);
transition:background .16s ease,color .16s ease;
}
.perfil-tabs button span{
display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
background:rgba(120,132,150,.2);font-size:11px;font-weight:800;
}
.perfil-tabs button:hover{color:var(--az-osc);background:var(--az-suave)}
.perfil-tabs button.on{background:var(--az);color:#fff}
.perfil-tabs button.on span{background:rgba(255,255,255,.28);color:#fff}
.profile-gallery.grande{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.profile-gallery.grande a{height:230px}
.profile-gallery.grande a:first-child{height:230px}
.video-item video{width:100%;border-radius:12px;background:#000;max-height:340px}
/* ---------------------------------------------------------------
11. Comentarios con respuesta y me gusta
--------------------------------------------------------------- */
.com-lista{display:grid;gap:14px;margin-bottom:18px}
.com{display:flex;gap:10px;align-items:flex-start}
.com-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--bg2)}
.com-hijo .com-ava{width:30px;height:30px}
.com-cuerpo{flex:1 1 auto;min-width:0}
.com-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.com-cab a{font-weight:700;font-size:13.5px}
.com-fecha{color:var(--muted)}
.com-txt{
margin-top:4px;padding:9px 13px;border-radius:4px 14px 14px 14px;
background:var(--bg2,#f1f3f6);color:var(--ink);font-size:14px;line-height:1.5;
overflow-wrap:anywhere;
}
.com-act{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.com-btn{
appearance:none;border:0;background:transparent;cursor:pointer;
padding:4px 9px;border-radius:8px;text-decoration:none;
font:700 12px Manrope,system-ui,sans-serif;color:var(--muted);
}
.com-btn:hover{background:var(--az-suave);color:var(--az-osc)}
.com-btn.on{color:#e0245e}
.com-btn.on .com-cor{color:#e0245e}
.com-btn.is-off{cursor:default;opacity:.65}
.com-btn.is-off:hover{background:transparent;color:var(--muted)}
.com-rama{margin-top:10px;padding-left:14px;border-left:2px solid var(--line);display:grid;gap:12px}
.com-respondiendo{
display:flex;align-items:center;gap:8px;margin-bottom:7px;padding:7px 12px;
border-radius:10px;background:var(--az-suave);color:var(--az-osc);font-size:12.5px;font-weight:600;
}
.com-respondiendo button{
appearance:none;border:0;background:transparent;cursor:pointer;
color:var(--err-v);font:700 12px Manrope,sans-serif;text-decoration:underline;
}
html[data-theme="dark"] .com-txt{background:#1b2432}
@media (max-width:520px){
.perfil-tabs button{padding:10px 13px;font-size:12.5px}
.com-rama{padding-left:9px}
.profile-gallery.grande{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.profile-gallery.grande a{height:170px}
}
/* ---------------------------------------------------------------
12. Chat flotante — burbuja publica y aviso de mensaje nuevo
--------------------------------------------------------------- */
.chat-dock-pub{
display:flex;align-items:center;justify-content:center;
border:0;background:var(--az-btn);color:#fff;cursor:pointer;padding:0;
}
.chat-dock-pub svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.chat-dock-pub:hover{background:var(--az-osc)}
.chat-dock-pub.abierto{background:var(--az-osc)}
.chat-dock.llama{animation:latido 1.1s ease-in-out 3}
@keyframes latido{
0%,100%{transform:scale(1)}
25%{transform:scale(1.12)}
50%{transform:scale(1)}
75%{transform:scale(1.08)}
}
.chat-pub-panel{
position:fixed;right:16px;bottom:96px;z-index:74;width:min(320px,calc(100vw - 32px));
border-radius:16px;overflow:hidden;background:var(--card);
border:1px solid var(--line);box-shadow:0 18px 46px rgba(15,23,42,.24);
}
.chat-pub-cab{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 14px;background:var(--az-btn);color:#fff;
}
.chat-pub-cab strong{font-size:14px}
.chat-pub-x{
appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;
font-size:22px;line-height:1;padding:0 4px;
}
.chat-pub-cuerpo{padding:14px;display:grid;gap:9px;background:var(--bg2,#f6f7f9)}
.chat-pub-msg{
background:var(--card);border-radius:4px 14px 14px 14px;padding:10px 13px;
font-size:13.5px;line-height:1.5;color:var(--ink);box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.chat-pub-pie{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}
.chat-pub-pie .btn{flex:1 1 auto;justify-content:center}
@media (max-width:900px){
.chat-pub-panel{bottom:calc(148px + env(safe-area-inset-bottom));right:14px}
}
/* ---------------------------------------------------------------
13. Embudo de registro (panel)
--------------------------------------------------------------- */
.avance-barra{height:7px;width:110px;border-radius:999px;background:rgba(120,132,150,.22);overflow:hidden}
.avance-barra i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--az),#59b0f5)}
.tbl code{font-size:11px;background:var(--bg2,#f1f3f6);padding:2px 6px;border-radius:6px}
.tbl td{vertical-align:top}
/* ---------------------------------------------------------------
14. Logo con alto configurable (Panel -> Ajustes -> logo_alto)
--------------------------------------------------------------- */
:root{--logo-alto:46px}
.brand-logos img,
.navbarlogo .navbar-brand .brand-logos img,
.brand img{height:var(--logo-alto);width:auto;max-width:100%;object-fit:contain}
.side .brand .brand-logos img{max-height:var(--logo-alto)}
@media (max-width:520px){
.brand-logos img,.navbarlogo .navbar-brand .brand-logos img,.brand img{
height:min(var(--logo-alto),38px);
}
}
/* ---------------------------------------------------------------
15. Iconos de redes — SVG en vez de FontAwesome (que no se carga)
--------------------------------------------------------------- */
ul.social{display:flex;gap:8px;list-style:none;margin:0;padding:0;align-items:center}
ul.social li{margin:0}
.red-ico{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:50%;text-decoration:none;
background:rgba(255,255,255,.10);color:#fff;
border:1px solid rgba(255,255,255,.22);
transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.red-ico svg{width:17px;height:17px;fill:currentColor}
.red-ico:hover{background:var(--az-btn);border-color:var(--az-btn);color:#fff;transform:translateY(-2px)}
html:not([data-theme="dark"]) body:not(.home-premium) .red-ico{
background:rgba(20,28,40,.06);color:#2a3644;border-color:rgba(20,28,40,.14);
}
html:not([data-theme="dark"]) body:not(.home-premium) .red-ico:hover{background:var(--az-btn);color:#fff;border-color:var(--az-btn)}
/* ---------------------------------------------------------------
16. Galería — el hover casi no se notaba: ahora zoom y realce
--------------------------------------------------------------- */
.gal-item,.profile-gallery a,.feed .post .grid a{position:relative}
.profile-gallery a,.feed .post .grid a,.gal-item>a{
display:block;overflow:hidden;border-radius:14px;
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
will-change:transform;
}
.profile-gallery a img,.feed .post .grid a img,.gal-item>a img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .3s ease;
}
/* El zoom pasa DENTRO del marco: la imagen crece, el recuadro no se mueve. */
.profile-gallery a:hover img,.feed .post .grid a:hover img,.gal-item>a:hover img{
transform:scale(1.14);
filter:saturate(1.12) contrast(1.04);
}
.profile-gallery a:hover,.feed .post .grid a:hover,.gal-item>a:hover{
transform:translateY(-4px);
box-shadow:0 16px 34px rgba(15,23,42,.26);
z-index:3;
}
/* Velo y lupa al pasar por encima */
.profile-gallery a:after,.gal-item>a:after{
content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
background:linear-gradient(180deg,rgba(8,14,24,0) 45%,rgba(8,14,24,.55) 100%);
opacity:0;transition:opacity .3s ease;
}
.profile-gallery a:hover:after,.gal-item>a:hover:after{opacity:1}
.profile-gallery a:before,.gal-item>a:before{
content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
margin:-21px 0 0 -21px;border-radius:50%;pointer-events:none;z-index:2;
background:rgba(255,255,255,.94) url("data:image/svg+xml;utf8,") center/22px no-repeat;
opacity:0;transform:scale(.6);
transition:opacity .26s ease,transform .26s cubic-bezier(.2,1.4,.4,1);
box-shadow:0 6px 18px rgba(15,23,42,.3);
}
.profile-gallery a:hover:before,.gal-item>a:hover:before{opacity:1;transform:scale(1)}
@media (hover:none){
/* En pantalla táctil no hay hover: nada de lupa ni desplazamientos. */
.profile-gallery a:before,.gal-item>a:before,
.profile-gallery a:after,.gal-item>a:after{display:none}
.profile-gallery a:hover,.gal-item>a:hover{transform:none;box-shadow:none}
.profile-gallery a:hover img,.gal-item>a:hover img{transform:none}
}
/* ---------------------------------------------------------------
17. Login — panel de invitación en vez de los roles internos
--------------------------------------------------------------- */
.card-invita{display:flex;flex-direction:column;justify-content:center}
.caras{display:flex;align-items:center;margin-bottom:16px;padding-left:10px}
.caras .cara{
width:52px;height:52px;border-radius:50%;object-fit:cover;
margin-left:-10px;border:3px solid var(--card);background:var(--bg2);
box-shadow:0 3px 10px rgba(15,23,42,.16);
transition:transform .22s cubic-bezier(.2,1.4,.4,1);
}
.caras .cara:hover{transform:translateY(-5px) scale(1.08);z-index:20!important}
.cara-mas{
display:inline-flex;align-items:center;justify-content:center;
background:var(--az-btn);color:#fff;font:800 13px Manrope,sans-serif;
}
.invita-titulo{margin:0 0 10px;font-size:26px;line-height:1.25}
.invita-lista{margin:14px 0 20px;padding:0;list-style:none;display:grid;gap:9px}
.invita-lista li{position:relative;padding-left:26px;font-size:13.5px;color:var(--ink)}
.invita-lista li:before{
content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
background:var(--az-btn) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
@media (max-width:520px){
.caras .cara{width:42px;height:42px}
.invita-titulo{font-size:21px}
}
/* ---------------------------------------------------------------
18. Portada — el botón principal iba con texto casi negro (#06101f)
sobre un degradado cian: se leía mal. Azul sólido y texto blanco.
--------------------------------------------------------------- */
body.home-premium .px-btn,
.px-btn{
background:var(--az-btn);
color:#fff !important;
box-shadow:0 12px 30px rgba(18,104,200,.42);
}
body.home-premium .px-btn:hover,
.px-btn:hover{
background:#0f56a6;
color:#fff !important;
box-shadow:0 16px 38px rgba(18,104,200,.52);
}
/* Los puntos del carrusel se perdían sobre la foto */
.px-dots button{
width:10px;height:10px;background:rgba(255,255,255,.5);
box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.px-dots button.on{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
/* ---------------------------------------------------------------
19. Portada — ahora sí obedece al modo claro/oscuro
hero.css fija `body.home-premium{background:#070b18!important}`,
así que hay que rebatirlo campo por campo en claro.
--------------------------------------------------------------- */
html:not([data-theme="dark"]) body.home-premium{
background:var(--bg,#f4f5f7) !important;
color:var(--ink,#17191d) !important;
}
html:not([data-theme="dark"]) body.home-premium .whiteg,
html:not([data-theme="dark"]) body.home-premium .font1{color:var(--ink,#17191d) !important}
/* Barra del logo: clara con el logo oscuro */
html:not([data-theme="dark"]) body.home-premium .navbarlogo{background:var(--card,#fff) !important}
html:not([data-theme="dark"]) body.home-premium .navbarlogo .navbar-brand img,
html:not([data-theme="dark"]) body.home-premium .navbarlogo .navbar-brand svg{filter:none;opacity:1}
html:not([data-theme="dark"]) body.home-premium .red-ico{
background:rgba(20,28,40,.06);color:#2a3644;border-color:rgba(20,28,40,.14);
}
/* Barra de menu: clara y translucida */
html:not([data-theme="dark"]) body.home-premium #menug{
background:rgba(255,255,255,.86) !important;
border-bottom:1px solid var(--line,#d2d6dc);
}
html:not([data-theme="dark"]) body.home-premium #menug .navbar-nav>li>a{color:#28313d !important}
html:not([data-theme="dark"]) body.home-premium #menug .navbar-nav>li>a:hover,
html:not([data-theme="dark"]) body.home-premium #menug .navbar-nav>li.active>a{
color:var(--az-osc) !important;background:var(--az-suave) !important;
}
html:not([data-theme="dark"]) body.home-premium #menug .navbar-toggle{border-color:#8a97a6}
html:not([data-theme="dark"]) body.home-premium #menug .navbar-toggle .icon-bar{background-color:#2a3644}
/* El heroe lleva foto de fondo: ahi el texto se queda en blanco en ambos temas */
html:not([data-theme="dark"]) body.home-premium .px-below{
background:var(--bg,#f4f5f7);color:var(--ink,#17191d);
}
html:not([data-theme="dark"]) body.home-premium .px-below-inner{color:var(--ink,#17191d)}
/* Logo claro cuando el tema es oscuro (antes se invertia siempre) */
html[data-theme="dark"] body.home-premium .navbarlogo .navbar-brand img{filter:brightness(0) invert(1);opacity:.96}
/* ---------------------------------------------------------------
20. Sello verificado — se perdia sobre fondos claros y sobre fotos
--------------------------------------------------------------- */
.v-seal{
box-shadow:0 0 0 2px var(--card,#fff), 0 1px 4px rgba(8,14,24,.4);
}
html[data-theme="dark"] .v-seal{box-shadow:0 0 0 2px var(--card,#141e2f), 0 1px 4px rgba(0,0,0,.6)}
.cover .v-seal,.px-hero .v-seal,.mc-foto .v-seal{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 2px 6px rgba(8,14,24,.5)}
.v-seal svg path{stroke-width:4}
/* ---------------------------------------------------------------
21. Carrusel de tiras (ultimas empresas, modelos, artistas)
--------------------------------------------------------------- */
.nv-head{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.nv-head-der{display:flex;align-items:center;gap:6px;margin-left:auto}
.nv-flecha{
appearance:none;width:32px;height:32px;flex:0 0 auto;
border:1px solid var(--line);background:var(--card);color:var(--ink);
border-radius:50%;cursor:pointer;font:700 18px/1 system-ui,sans-serif;
display:inline-flex;align-items:center;justify-content:center;
transition:background .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease;
}
.nv-flecha:hover{background:var(--az-btn);border-color:var(--az-btn);color:#fff}
.nv-flecha[disabled]{opacity:.3;cursor:default}
.nv-flecha[disabled]:hover{background:var(--card);border-color:var(--line);color:var(--ink)}
/* Sin barra de desplazamiento visible: se mueve con las flechas */
.nv-carrusel .nv-rail{
display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
scroll-snap-type:x proximity;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:4px;
}
.nv-carrusel .nv-rail::-webkit-scrollbar{display:none}
.nv-carrusel .nv-card{scroll-snap-align:start;flex:0 0 auto}
/* ---------------------------------------------------------------
22. Eventos realizados y testimonios
--------------------------------------------------------------- */
.est-fijas{display:inline-flex;gap:1px;font-size:14px;line-height:1}
.est-fijas i{font-style:normal;color:#cfd5de}
.est-fijas i.on{color:#f2a917}
.ev-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.ev-franja{padding:28px 0;background:var(--az-btn);color:#fff}
.ev-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;text-align:center}
.ev-cifras div{display:flex;flex-direction:column;gap:3px}
.ev-cifras strong{font:800 30px/1 Manrope,system-ui,sans-serif}
.ev-cifras span{font-size:12px;opacity:.9;letter-spacing:.02em}
.ev-testi{padding:44px 0;background:var(--bg,#f4f5f7);color:var(--ink)}
.ev-titulo{margin:0 0 6px;font-size:30px}
.ev-sub{margin:0 0 22px;color:var(--muted)}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ev-card{
background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
display:flex;flex-direction:column;gap:8px;
transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.ev-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.14)}
.ev-card-top{display:flex;align-items:center;justify-content:space-between}
.ev-fecha{font-size:11px;color:var(--muted)}
.ev-card h3{margin:0;font-size:16px;line-height:1.35}
.ev-meta{margin:0;font-size:12px;color:var(--muted)}
.ev-card blockquote{
margin:6px 0 0;padding:11px 14px;border-radius:4px 14px 14px 14px;
background:var(--bg2,#f1f3f6);font-size:13.5px;line-height:1.55;font-style:italic;
}
.ev-card footer{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.ev-card footer span{color:var(--muted);font-size:11.5px}
.ev-acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.ev-lista{display:grid;gap:14px}
.ev-fila{padding-bottom:14px;border-bottom:1px solid var(--line)}
.ev-fila:last-child{border-bottom:0;padding-bottom:0}
.ev-fila-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ev-quote{
margin:8px 0 0;padding:10px 13px;border-left:3px solid var(--az);border-radius:0 10px 10px 0;
background:var(--bg2,#f1f3f6);font-size:13px;font-style:italic;
}
.ev-quote cite{display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:var(--muted)}
.mapa-caja{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.mapa-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---------------------------------------------------------------
23. Empresas
--------------------------------------------------------------- */
.emp-resumen{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.emp-resumen span{font-size:12.5px;color:var(--muted)}
.emp-resumen strong{color:var(--az-osc);font-size:17px;margin-right:4px}
.emp-card{display:flex;flex-direction:column;gap:6px;animation:aparece .45s both;animation-delay:calc(var(--i,0) * 40ms)}
.emp-logo{display:block;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--bg2);margin-bottom:6px}
.emp-logo img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.emp-card:hover .emp-logo img{transform:scale(1.09)}
.emp-lugar{color:var(--muted)}
.emp-chip{align-self:flex-start;background:var(--az-suave);border-color:var(--az);color:var(--az-osc);font-weight:700}
.emp-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
/* ---------------------------------------------------------------
24. Empleos
--------------------------------------------------------------- */
.empleo-pie{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.empleo-form{display:flex;gap:8px;flex:1 1 320px;min-width:0}
.empleo-form input{flex:1 1 auto;min-width:0}
/* ---------------------------------------------------------------
25. Contratar (ficha de modelo)
--------------------------------------------------------------- */
.contratar-caja{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
margin:16px 0 4px;padding:16px 18px;border-radius:16px;
background:linear-gradient(120deg,var(--az-suave),transparent 70%);
border:1px solid var(--az);
}
.contratar-txt{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:3px}
.contratar-txt strong{color:var(--az-osc);font-size:15px}
/* ---------------------------------------------------------------
26. Listado de modelos — entrada escalonada y realce
--------------------------------------------------------------- */
@keyframes aparece{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mc-slot{opacity:0;transform:translateY(18px)}
.mc-slot.visible{
animation:aparece .5s cubic-bezier(.2,.8,.2,1) both;
animation-delay:calc(var(--i,0) * 45ms);
}
.modelos-rejilla .model-card{
overflow:hidden;border-radius:14px;
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.modelos-rejilla .model-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 36px rgba(15,23,42,.26);
border-color:var(--az);
}
.mc-foto{display:block;position:relative;overflow:hidden;border-radius:12px}
.mc-foto .imgp{display:block;width:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.modelos-rejilla .model-card:hover .imgp{transform:scale(1.09);filter:saturate(1.1)}
.mc-velo{
position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
padding-bottom:14px;opacity:0;transition:opacity .3s ease;
background:linear-gradient(180deg,rgba(8,14,24,0) 50%,rgba(8,14,24,.72) 100%);
}
.mc-ver{
background:#fff;color:var(--az-osc);border-radius:999px;padding:6px 16px;
font:800 11.5px Manrope,system-ui,sans-serif;transform:translateY(8px);
transition:transform .3s cubic-bezier(.2,1.3,.4,1);
}
.modelos-rejilla .model-card:hover .mc-velo{opacity:1}
.modelos-rejilla .model-card:hover .mc-ver{transform:none}
.modelos-rejilla .badge-st{z-index:3}
/* Confirmacion de correo */
.validar-ico{
width:76px;height:76px;margin:0 auto;border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.validar-ico svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.validar-ico.ok,.validar-ico.ya{background:var(--ok-v)}
.validar-ico.error{background:var(--err-v)}
.validar-ico.reenviado{background:var(--az-btn)}
@media (prefers-reduced-motion:reduce){
.mc-slot,.mc-slot.visible,.emp-card{animation:none;opacity:1;transform:none}
.modelos-rejilla .model-card:hover,.ev-card:hover{transform:none}
}
@media (hover:none){
.mc-velo{display:none}
.modelos-rejilla .model-card:hover{transform:none;box-shadow:none}
.modelos-rejilla .model-card:hover .imgp{transform:none}
}
@media (max-width:520px){
.ev-cifras{grid-template-columns:repeat(2,1fr);gap:14px}
.ev-cifras strong{font-size:24px}
.ev-titulo{font-size:23px}
.empleo-form{flex:1 1 100%}
}
.nv-carrusel.sin-flechas .nv-head-der .nv-flecha{display:none}
/* hero.css se carga DESPUES que esta hoja en la portada, asi que estas
reglas necesitan el prefijo body.home-premium para poder ganarle. */
body.home-premium .px-dots button{
width:10px;height:10px;background:rgba(255,255,255,.55);
box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
body.home-premium .px-dots button.on{
background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.4);
}
/* ---------------------------------------------------------------
27. Portadas prediseñadas
--------------------------------------------------------------- */
.portadas{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
.portada-op{display:flex;flex-direction:column;gap:5px;cursor:pointer;width:120px}
.portada-op input{position:absolute;opacity:0;width:1px;height:1px}
.portada-mini{
display:block;height:52px;border-radius:10px;
border:2px solid transparent;box-shadow:0 2px 8px rgba(15,23,42,.12);
transition:border-color .16s ease,transform .16s ease;
}
.portada-op:hover .portada-mini{transform:translateY(-2px)}
.portada-op input:checked + .portada-mini{border-color:var(--az);box-shadow:0 0 0 3px var(--az-suave)}
.portada-op small{font-size:11px;color:var(--muted);text-align:center}
/* ---------------------------------------------------------------
28. Datos de empresa y chips
--------------------------------------------------------------- */
.emp-datos{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.emp-dato{
display:flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:12px;
background:var(--bg2,#f1f3f6);border:1px solid var(--line);min-width:96px;
}
.emp-dato b{font-size:14px;color:var(--ink);line-height:1.2}
.emp-dato small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.emp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.emp-chip-job{
background:var(--ok-v);border-color:var(--ok-v);color:#fff;text-decoration:none;font-weight:700;
}
.emp-chip-job:hover{background:#166b42;border-color:#166b42;color:#fff}
.contratar-ref{
font:700 11px Manrope,system-ui,sans-serif;color:var(--az-osc);
background:var(--card);border:1px dashed var(--az);border-radius:999px;padding:4px 10px;
}
/* ---------------------------------------------------------------
29. Paginador y rango de fechas del panel
--------------------------------------------------------------- */
.pager-caja{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.pager-info{color:var(--muted)}
.pager{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-left:auto}
.pager-sep{color:var(--muted);padding:0 2px}
.btn.is-off{opacity:.4;cursor:default;pointer-events:none}
.rango-fechas{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.rango-campos{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.rango-campos label{display:flex;flex-direction:column;gap:3px;color:var(--muted)}
.rango-campos input[type=date]{min-width:150px}
.rango-atajos{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}
/* ---------------------------------------------------------------
30. Visor de fotos: pantalla completa y 100%
--------------------------------------------------------------- */
.foto-zoom .zoom-box{display:flex;flex-direction:column;position:relative}
.fv-barra{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
padding:0 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px;
}
.fv-barra .lb-x{margin-left:auto;position:static}
.fv-btn{
display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;
border:1px solid var(--line);background:var(--card);color:var(--ink);
border-radius:999px;padding:6px 13px;font:700 12px Manrope,system-ui,sans-serif;
transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.fv-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fv-btn:hover{border-color:var(--az);color:var(--az-osc);background:var(--az-suave)}
.fv-btn.on{background:var(--az-btn);border-color:var(--az-btn);color:#fff}
.fv-lienzo{
display:flex;align-items:center;justify-content:center;
max-height:72vh;overflow:hidden;border-radius:12px;background:var(--bg2,#0d1420);
}
.fv-lienzo img{max-width:100%;max-height:72vh;object-fit:contain;display:block}
/* Al 100%: la foto va a su tamaño real y el lienzo se arrastra */
.fv-lienzo.al-100{overflow:auto;cursor:grab;align-items:flex-start;justify-content:flex-start}
.fv-lienzo.al-100.arrastrando{cursor:grabbing}
.fv-lienzo img.al-100{max-width:none;max-height:none;width:auto;height:auto}
/* En pantalla completa la caja ocupa todo */
.foto-zoom.es-full .zoom-box{
width:100vw;max-width:100vw;height:100vh;border-radius:0;margin:0;padding:14px;
background:#0b1018;
}
.foto-zoom.es-full .fv-lienzo{max-height:calc(100vh - 110px);flex:1 1 auto}
.foto-zoom.es-full .fv-lienzo img{max-height:calc(100vh - 110px)}
@media (max-width:520px){
.portada-op{width:calc(50% - 5px)}
.rango-atajos{margin-left:0;width:100%}
.pager{margin-left:0}
.fv-btn span{display:none}
.fv-btn{padding:8px 11px}
}
/* ---------------------------------------------------------------
31. Listado de modelos: KPI de estado, por página, likes y sello
--------------------------------------------------------------- */
.kpi-fichas{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 16px}
.kpi-f{
display:flex;flex-direction:column;gap:1px;min-width:132px;
padding:11px 16px;border-radius:14px;
border:1px solid var(--line);background:var(--card);
}
.kpi-f b{font:800 24px/1 Manrope,system-ui,sans-serif;color:var(--ink)}
.kpi-f span{font-size:12px;font-weight:700;color:var(--ink)}
.kpi-f small{font-size:10.5px;color:var(--muted)}
.kpi-f.on{border-color:var(--az);background:var(--az-suave)}
.kpi-f.on b,.kpi-f.on span{color:var(--az-osc)}
.kpi-f-total{background:var(--bg2,#f1f3f6)}
.por-pagina{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.por-pagina .tiny{color:var(--muted)}
.np-op{
display:inline-flex;align-items:center;justify-content:center;min-width:40px;
padding:6px 12px;border-radius:999px;text-decoration:none;
border:1px solid var(--line);background:var(--card);color:var(--ink);
font:700 12.5px Manrope,system-ui,sans-serif;
transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.np-op:hover{border-color:var(--az);color:var(--az-osc);background:var(--az-suave)}
.np-op.on{background:var(--az-btn);border-color:var(--az-btn);color:#fff}
/* Sello verificado en la esquina de la tarjeta */
.model-card{position:relative}
.mc-verif{
position:absolute;top:8px;right:8px;z-index:4;
width:23px;height:23px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:var(--az);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(8,14,24,.4);
}
.mc-verif svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.model-card.es-verif{border-color:rgba(29,127,224,.45)}
/* Estadísticas que aparecen al pasar el ratón sobre la foto.
Van abajo, no arriba: arriba están la etiqueta de nivel y el sello,
y se pisaban entre ellos. */
.mc-velo{
flex-direction:column;justify-content:flex-end;align-items:center;
gap:8px;padding:10px 10px 13px;
}
.mc-stats{display:flex;gap:6px;justify-content:center;order:2}
.mc-stat{
display:inline-flex;align-items:center;gap:4px;
background:rgba(10,16,26,.72);color:#fff;border-radius:999px;padding:4px 9px;
font:700 11px Manrope,system-ui,sans-serif;
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
transform:translateY(-6px);opacity:0;
transition:transform .28s cubic-bezier(.2,1.3,.4,1),opacity .24s ease;
}
.mc-stat svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.mc-stat:first-child svg{fill:#ff5d7a;stroke:#ff5d7a}
.model-card:hover .mc-stat{transform:none;opacity:1}
.model-card:hover .mc-stat:nth-child(2){transition-delay:.05s}
.mc-ver{align-self:center;order:1}
.mc-ver-check{
font-style:normal;display:inline-flex;align-items:center;justify-content:center;
width:15px;height:15px;border-radius:50%;background:var(--az);color:#fff;
font-size:9px;font-weight:800;margin-left:5px;vertical-align:middle;
}
.mc-nombre{font-weight:700}
.mc-check-mini{
display:inline-flex;align-items:center;justify-content:center;
width:14px;height:14px;border-radius:50%;background:var(--az);color:#fff;
font-size:9px;font-weight:800;vertical-align:middle;margin-left:2px;
}
@media (hover:none){
/* Sin hover, las cifras se ven siempre */
.mc-velo{opacity:1;background:linear-gradient(180deg,rgba(8,14,24,0) 55%,rgba(8,14,24,.6) 100%)}
.mc-stat{opacity:1;transform:none}
.mc-ver{display:none}
}
@media (max-width:520px){
.kpi-f{min-width:calc(50% - 5px);padding:9px 12px}
.kpi-f b{font-size:20px}
}
/* ---------------------------------------------------------------
32. Visor de fotos — ocupaba menos de medio monitor
`.report-sheet .box` está fijado en min(480px,100%) y `.zoom-box`
en min(920px,100%): para un visor de fotos se queda corto.
Ahora abre casi a pantalla completa y las miniaturas son cuadradas.
--------------------------------------------------------------- */
/* --- Modal 1: rejilla de miniaturas --- */
#aqp-fv1 .box{
width:min(1500px,97vw);
max-height:94vh;
padding:18px 20px 16px;
display:flex;flex-direction:column;
}
#aqp-fv1-grid{
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:12px;
overflow-y:auto;
padding-right:4px;
flex:1 1 auto;
min-height:0;
}
/* Cuadradas: antes cada miniatura tomaba una altura distinta */
#aqp-fv1-grid img{
width:100%;
height:auto;
aspect-ratio:1/1;
object-fit:cover;
border-radius:12px;
cursor:zoom-in;
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
#aqp-fv1-grid img:hover{
transform:scale(1.04);
box-shadow:0 12px 26px rgba(15,23,42,.3);
}
#aqp-fv1 .lb-x{top:14px;right:14px}
/* --- Modal 2: la foto grande --- */
.foto-zoom .zoom-box{
width:97vw;
max-width:97vw;
height:94vh;
padding:14px 16px 12px;
display:flex;
flex-direction:column;
border-radius:18px;
}
.foto-zoom .zoom-box img{max-height:none}
.foto-zoom .fv-lienzo{
flex:1 1 auto;
min-height:0;
max-height:none;
}
.foto-zoom .fv-lienzo img{max-height:100%;max-width:100%}
/* Las flechas, sobre la foto y no empujando el contenido */
.foto-zoom .fv-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
background:rgba(12,18,28,.62);color:#fff;font-size:26px;line-height:1;
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.foto-zoom .fv-nav:hover{background:var(--az-btn)}
.foto-zoom .fv-prev{left:14px}
.foto-zoom .fv-next{right:14px}
@media (max-width:900px){
#aqp-fv1 .box,.foto-zoom .zoom-box{width:98vw;max-width:98vw;height:96vh}
#aqp-fv1-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
.foto-zoom .fv-nav{width:40px;height:40px;font-size:22px}
}
/* El boton "Minimizar menu" del panel (z-index 110) quedaba por encima del
visor a pantalla casi completa. El visor manda mientras esta abierto. */
.report-sheet{z-index:140}
.report-sheet.on ~ .panel-mobilebar,
body:has(.report-sheet.on) .panel-mobilebar{z-index:1}
/* ---------------------------------------------------------------
33. Menú del panel con iconos
El icono va delante para que al minimizar el menú se siga
navegando solo con ellos.
--------------------------------------------------------------- */
.pn-ico{width:18px;height:18px;flex:0 0 auto}
.panel-nav a{display:flex;align-items:center;gap:10px}
.panel-nav-group summary{display:flex;align-items:center;gap:9px}
.panel-nav-group summary::-webkit-details-marker{display:none}
/* Menú minimizado: solo iconos, centrados, con el rótulo en un globo */
html.panel-collapsed .shell{grid-template-columns:64px minmax(0,1fr)}
html.panel-collapsed .side{
opacity:1;visibility:visible;overflow:visible;pointer-events:auto;
width:64px;padding:16px 6px;
}
html.panel-collapsed .side .brand span,
html.panel-collapsed .side .who,
html.panel-collapsed .side .panel-nav-group summary span,
html.panel-collapsed .side .panel-nav a span,
html.panel-collapsed .side .panel-nav-actions,
html.panel-collapsed .side .theme-toggle span{display:none}
html.panel-collapsed .side .brand{justify-content:center;margin-bottom:14px}
html.panel-collapsed .side .brand .brand-logos img{max-height:30px}
html.panel-collapsed .panel-nav-group summary{justify-content:center;padding:8px 0}
html.panel-collapsed .panel-nav a{
justify-content:center;padding:10px 0;position:relative;border-radius:10px;
}
html.panel-collapsed .panel-nav .pn-ico{width:21px;height:21px}
/* Con el menú plegado, todos los grupos abiertos: si no, la mitad de los
iconos quedarían escondidos dentro de un cerrado. */
html.panel-collapsed .panel-nav-group>div{display:block!important}
/* Globo con el nombre al pasar el ratón */
html.panel-collapsed .panel-nav a:after{
content:attr(title);
position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
background:#1f2937;color:#fff;border-radius:8px;padding:6px 11px;
font:600 12px Manrope,system-ui,sans-serif;white-space:nowrap;
opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:120;
box-shadow:0 8px 20px rgba(15,23,42,.3);
}
html.panel-collapsed .panel-nav a:hover:after{opacity:1}
/* ---------------------------------------------------------------
34. Gráfica apilada de personas y bots
--------------------------------------------------------------- */
.leyenda{display:flex;gap:16px;margin:6px 0 10px;font-size:12px;color:var(--muted)}
.leyenda i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.lg-hum{background:var(--az-btn)}
.lg-bot{background:#c9842a}
.bars-apiladas .bar-2{display:flex;flex-direction:column;justify-content:flex-end}
.bars-apiladas .bar-2 i{display:block;width:100%;border-radius:0}
.bars-apiladas .bar-2 .i-bot{background:#c9842a;border-radius:4px 4px 0 0}
.bars-apiladas .bar-2 .i-hum{background:var(--az-btn)}
.bars-apiladas .bar-2:only-child .i-hum,
.bars-apiladas .bar-2 .i-bot[style*="height:0"] + .i-hum{border-radius:4px 4px 0 0}
.bars .bar span{font-variant-numeric:tabular-nums}
@media (max-width:900px){
html.panel-collapsed .shell{grid-template-columns:1fr}
html.panel-collapsed .side{width:min(330px,88vw);padding:22px 16px}
html.panel-collapsed .side .brand span,
html.panel-collapsed .side .who,
html.panel-collapsed .side .panel-nav-group summary span,
html.panel-collapsed .side .panel-nav a span,
html.panel-collapsed .side .panel-nav-actions{display:revert}
html.panel-collapsed .panel-nav a{justify-content:flex-start;padding:11px 13px}
html.panel-collapsed .panel-nav a:after{display:none}
}
/* ---------------------------------------------------------------
35. Visor de fotos: fondo oscuro y sin margenes
`theme.css` fija `.report-sheet .box{background:#fff}` DESPUES de la
regla de app.css, asi que el visor salia en blanco y la foto perdia
todo el contraste. Aqui manda el oscuro y se quitan los huecos.
--------------------------------------------------------------- */
.foto-zoom{background:rgba(6,9,14,.92)}
.foto-zoom .zoom-box,
html[data-theme="dark"] .foto-zoom .zoom-box,
html:not([data-theme="dark"]) .foto-zoom .zoom-box{
background:#0a0e14;
color:#eef2f7;
border-color:#1d2733;
padding:0; /* nada de margen alrededor de la foto */
overflow:hidden;
}
/* La barra flota sobre la imagen en vez de ocupar su propia franja */
.foto-zoom .fv-barra{
position:absolute;top:0;left:0;right:0;z-index:6;
margin:0;padding:10px 12px;border-bottom:0;
background:linear-gradient(180deg,rgba(6,9,14,.78),rgba(6,9,14,0));
}
.foto-zoom .fv-btn{
background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff;
}
.foto-zoom .fv-btn:hover{background:var(--az-btn);border-color:var(--az-btn);color:#fff}
.foto-zoom .fv-btn.on{background:var(--az-btn);border-color:var(--az-btn)}
.foto-zoom .lb-x{background:rgba(255,255,255,.12);color:#fff}
.foto-zoom .lb-x:hover{background:var(--err-v)}
/* El lienzo ocupa TODA la caja: antes quedaba una banda blanca abajo */
.foto-zoom .fv-lienzo{
position:absolute;inset:0;
width:100%;height:100%;max-height:none;
margin:0;border-radius:0;background:#0a0e14;
}
.foto-zoom .fv-lienzo img{max-width:100%;max-height:100%}
/* Al 100% la imagen va a tamano real y el lienzo se arrastra, sin bordes */
.foto-zoom .fv-lienzo.al-100{padding:0}
.foto-zoom .fv-lienzo.al-100 img{max-width:none;max-height:none}
/* Contador sobre la foto, no debajo */
.foto-zoom #aqp-fv2-n{
position:absolute;left:0;right:0;bottom:0;z-index:6;
margin:0;padding:10px;color:#cfd8e3;
background:linear-gradient(0deg,rgba(6,9,14,.78),rgba(6,9,14,0));
}
.foto-zoom.es-full .zoom-box{padding:0;background:#0a0e14}
.foto-zoom.es-full .fv-lienzo,
.foto-zoom.es-full .fv-lienzo img{max-height:none}
/* La rejilla de miniaturas sigue clara: ahi el blanco ayuda a ver los recortes */
/* ---------------------------------------------------------------
36. Panel: seleccion en lote y resaltado de lo recien editado
--------------------------------------------------------------- */
.ck-fila{width:17px;height:17px;accent-color:var(--az-btn);cursor:pointer;margin:0}
tr.fila-marcada{background:var(--az-suave)}
.masiva{
position:sticky;top:0;z-index:30;
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin:0 0 12px;padding:11px 14px;border-radius:14px;
background:var(--az-suave);border:1px solid var(--az);
box-shadow:0 6px 18px rgba(15,23,42,.10);
}
.masiva-n{font:700 13px Manrope,system-ui,sans-serif;color:var(--az-osc)}
.masiva-n b{font-size:16px}
.masiva-nota{color:var(--muted);width:100%}
.btn.masiva-peligro{background:var(--err-v);border-color:var(--err-v);color:#fff}
.btn.masiva-peligro:hover{background:#96291f;border-color:#96291f}
/* Lo que acaba de cambiar de estado se queda resaltado y se apaga solo */
@keyframes desvanecer{
0%{background-color:rgba(28,138,85,.30);box-shadow:inset 3px 0 0 var(--ok-v)}
70%{background-color:rgba(28,138,85,.16);box-shadow:inset 3px 0 0 var(--ok-v)}
100%{background-color:transparent;box-shadow:inset 3px 0 0 transparent}
}
tr.recien-editado,
.recien-editado{
animation:desvanecer var(--dur,120s) linear forwards;
}
tr.recien-editado td:first-child{position:relative}
.editado-fin{background:transparent!important}
/* Un aviso discreto de que ese es el que se acaba de tocar */
tr.recien-editado td:nth-child(2):after{
content:"editado";
display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
background:var(--ok-v);color:#fff;font:800 9.5px Manrope,sans-serif;
text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;
}
/* El chip de empleos abiertos salia en verde macizo y competia con el
boton principal de la tarjeta. Ahora es un chip claro con punto vivo. */
.emp-chip-job{
background:rgba(28,138,85,.10);
border-color:rgba(28,138,85,.45);
color:var(--ok-v);
font-weight:700;
display:inline-flex;align-items:center;gap:6px;
}
.emp-chip-job:before{
content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-v);flex:0 0 auto;
}
.emp-chip-job:hover{background:var(--ok-v);border-color:var(--ok-v);color:#fff}
.emp-chip-job:hover:before{background:#fff}
html[data-theme="dark"] .emp-chip-job{background:rgba(28,138,85,.18);color:#6fd6a4;border-color:rgba(111,214,164,.45)}
/* Chip de eventos, mismo lenguaje pero en azul */
.emp-chip:not(.emp-chip-job){
background:var(--az-suave);border-color:rgba(29,127,224,.4);color:var(--az-osc);
}
/* ---------------------------------------------------------------
37. Marcador mientras carga la imagen
Con 50-100 fichas las fotos entraban de una en una y la rejilla
parecia rota. Ahora cada hueco muestra un icono y un brillo suave
hasta que su imagen esta lista.
--------------------------------------------------------------- */
@keyframes brilla{0%{background-position:-180% 0}100%{background-position:180% 0}}
.img-cargando{
background-color:var(--bg2,#e9edf2);
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
background-repeat:no-repeat,no-repeat;
background-position:center,-180% 0;
background-size:38px 38px,180% 100%;
animation:brilla 1.5s linear infinite;
color:transparent;
min-height:120px;
}
html[data-theme="dark"] .img-cargando{
background-color:#1a222e;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(100deg,transparent 20%,rgba(255,255,255,.10) 50%,transparent 80%);
}
/* El hueco de la tarjeta se reserva desde el principio: sin saltos */
.modelos-rejilla .mc-foto{min-height:150px;background:var(--bg2,#e9edf2)}
@media (prefers-reduced-motion:reduce){.img-cargando{animation:none}}
/* ---------------------------------------------------------------
38. Barra de "navegas como" y menu de la empresa
--------------------------------------------------------------- */
.actor-bar{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
padding:9px 14px;border-radius:0 0 14px 14px;
background:var(--bg2,#eef0f3);border:1px solid var(--line);border-top:0;
}
.actor-bar.es-empresa{background:var(--az-suave);border-color:var(--az)}
.actor-form{display:flex;align-items:center;gap:8px;margin:0}
.actor-form select{max-width:280px}
.actor-menu{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.actor-menu a{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;text-decoration:none;
background:var(--card);border:1px solid var(--line);color:var(--ink);
font:700 12px Manrope,system-ui,sans-serif;
}
.actor-menu a:hover{border-color:var(--az);color:var(--az-osc);background:#fff}
/* ---------------------------------------------------------------
39. Empleos y postulantes
--------------------------------------------------------------- */
.empleo-datos{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.empleo-postular{
margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.postulado-ya{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
padding:14px 16px;border-radius:14px;background:var(--bg2,#f1f3f6);border:1px solid var(--line);
}
.postulado-ya>div{flex:1 1 240px;min-width:0}
.postulante{transition:box-shadow .2s ease}
.postulante:hover{box-shadow:0 10px 24px rgba(15,23,42,.12)}
@media (max-width:520px){
.actor-menu{margin-left:0;width:100%}
.actor-form select{max-width:100%;flex:1 1 auto}
}
/* Filtro de pais y ciudad con contador */
.filtro-geo{display:grid;gap:8px;margin:4px 0 12px}
.geo-linea{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.geo-linea>.tiny{color:var(--muted);min-width:52px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
/* ---------------------------------------------------------------
40. Menu del panel: jerarquia legible y boton solo de rayitas
--------------------------------------------------------------- */
/* El boton estaba clavado arriba a la derecha, lejisimos del menu.
Ahora vive junto a la barra lateral. */
.panel-mobilebar{
position:fixed;top:14px;left:auto;right:auto;
z-index:120;width:auto;height:auto;padding:0;
}
html:not(.panel-collapsed) .panel-mobilebar{left:250px}
html.panel-collapsed .panel-mobilebar{left:72px}
.panel-nav-toggle{
width:38px;height:38px;padding:0;border-radius:11px;
display:inline-flex;align-items:center;justify-content:center;
background:var(--card);border:1px solid var(--line);color:var(--ink);
box-shadow:0 4px 12px rgba(15,23,42,.12);
}
.panel-nav-toggle:hover{border-color:var(--az);color:var(--az-osc)}
.panel-toggle-icon{
display:block;width:17px;height:12px;font-size:0;
background:
linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,
linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat;
}
.panel-mobilebar .brand{display:none}
/* --- Jerarquia --- */
/* Nivel 1: el grupo. Mas peso, fondo propio y separado del resto. */
.panel-nav-group{margin-bottom:6px}
.panel-nav-group>summary{
display:flex;align-items:center;gap:11px;
padding:11px 13px;border-radius:11px;cursor:pointer;
font:800 12px Manrope,system-ui,sans-serif;
letter-spacing:.07em;text-transform:uppercase;
color:var(--ink);background:var(--bg2,#e9ecf1);
border:1px solid transparent;
transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.panel-nav-group>summary:hover{background:var(--az-suave);color:var(--az-osc);border-color:var(--az)}
.panel-nav-group[open]>summary{
background:var(--az-btn);color:#fff;border-color:var(--az-btn);
}
.panel-nav-group[open]>summary .pn-ico{color:#fff}
.panel-nav-group>summary .pn-ico{width:17px;height:17px;flex:0 0 auto}
/* Nivel 2: las entradas. Mas aire dentro y separadas entre si. */
.panel-nav-group>div{
display:grid;gap:3px;
padding:7px 0 9px 10px;
margin-left:9px;
border-left:2px solid var(--line);
}
.panel-nav a{
display:flex;align-items:center;gap:12px; /* el icono ya no roza el texto */
padding:10px 13px;border-radius:10px;
font:600 13px Manrope,system-ui,sans-serif;
color:var(--muted);text-decoration:none;
transition:background .15s ease,color .15s ease;
}
.panel-nav a .pn-ico{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.panel-nav a:hover{background:var(--az-suave);color:var(--az-osc)}
.panel-nav a:hover .pn-ico{opacity:1}
.panel-nav a.on{
background:var(--az-suave);color:var(--az-osc);font-weight:800;
box-shadow:inset 3px 0 0 var(--az-btn);
}
.panel-nav a.on .pn-ico{opacity:1;color:var(--az-btn)}
/* Acciones del pie, separadas del arbol */
.panel-nav-actions{
margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
display:grid;gap:3px;
}
.panel-nav-actions a{
display:block;padding:9px 13px;border-radius:10px;
font:600 12.5px Manrope,system-ui,sans-serif;color:var(--muted);text-decoration:none;
}
.panel-nav-actions a:hover{background:var(--bg2);color:var(--ink)}
html[data-theme="dark"] .panel-nav-group>summary{background:#1b2432;color:#e6edf5}
html[data-theme="dark"] .panel-nav-group>div{border-left-color:#2c3a4c}
/* Con el menu plegado no hay arbol: solo iconos centrados */
html.panel-collapsed .panel-nav-group>div{
padding:0;margin-left:0;border-left:0;gap:2px;
}
html.panel-collapsed .panel-nav-group>summary{
padding:9px 0;background:transparent;border-color:transparent;
}
html.panel-collapsed .panel-nav-group[open]>summary{
background:transparent;color:var(--az-osc);
}
html.panel-collapsed .panel-nav-group[open]>summary .pn-ico{color:var(--az-btn)}
html.panel-collapsed .panel-nav a{gap:0;padding:10px 0}
@media (max-width:900px){
html:not(.panel-collapsed) .panel-mobilebar,
html.panel-collapsed .panel-mobilebar{left:auto;right:12px;top:10px}
}
/* ---------------------------------------------------------------
41. Panel de avisos que abre la campana
--------------------------------------------------------------- */
.avisos-panel{
position:fixed;top:60px;right:16px;z-index:80;
width:min(360px,calc(100vw - 32px));max-height:min(70vh,520px);
display:flex;flex-direction:column;overflow:hidden;
background:var(--card);border:1px solid var(--line);border-radius:16px;
box-shadow:0 18px 44px rgba(15,23,42,.22);
}
.avisos-cab{
display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;border-bottom:1px solid var(--line);
}
.avisos-x{appearance:none;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.avisos-x:hover{color:var(--err-v)}
.avisos-lista{flex:1 1 auto;overflow-y:auto;padding:6px}
.avisos-cargando{padding:14px;color:var(--muted)}
.aviso-fila{
display:flex;gap:10px;align-items:flex-start;
padding:10px 11px;border-radius:11px;text-decoration:none;color:var(--ink);
}
.aviso-fila:hover{background:var(--bg2,#f1f3f6)}
.aviso-fila.sin-leer{background:var(--az-suave)}
.aviso-fila img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--bg2)}
.aviso-fila strong{display:block;font-size:13px}
.aviso-fila span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.avisos-pie{
padding:11px 14px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--bg2,#f6f7f9);
}
.avisos-sw{display:flex;align-items:center;gap:7px;font:600 12.5px Manrope,system-ui,sans-serif;cursor:pointer}
.avisos-sw input{width:16px;height:16px;accent-color:var(--az-btn);cursor:pointer}
.avisos-pie .tiny{width:100%;color:var(--muted)}
.avisos-pie .btn{margin-left:auto}
.notif-fab.abierto{border-color:var(--az);background:var(--az-suave);color:var(--az-osc)}
@media (max-width:900px){
.avisos-panel{top:auto;bottom:calc(210px + env(safe-area-inset-bottom));right:14px}
}
/* ---------------------------------------------------------------
42. Menu del panel: mas compacto y con icono y texto del mismo color
El bloque 40 dejaba demasiado aire entre entradas y, en modo claro,
el icono se pintaba casi blanco mientras el texto iba oscuro: las dos
mitades de la misma fila se leian como si no fueran juntas.
--------------------------------------------------------------- */
/* OJO: app.css trae `.side nav a{padding:10px 12px 10px 15px}` (0,1,2).
Con `.panel-nav a` (0,1,1) no se ganaba y las filas seguian a 40 px
por mucho que se bajara el padding. Todo el bloque va prefijado con
`.side` para quedar por encima. */
/* --- Grupos: menos alto y menos separacion --- */
.side .panel-nav-group{margin-bottom:2px;padding:2px 0}
.side .panel-nav-group>summary{
padding:7px 10px;border-radius:9px;
font-size:11px;letter-spacing:.06em;
gap:9px;
}
.side .panel-nav-group>summary .pn-ico{width:15px;height:15px}
/* --- Entradas: compactas y sin guia lateral que ensanchaba --- */
.side .panel-nav-group>div{
padding:3px 0 5px 6px;
margin-left:7px;
gap:1px;
border-left:1px solid var(--line);
}
.side .panel-nav a{
padding:7px 10px;border-radius:8px;
font-size:12.5px;line-height:1.25;
gap:10px;
}
.side .panel-nav a .pn-ico{width:15px;height:15px}
/* El icono hereda SIEMPRE el color del texto de su fila.
Asi no vuelve a pasar que uno sea claro y el otro oscuro. */
.side .panel-nav a{color:#3a4654}
.side .panel-nav a .pn-ico{color:currentColor;opacity:.75}
.side .panel-nav a:hover,
.side .panel-nav a:hover .pn-ico{color:var(--az-osc)}
.side .panel-nav a.on,
.side .panel-nav a.on .pn-ico{color:var(--az-osc);opacity:1}
.side .panel-nav-group>summary{color:#2b3644}
.side .panel-nav-group>summary .pn-ico{color:currentColor;opacity:.8}
.side .panel-nav-group[open]>summary,
.side .panel-nav-group[open]>summary .pn-ico{color:#fff;opacity:1}
html[data-theme="dark"] .side .panel-nav a{color:#c3ced9}
html[data-theme="dark"] .side .panel-nav-group>summary{color:#e6edf5}
/* Barra lateral algo mas estrecha: sobraba hueco a los lados */
.side{padding:16px 11px}
.side .who{padding:10px 11px;margin-bottom:10px}
.side .panel-nav-actions{margin-top:10px;padding-top:9px;gap:1px}
.side .panel-nav-actions a{padding:7px 10px;font-size:12px}
/* ---------------------------------------------------------------
43. KPI que se refrescan sin recargar
--------------------------------------------------------------- */
[data-kpi]{transition:background .3s ease,border-color .3s ease}
[data-kpi].kpi-cambia{animation:kpiLate .8s ease}
@keyframes kpiLate{
0%{background:var(--az-suave);border-color:var(--az)}
100%{background:var(--card);border-color:var(--line)}
}
.kpi-f.on.kpi-cambia{animation:none}
.fila-guardando{opacity:.55;pointer-events:none}
.fila-ok{animation:desvanecer 120s linear forwards}
/* ---------------------------------------------------------------
44. Ficha rapida del panel y pantalla de edicion de cuenta
--------------------------------------------------------------- */
html.sin-scroll,html.sin-scroll body{overflow:hidden}
.fr-fondo{
position:fixed;inset:0;z-index:1400;
background:rgba(8,12,18,.72);backdrop-filter:blur(3px);
display:flex;align-items:center;justify-content:center;padding:18px;
}
.fr-fondo[hidden]{display:none!important}
.fr-caja{
position:relative;width:min(760px,100%);max-height:92vh;overflow:auto;
background:var(--card);border:1px solid var(--line);border-radius:18px;
padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.42);
}
.fr-x{
position:absolute;top:10px;right:12px;z-index:2;
width:34px;height:34px;border-radius:50%;
border:1px solid var(--line);background:var(--card);color:var(--txt);
font-size:22px;line-height:1;cursor:pointer;
}
.fr-x:hover{background:var(--az-suave);color:var(--az-osc)}
.fr-cab{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;padding-right:36px}
.fr-avatar{width:78px;height:78px;border-radius:14px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.fr-cab h3{margin:0 0 2px;font-family:'Fraunces',Georgia,serif;font-size:21px}
.fr-bio{margin:8px 0 0;font-size:13px;color:var(--muted)}
.sello-mini{
display:inline-flex;align-items:center;justify-content:center;
width:19px;height:19px;border-radius:50%;background:var(--az-btn);color:#fff;
font-size:11px;font-weight:800;vertical-align:middle;
}
.fr-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fr-fotos img{width:82px;height:82px;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
.fr-mas{
width:82px;height:82px;border-radius:11px;border:1px dashed var(--line);
display:flex;align-items:center;justify-content:center;
font-weight:800;color:var(--muted);background:var(--az-suave);
}
.fr-datos{
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:8px;margin-bottom:14px;
}
.fr-dato{
background:var(--az-suave);border:1px solid var(--line);border-radius:10px;padding:8px 11px;
}
.fr-dato span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fr-dato b{font-size:13.5px;word-break:break-word}
.fr-informe{
border:1px solid var(--line);border-radius:12px;
padding:10px 13px;margin-bottom:12px;background:var(--bg-suave,transparent);
}
.fr-informe>summary{
cursor:pointer;font-weight:800;font-size:13px;list-style:none;
display:flex;align-items:center;gap:8px;
}
.fr-informe>summary::-webkit-details-marker{display:none}
.fr-informe>summary::before{content:'\1F512';font-size:14px}
.fr-informe[open]>summary::before{content:'\1F513'}
.fr-informe-cuerpo{padding-top:10px}
.fr-informe-cuerpo h4{margin:12px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fr-informe-cuerpo h4:first-child{margin-top:0}
.fr-restringido{
border:1px dashed var(--line);border-radius:12px;padding:10px 13px;margin-bottom:12px;
}
.fr-mov{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.fr-pie{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.nota-item{
border-left:3px solid var(--az-btn);background:var(--az-suave);
border-radius:0 9px 9px 0;padding:8px 11px;margin-bottom:7px;
}
.nota-item p{margin:0;font-size:13px}
.notas-lista{max-height:260px;overflow:auto}
.badge.b-privado{background:#5b6673;color:#fff}
.badge.b-amigos{background:#8a6d1f;color:#fff}
.badge.b-publico{background:#1f7a4d;color:#fff}
/* --- Edicion de cuenta --- */
.edit-cab{display:flex;gap:14px;align-items:center}
.edit-cab .usr-thumb{width:64px;height:64px;border-radius:13px}
.tbl-log td{vertical-align:top}
.log-antes{color:#a4444d;text-decoration:line-through;opacity:.85}
.log-despues{color:#1f7a4d;font-weight:700}
html[data-theme="dark"] .log-antes{color:#e08d95}
html[data-theme="dark"] .log-despues{color:#79d7a5}
.chk-linea{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chk-linea .tiny{flex:1 1 100%;margin:0}
.codigo-otp{
font:800 25px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.42em;text-align:center;max-width:260px;
}
@media (max-width:640px){
.fr-caja{padding:16px;border-radius:15px;max-height:96vh}
.fr-cab{flex-direction:column}
.fr-avatar{width:64px;height:64px}
.fr-datos{grid-template-columns:1fr 1fr}
}
/* ---------------------------------------------------------------
45. Graficas de ondas del tablero
Las barras no dejaban ver la tendencia y no tenian mas dato que el
title del navegador. Aqui la curva se lee de un vistazo y el punto
bajo el cursor saca su tarjeta al costado.
--------------------------------------------------------------- */
.onda-wrap{
position:relative;margin:6px 0 4px;
padding:2px 0 0;
}
.onda{display:block;width:100%;height:auto;overflow:visible}
.onda-guia{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5;opacity:.7;vector-effect:non-scaling-stroke}
.onda-linea{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.onda-area{opacity:.55}
.onda-zona{fill:transparent}
.onda-punto{opacity:0;transition:opacity .12s ease;stroke:var(--card);stroke-width:1.5;vector-effect:non-scaling-stroke}
.onda-col.on .onda-punto{opacity:1}
/* Paleta por serie */
.onda-linea.on-chum{stroke:#1268c8} .onda-punto.on-chum{fill:#1268c8}
.onda-linea.on-cbot{stroke:#a4444d} .onda-punto.on-cbot{fill:#a4444d}
.onda-linea.on-cvis{stroke:#1f7a4d} .onda-punto.on-cvis{fill:#1f7a4d}
.onda-linea.on-cses{stroke:#8a6d1f} .onda-punto.on-cses{fill:#8a6d1f}
.onda-linea.on-calt{stroke:#6b4bb8} .onda-punto.on-calt{fill:#6b4bb8}
.onda-linea.on-cpos{stroke:#0d8a9c} .onda-punto.on-cpos{fill:#0d8a9c}
.on-g0.on-chum{stop-color:#1268c8;stop-opacity:.32} .on-g1.on-chum{stop-color:#1268c8;stop-opacity:0}
.on-g0.on-cbot{stop-color:#a4444d;stop-opacity:.26} .on-g1.on-cbot{stop-color:#a4444d;stop-opacity:0}
.on-g0.on-cvis{stop-color:#1f7a4d;stop-opacity:.28} .on-g1.on-cvis{stop-color:#1f7a4d;stop-opacity:0}
.on-g0.on-cses{stop-color:#8a6d1f;stop-opacity:.24} .on-g1.on-cses{stop-color:#8a6d1f;stop-opacity:0}
.on-g0.on-calt{stop-color:#6b4bb8;stop-opacity:.26} .on-g1.on-calt{stop-color:#6b4bb8;stop-opacity:0}
.on-g0.on-cpos{stop-color:#0d8a9c;stop-opacity:.24} .on-g1.on-cpos{stop-color:#0d8a9c;stop-opacity:0}
/* Riel vertical que marca el dia bajo el cursor */
.onda-riel{
position:absolute;top:0;bottom:22px;width:1px;
background:var(--az-btn);opacity:.45;pointer-events:none;
transform:translateX(-.5px);
}
.onda-riel[hidden]{display:none!important}
/* Tarjeta al costado del punto */
.onda-globo{
position:absolute;top:6px;z-index:5;pointer-events:none;
transform:translateX(14px);
min-width:132px;max-width:230px;
background:var(--card);border:1px solid var(--line);border-radius:11px;
padding:9px 12px;box-shadow:0 12px 30px rgba(0,0,0,.18);
font-size:12.5px;line-height:1.5;
}
.onda-globo[hidden]{display:none!important}
.onda-globo.a-la-izquierda{transform:translateX(calc(-100% - 14px))}
.onda-globo b{display:block;font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:800}
.onda-globo .og-l{display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:700}
.onda-globo .og-l::before{
content:'';width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--muted);
}
.onda-globo .og-0::before{background:#1268c8}
.onda-globo .og-1::before{background:#a4444d}
.onda-eje{
display:flex;justify-content:space-between;
font-size:11px;color:var(--muted);margin-top:2px;
}
.onda-max{
position:absolute;top:0;right:0;
background:var(--card);padding:0 4px;border-radius:5px;opacity:.75;
}
.leyenda .lg-vis{background:#1f7a4d}
.leyenda .lg-ses{background:#8a6d1f}
.leyenda .lg-alt{background:#6b4bb8}
.leyenda .lg-pos{background:#0d8a9c}
@media (hover:none){
/* Sin raton, el globo va fijo arriba: perseguir el dedo es peor. */
.onda-globo{position:absolute;left:0!important;transform:none;top:0;max-width:100%}
.onda-globo.a-la-izquierda{transform:none}
}
@media (max-width:640px){
.onda-globo{font-size:12px;padding:8px 10px;min-width:118px}
}
/* ---------------------------------------------------------------
46. Cola de revision del muro
--------------------------------------------------------------- */
.cola-revision{border-left:4px solid var(--az-btn)}
.cola-lista{display:grid;gap:10px;margin-top:14px}
.cola-item{
display:flex;gap:12px;align-items:flex-start;
border:1px solid var(--line);border-radius:13px;padding:12px;
background:var(--az-suave);
transition:opacity .25s ease,transform .25s ease,max-height .25s ease;
}
.cola-item.cola-guardando{opacity:.5;pointer-events:none}
.cola-item.cola-fuera{opacity:0;transform:translateX(28px)}
.cola-avatar{width:46px;height:46px;border-radius:11px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.cola-cuerpo{flex:1 1 auto;min-width:0}
.cola-texto{
margin:7px 0;font-size:13.5px;line-height:1.55;
word-break:break-word;overflow-wrap:anywhere;
}
.cola-fotos{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.cola-fotos img{width:66px;height:66px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.cola-acciones{margin-top:8px}
.cola-vacia{
margin-top:14px;padding:14px;text-align:center;
border:1px dashed var(--line);border-radius:12px;
}
.badge.b-pendiente{background:#8a6d1f;color:#fff}
@media (max-width:640px){
.cola-item{flex-direction:column}
.cola-acciones .btn{flex:1 1 auto}
}
/* ---------------------------------------------------------------
47. Esquina de la cuenta: campana con minipanel y menu desplegable
--------------------------------------------------------------- */
.nav-campana .nav-dd-btn,
.nav-cuenta .nav-dd-btn{display:inline-flex;align-items:center;gap:8px}
.campana-btn{position:relative;padding:8px 10px}
.campana-btn svg{display:block}
.campana-n{
position:absolute;top:1px;right:1px;
min-width:17px;height:17px;padding:0 4px;
border-radius:999px;background:#c0392b;color:#fff;
font:800 10.5px/17px Manrope,system-ui,sans-serif;text-align:center;
border:2px solid var(--card);
}
.campana-n[hidden]{display:none!important}
.cuenta-btn{padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--line)!important}
.cuenta-ava{width:27px;height:27px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.cuenta-nombre{
max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:700;font-size:12.5px;
}
.cuenta-btn i{font-style:normal;font-size:10px;opacity:.7}
/* Las dos cajas se anclan a la derecha: nacen en la esquina y si se
alinearan a la izquierda se saldrian de la pantalla. */
.nav-campana .nav-dd-box,
.nav-cuenta .nav-dd-box{left:auto;right:0;margin-top:6px}
.notif-mini{width:min(330px,92vw);padding:0;overflow:hidden}
.notif-mini-cab{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:11px 13px;border-bottom:1px solid var(--line);
}
.notif-mini-lista{max-height:min(58vh,360px);overflow:auto}
.notif-mini-lista>p{padding:14px 13px;margin:0}
.notif-mini-item{
display:flex;gap:10px;align-items:flex-start;
padding:10px 13px!important;border-radius:0!important;
border-bottom:1px solid var(--line);
}
.notif-mini-item:last-child{border-bottom:0}
.notif-mini-item:hover{background:var(--az-suave)}
.notif-mini-item img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.notif-mini-item span{flex:1 1 auto;min-width:0;font-size:12.8px;line-height:1.45}
.notif-mini-item b{font-weight:800}
.notif-mini-item i{display:block;font-style:normal;opacity:.7;margin-top:2px}
.notif-mini-item.unread{background:var(--az-suave)}
.notif-mini-item.unread::before{
content:'';width:7px;height:7px;border-radius:50%;background:var(--az-btn);
flex:0 0 auto;margin-top:13px;
}
.notif-mini-pie{
display:block!important;text-align:center;
padding:11px 13px!important;border-top:1px solid var(--line);
font-weight:800;font-size:12.5px;border-radius:0!important;
}
.notif-mini-vacio{opacity:.75}
.cuenta-box{width:min(250px,92vw)}
.cuenta-cab{
display:flex;flex-direction:column;gap:1px;
padding:10px 11px;margin:-8px -8px 6px;
border-bottom:1px solid var(--line);background:var(--az-suave);
}
.cuenta-cab strong{font-size:13.5px}
.cuenta-salir{color:#c0392b!important;font-weight:800;border-top:1px solid var(--line);margin-top:5px;padding-top:10px!important}
html[data-theme="dark"] .cuenta-salir{color:#f0949c!important}
@media (max-width:900px){
/* Dentro del menu plegable no hay esquina a la que anclarse. */
.nav-campana .nav-dd-box,
.nav-cuenta .nav-dd-box{right:auto;left:0;width:100%}
.notif-mini{width:100%}
.cuenta-nombre{max-width:none}
}
/* ---------------------------------------------------------------
48. Ficha publica: candado en las fotos y separacion de zonas
--------------------------------------------------------------- */
.ficha-photo-lock{position:relative;display:block;overflow:hidden;border-radius:12px}
.ficha-photo-lock .ficha-photo{filter:blur(13px) saturate(.6) brightness(.72);transform:scale(1.08)}
.lock-velo{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:#fff;background:rgba(10,14,20,.28);
}
.lock-velo svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.lock-aviso{
margin-top:12px;padding:14px;border:1px dashed var(--line);border-radius:13px;
background:var(--az-suave);display:grid;gap:7px;
}
.lock-aviso strong{font-size:15px}
.ficha-zonas{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:22px}
.ficha-zona{border:1px solid var(--line);border-radius:15px;padding:16px;background:var(--card)}
.ficha-zona h3{margin:0 0 6px;font-family:'Fraunces',Georgia,serif;font-size:19px}
.ficha-sub{margin:14px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ficha-zona-privada{border-left:4px solid var(--az-btn)}
.ficha-zona-privada::before{
content:'\1F512 Privado';
display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;
background:var(--az-suave);color:var(--az-osc);font-size:11px;font-weight:800;
}
.ficha-msg-form textarea{width:100%}
@media (max-width:820px){
.ficha-zonas{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------
49. Galeria de la ficha: mosaico o una grande
OJO: el bloque 44 llamaba a sus cosas .ficha-fotos y aplastaba la
rejilla publica de theme.css. Ahora el modal usa .fr-*; aqui solo
viven las clases de la ficha publica.
--------------------------------------------------------------- */
.galeria{margin-bottom:6px}
.galeria-barra{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:9px;flex-wrap:wrap;
}
.galeria-modos{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.gal-modo{
appearance:none;border:0;background:transparent;color:var(--muted);
padding:7px 15px;font:800 12px Manrope,system-ui,sans-serif;cursor:pointer;
}
.gal-modo.on{background:var(--az-btn);color:#fff}
.gal-modo:hover:not(.on){background:var(--az-suave);color:var(--az-osc)}
.galeria-cuenta{font-weight:700}
.galeria-grande{position:relative}
.galeria-grande[hidden]{display:none!important}
.gal-marco{
position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
background:#0a0e14;height:clamp(390px,52vw,580px);
}
.gal-slide{
position:absolute;inset:0;display:none;align-items:center;justify-content:center;
cursor:zoom-in;
}
.gal-slide.on{display:flex}
.gal-slide img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.gal-bloqueada{cursor:not-allowed}
.gal-bloqueada img{filter:blur(16px) saturate(.6) brightness(.7);transform:scale(1.08)}
.gal-bloqueada .lock-velo{flex-direction:column;gap:8px}
.gal-bloqueada .lock-velo b{color:#fff;font-weight:800}
.gal-flecha{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;
border:1px solid var(--line);background:var(--card);color:var(--txt);
font-size:26px;line-height:1;cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.22);
display:flex;align-items:center;justify-content:center;
}
.gal-flecha:hover{background:var(--az-btn);color:#fff;border-color:var(--az-btn)}
.gal-prev{left:9px}
.gal-next{right:9px}
.ficha-fotos[hidden]{display:none!important}
@media (max-width:640px){
.gal-marco{height:min(62vh,470px)}
.gal-flecha{width:36px;height:36px;font-size:22px}
.galeria-barra{justify-content:center}
}
@media (hover:none){
/* En el movil las flechas estorban menos abajo que sobre la foto. */
.gal-flecha{top:auto;bottom:9px;transform:none}
}
/* ---------------------------------------------------------------
50. Portada: tarjetas oscuras dentro del tema claro
`body.home-premium .anun-card` pinta la tarjeta oscura SIEMPRE, porque
va sobre la foto del heroe. Pero sus hijos (la fecha, el nombre, los
chips) seguian la tinta del tema claro y quedaban negro sobre negro.
Aqui se les impone la tinta clara: la tarjeta es oscura en los dos temas,
asi que lo de dentro tambien.
--------------------------------------------------------------- */
body.home-premium .anun-card,
body.home-premium .anun-card p,
body.home-premium .anun-card strong,
body.home-premium .anun-card span,
body.home-premium .anun-card small,
body.home-premium .anun-card time,
body.home-premium .anun-card div{color:#e8edf7}
/* Con !important porque la fecha hereda la tinta oscura del tema claro
por una via que no se puede ganar solo con especificidad. */
body.home-premium .anun-card .tiny,
body.home-premium .anun-card .tiny *,
body.home-premium .anun-card .muted{color:#aebbcf !important}
body.home-premium .anun-card a{color:#eaf1f8}
body.home-premium .anun-card .anun-who a{color:#fff;font-weight:800}
body.home-premium .anun-card .anun-who a:hover{color:#9ed2ff}
body.home-premium .anun-card .anun-detail{color:#ffd86b;font-weight:800}
body.home-premium .anun-card .anun-detail:hover{color:#ffe79a}
/* Chips y sellos dentro de la tarjeta: fondo propio, no el del tema */
body.home-premium .anun-card .badge{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.22)}
body.home-premium .anun-card .chip{background:rgba(255,255,255,.12);color:#eaf1f8;border-color:rgba(255,255,255,.2)}
body.home-premium .anun-card .v-seal{background:#2f8fe6;color:#fff}
body.home-premium .anun-card .v-seal svg path{stroke:#fff}
/* La fecha se quedaba pegada al nombre y se leia como parte de el */
body.home-premium .anun-who .tiny{display:block;margin-top:2px;opacity:.9}
/* Mismo problema en las otras islas oscuras de la portada */
body.home-premium .px-card,
body.home-premium .px-card p,
body.home-premium .px-card span,
body.home-premium .px-card small{color:#e8edf7}
body.home-premium .px-card .tiny{color:#aebbcf}
/* Enlace de vuelta al portal en el pie */
.pie-volver{font-weight:800}
/* Los dos textos del perfil */
.dos-textos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.txt-bloque{border:1px solid var(--line);border-radius:13px;padding:13px}
.txt-bloque textarea{width:100%}
.txt-publico{border-left:4px solid #1f7a4d}
.txt-privado{border-left:4px solid var(--az-btn);background:var(--az-suave)}
.txt-etiq{
float:right;font-size:10.5px;font-weight:800;letter-spacing:.05em;
padding:2px 8px;border-radius:999px;background:var(--az-suave);color:var(--az-osc);
}
.txt-publico .txt-etiq{background:rgba(31,122,77,.14);color:#1f7a4d}
html[data-theme="dark"] .txt-publico .txt-etiq{color:#79d7a5}
.nota-usuario{border-left-color:#8a6d1f}
@media (max-width:760px){
.dos-textos{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------
51. Dos sellos: persona en plomo, empresa en azul
El azul se reserva para las empresas verificadas; el de una persona
es un check discreto que no compite con el.
--------------------------------------------------------------- */
.v-seal.v-persona{background:#7b8794;color:#fff}
.v-seal.v-persona:hover{background:#66707c}
.v-seal.v-emp{background:#1d7fe0;color:#fff}
.v-seal.v-emp:hover{background:#1668b9}
.v-seal.v-emp.vip,.v-seal.v-persona.vip{background:#7b52d3}
html[data-theme="dark"] .v-seal.v-persona{background:#8e99a6}
html[data-theme="dark"] .v-seal.v-emp{background:#3d9bf0}
/* --- Filtros de las pantallas de listado --- */
.filtros-panel{padding:13px 15px}
.filtros-fila{
display:grid;gap:10px;align-items:end;
grid-template-columns:minmax(180px,2fr) repeat(4,minmax(110px,1fr)) auto;
}
.filtro-campo{display:flex;flex-direction:column;gap:3px;min-width:0}
.filtro-campo .f{margin:0;font-size:11px}
.filtro-campo input,.filtro-campo select{width:100%}
.filtro-acciones{flex-direction:row;gap:7px}
.form-cel{display:flex;gap:6px;align-items:center}
@media (max-width:900px){
.filtros-fila{grid-template-columns:1fr 1fr}
.filtro-busca{grid-column:1/-1}
.filtro-acciones{grid-column:1/-1}
}
/* --- Lapiz para editar un dato suelto --- */
.dato-editable{display:inline-flex;align-items:center;gap:6px}
.lapiz{
appearance:none;border:1px solid var(--line);background:var(--card);color:var(--muted);
width:26px;height:26px;border-radius:8px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
opacity:0;transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.dato-editable:hover .lapiz,.lapiz:focus{opacity:1}
.lapiz:hover{background:var(--az-suave);color:var(--az-osc);border-color:var(--az)}
.lapiz svg{width:13px;height:13px}
@media (hover:none){
/* Sin raton no hay hover que revele el lapiz: se deja siempre visible. */
.lapiz{opacity:.75}
}
.editar-fondo{
position:fixed;inset:0;z-index:1500;background:rgba(8,12,18,.7);
display:flex;align-items:center;justify-content:center;padding:18px;
}
.editar-fondo[hidden]{display:none!important}
.editar-caja{
width:min(430px,100%);background:var(--card);border:1px solid var(--line);
border-radius:16px;padding:20px;box-shadow:0 26px 70px rgba(0,0,0,.4);
}
.editar-caja h3{margin:0 0 4px;font-family:'Fraunces',Georgia,serif;font-size:19px}
.editar-caja textarea,.editar-caja input,.editar-caja select{width:100%}
.editar-pie{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
/* ---------------------------------------------------------------
52. Chat: contactos sin conversacion todavia
--------------------------------------------------------------- */
.chat-sep{
margin:14px 12px 4px;padding-top:12px;border-top:1px solid var(--line);
font-size:15px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.chat-sep .tiny{font-weight:600;opacity:.8}
.chat-nuevo .preview{opacity:.75;font-style:italic}
.chat-ir{
font-style:normal;font-size:11px;font-weight:800;
padding:3px 9px;border-radius:999px;
background:var(--az-suave);color:var(--az-osc);white-space:nowrap;
}
.chat-nuevo:hover .chat-ir{background:var(--az-btn);color:#fff}
/* ---------------------------------------------------------------
53. "Otras personas tambien vieron" al pie de modelos.php
Reaprovecha el carrusel de las tiras (.nv-carrusel) y solo define
la tarjeta, que aqui lleva foto grande en vez de avatar redondo.
--------------------------------------------------------------- */
.sugeridas{margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.sugeridas .nv-head{align-items:flex-start}
.sugeridas .nv-head p{margin:2px 0 0}
.sug-card{
flex:0 0 auto;width:186px;
display:flex;flex-direction:column;gap:3px;
padding:0 0 11px;border:1px solid var(--line);border-radius:14px;
background:var(--card);overflow:hidden;text-decoration:none;color:inherit;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.sug-card:hover{transform:translateY(-4px);border-color:var(--az);box-shadow:0 14px 30px rgba(15,39,66,.18)}
.sug-foto{position:relative;display:block;height:212px;overflow:hidden;background:var(--bg2,#e6e8ed)}
.sug-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .3s ease}
.sug-card:hover .sug-foto img{transform:scale(1.05)}
.sug-tipo{
position:absolute;top:8px;left:8px;
padding:3px 9px;border-radius:999px;
background:rgba(8,12,20,.7);color:#fff;
font:800 10px/1.5 Manrope,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;
}
.sug-nombre{
display:block;padding:9px 11px 0;font-size:13.5px;font-weight:800;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sug-card .tiny{padding:0 11px;opacity:.85}
.sug-ir{
margin:8px 11px 0;padding:6px 0;text-align:center;
border-radius:9px;background:var(--az-suave);color:var(--az-osc);
font:800 12px Manrope,system-ui,sans-serif;
}
.sug-card:hover .sug-ir{background:var(--az-btn);color:#fff}
@media (max-width:640px){
.sug-card{width:152px}
.sug-foto{height:176px}
}
/* ---------------------------------------------------------------
54. Anchos de formulario
Los campos heredaban width:100% de la tarjeta, asi que en el login
median 540 px de ancho y 51 de alto: parecian una caja de comentarios
y no una casilla de usuario. Aqui se les pone un ancho de lectura.
--------------------------------------------------------------- */
.form-acceso{max-width:370px}
.form-acceso input,
.form-acceso .pw-wrap{width:100%}
.form-acceso input{padding:10px 13px;font-size:15px}
.form-acceso .f{margin-top:12px;margin-bottom:4px}
.form-acceso .codigo-otp{font-size:23px;padding:12px 14px}
/* Selects sueltos (no dentro de una rejilla): un desplegable de tres
opciones no necesita el ancho entero de la tarjeta. */
.form-wide > select,
.form-wide > input:not([type=file]),
.card.pad > form > select{max-width:360px}
/* La zona de videos del muro se veia amontonada */
.muro-videos,.perfil-videos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-top:10px}
.muro-videos video,.perfil-videos video{width:100%;height:auto;border-radius:12px;background:#0a0e14;display:block}
/* Aire entre publicaciones: iban pegadas una a otra */
.post + .post,.muro-post + .muro-post{margin-top:14px}
.post{border-radius:14px}
@media (max-width:640px){
.form-acceso{max-width:100%}
}
/* ---------------------------------------------------------------
55. Cuantas publicaciones por tanda en el muro
--------------------------------------------------------------- */
.feed-npp{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
margin:0 0 12px;padding:9px 12px;
border:1px solid var(--line);border-radius:11px;background:var(--az-suave);
}
.npp-btn{
appearance:none;border:1px solid var(--line);background:var(--card);color:var(--txt);
padding:4px 12px;border-radius:999px;cursor:pointer;
font:800 12.5px Manrope,system-ui,sans-serif;
}
.npp-btn:hover{border-color:var(--az);color:var(--az-osc)}
.npp-btn.on{background:var(--az-btn);color:#fff;border-color:var(--az-btn)}
.feed-npp .tiny{opacity:.8}
/* ---------------------------------------------------------------
56. Movil y app instalada
Tres cosas que solo se notan con el telefono en la mano:
el dedo necesita 44 px, iOS hace zoom en cualquier campo de menos de
16 px, y con la app a pantalla completa el contenido se mete debajo
de la barra de gestos.
--------------------------------------------------------------- */
/* --- Zonas de toque --- */
@media (max-width:900px){
/* Flechas de los carruseles y de la galeria: eran 38x24 */
.nv-flecha,.gal-flecha{min-width:40px;min-height:40px}
/* Enlaces sueltos del pie y de las tarjetas: 16 px de alto no se aciertan */
.footer-bottom a,
.pie-volver,
.anun-detail,
.notif-mini-item,
.chat-thread{min-height:40px;display:flex;align-items:center}
.footer-bottom a{padding:6px 0}
.footer-bottom .col-lg-4{line-height:2}
/* Botones y chips pequenos del filtro */
.btn-sm,.npp-btn,.gal-modo,.chip,.kpi-f{min-height:38px}
.btn-sm{display:inline-flex;align-items:center}
.staff-tabs a,.feed-tabs a{min-height:40px;display:inline-flex;align-items:center}
/* Casillas de seleccion del panel */
input[type=checkbox],input[type=radio]{width:20px;height:20px}
}
/* --- iOS: cualquier campo por debajo de 16 px provoca zoom al tocarlo,
y despues la pagina se queda desencuadrada. --- */
@media (max-width:900px){
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,textarea{font-size:16px}
.filtro-campo input,.filtro-campo select{font-size:16px}
.codigo-otp{font-size:24px}
}
/* --- App instalada: respetar el area segura del telefono --- */
@supports (padding:max(0px)){
@media (display-mode:standalone),(display-mode:fullscreen){
body{
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
}
.topbar{padding-top:max(10px,env(safe-area-inset-top))}
.bottomnav{padding-bottom:max(6px,env(safe-area-inset-bottom))}
.chat-dock,.fab-chat{bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px))}
/* Ya instalada, invitar a instalar sobra */
.instalar-app,[data-solo-web]{display:none!important}
}
}
/* --- Campana y menu de cuenta en movil ---
Los dos viven dentro de `.nav`, que en el telefono esta plegada, asi que
solo se ven al abrir el menu. Es lo correcto: la barra inferior ya lleva
Chat, Alertas y Yo con sus contadores, y duplicarlos arriba solo quitaria
sitio a la marca. Dentro del menu se les da tamano de dedo. */
@media (max-width:900px){
.nav-campana .nav-dd-btn,
.nav-cuenta .nav-dd-btn{min-height:44px;justify-content:flex-start}
.nav-campana .campana-n{position:static;margin-left:6px;border:0}
.nav-cuenta .cuenta-ava{width:30px;height:30px}
.notif-mini{width:100%}
.notif-mini-lista{max-height:52vh}
}
/* Sello verificado: 16 px era poco para abrir su etiqueta con el dedo. */
@media (max-width:900px){
.v-seal{width:22px;height:22px}
.v-seal.sm{width:20px;height:20px}
.v-seal svg{width:12px;height:12px}
.nv-head-der .tiny{padding:9px 4px;display:inline-flex;align-items:center}
}
/* ---------------------------------------------------------------
57. Menu plegado del movil (paginas antiguas)
`.navbar-collapse` de Bootstrap no lleva fondo propio. Al desplegarlo en
el telefono, los enlaces se quedaban flotando encima del contenido de la
pagina: sobre una tarjeta blanca y con la tinta clara de la barra, no se
leia absolutamente nada. Aqui el panel pasa a ser una superficie con su
fondo, su borde y su color de texto.
--------------------------------------------------------------- */
@media (max-width:767px){
#menug .navbar-collapse.in,
#menug .navbar-collapse.collapsing{
background:var(--card,#fff);
border-top:1px solid var(--line,#d2d6dc);
border-bottom:1px solid var(--line,#d2d6dc);
box-shadow:0 14px 30px rgba(0,0,0,.18);
max-height:78vh;overflow-y:auto;
padding:6px 0;
margin-left:-15px;margin-right:-15px; /* ocupa todo el ancho de la barra */
}
/* El texto sigue al panel, no a la barra: por eso hace falta ganarle al
`!important` que pinta los enlaces claros sobre la barra oscura. */
#menug .navbar-collapse.in a,
#menug .navbar-collapse.collapsing a{
color:#1b2430!important;
padding:13px 18px;
min-height:46px;display:flex;align-items:center;
border-bottom:1px solid var(--line,#e6e8ed);
font-weight:700;letter-spacing:.02em;
}
#menug .navbar-collapse.in .navbar-nav>li:last-child>a{border-bottom:0}
#menug .navbar-collapse.in .navbar-nav>li>a:hover,
#menug .navbar-collapse.in .navbar-nav>li>a:focus,
#menug .navbar-collapse.in .navbar-nav>li.active>a{
background:var(--az-suave,#eaf2fb);
color:var(--az-osc,#0d4f9c)!important;
}
#menug .navbar-collapse.in .navbar-nav{margin:0}
#menug .navbar-collapse.in .navbar-nav>li{float:none;width:100%}
/* Las rayas del boton deben verse sobre su propia barra, sea cual sea */
#menug .navbar-toggle{border-color:rgba(128,128,128,.5)}
}
/* En modo oscuro el panel es oscuro, no blanco */
html[data-theme="dark"] #menug .navbar-collapse.in,
html[data-theme="dark"] #menug .navbar-collapse.collapsing{
background:var(--card,#141a24);
}
/* El panel oscuro necesita su propia tinta: `--txt` no cambia con el tema en
las paginas antiguas, asi que se fija a mano. */
html[data-theme="dark"] #menug .navbar-collapse.in a,
html[data-theme="dark"] #menug .navbar-collapse.collapsing a{color:#e8edf7!important}
html[data-theme="dark"] #menug .navbar-collapse.in .navbar-nav>li>a{border-bottom-color:rgba(255,255,255,.09)}
html[data-theme="dark"] #menug .navbar-collapse.in .navbar-nav>li>a:hover,
html[data-theme="dark"] #menug .navbar-collapse.in .navbar-nav>li>a:focus{
background:rgba(255,255,255,.08);color:#9ed2ff!important;
}
/* ---------------------------------------------------------------
58. Datos tapados, cuarentena y origen del alta
--------------------------------------------------------------- */
.dato-tapado{
position:relative;display:inline-flex;align-items:center;gap:5px;
padding:2px 9px;border-radius:999px;
background:var(--az-suave);color:var(--muted);
border:1px dashed var(--line);cursor:help;vertical-align:middle;
}
.dato-tapado b{font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.dato-tapado-aviso{
position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
z-index:20;white-space:nowrap;
background:#1f2937;color:#fff;font:600 11.5px Manrope,system-ui,sans-serif;
padding:7px 11px;border-radius:9px;box-shadow:0 8px 20px rgba(0,0,0,.28);
opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
}
.dato-tapado-aviso a{color:#9ed2ff;font-weight:800;margin-left:5px}
.dato-tapado:hover .dato-tapado-aviso,
.dato-tapado:focus .dato-tapado-aviso{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.dato-tapado:hover,.dato-tapado:focus{border-color:var(--az);color:var(--az-osc)}
.ficha-servicio-tapado{
display:flex;flex-direction:column;gap:6px;align-items:flex-start;
padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--az-suave);
}
/* --- Cuarentena y origen, en el panel --- */
.cuarentena-aviso{
border-left:4px solid #c0392b;background:rgba(192,57,43,.09);
padding:11px 14px;border-radius:0 11px 11px 0;margin-bottom:12px;
}
.cuarentena-aviso strong{color:#c0392b}
html[data-theme="dark"] .cuarentena-aviso strong{color:#f0949c}
.origen-alta{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.origen-item{background:var(--az-suave);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.origen-item span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.origen-item b{font-size:13px;word-break:break-word}
.origen-item.no-cuadra{border-color:#c0392b;background:rgba(192,57,43,.08)}
.origen-item.no-cuadra b{color:#c0392b}
html[data-theme="dark"] .origen-item.no-cuadra b{color:#f0949c}
.badge.b-bot{background:#c0392b;color:#fff}
.rec-extra{margin-top:12px;border:1px dashed var(--line);border-radius:11px;padding:10px 13px}
.rec-extra>summary{cursor:pointer;font-weight:800;font-size:13px}
.rec-extra .f{margin-top:10px}
@media (hover:none){
/* Sin raton no hay hover: el aviso se abre al tocar (focus). */
.dato-tapado{cursor:pointer}
}
/* ---------------------------------------------------------------
59. "En el portal" u "Oculto", debajo del estado
El desplegable dice si la persona puede entrar; esta etiqueta dice si
el publico la ve, que no es lo mismo y era justo lo que se confundia.
--------------------------------------------------------------- */
.chip-portal{
display:block;margin-top:5px;padding:3px 9px;border-radius:8px;
font:800 10.5px/1.35 Manrope,system-ui,sans-serif;
letter-spacing:.03em;text-align:center;cursor:help;
}
.chip-portal.si{background:rgba(31,122,77,.14);color:#1f7a4d;border:1px solid rgba(31,122,77,.3)}
.chip-portal.no{background:rgba(192,57,43,.11);color:#a4342a;border:1px solid rgba(192,57,43,.28)}
.chip-portal small{
display:block;margin-top:2px;font-weight:600;font-size:9.5px;
text-transform:lowercase;letter-spacing:0;opacity:.9;
}
html[data-theme="dark"] .chip-portal.si{background:rgba(31,122,77,.24);color:#79d7a5}
html[data-theme="dark"] .chip-portal.no{background:rgba(192,57,43,.24);color:#f0949c}
/* La tarjeta de "activos ocultos" avisa sola cuando no esta en cero */
.kpi-f[data-kpi="oculto"] b{color:#a4342a}
html[data-theme="dark"] .kpi-f[data-kpi="oculto"] b{color:#f0949c}
/* ---------------------------------------------------------------
60. Portales por lugar (/peru, /peru/arequipa) y banderas dibujadas
--------------------------------------------------------------- */
.lugar-wrap{padding-bottom:40px}
.miga{font-size:12.5px;margin:14px 0 10px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.miga a{font-weight:700}
.miga span{opacity:.5}
.lugar-cab{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.lugar-bandera{
flex:0 0 auto;display:inline-flex;border-radius:6px;overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,.18);border:1px solid var(--line);
}
.lugar-cab h1{margin:0 0 4px;font-size:clamp(22px,4vw,32px)}
.lugar-sub{margin:0;color:var(--muted);font-size:14px}
.lugar-sub strong{color:var(--az-osc);font-size:17px}
.lugar-ciudades{margin:30px 0 10px}
.lugar-ciudades h2{margin:0 0 4px;font-size:21px}
.lugar-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lugar-chips a{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;border-radius:999px;
border:1px solid var(--line);background:var(--card);
font-weight:700;font-size:13px;text-decoration:none;color:var(--txt);
min-height:40px;
}
.lugar-chips a:hover{border-color:var(--az);background:var(--az-suave);color:var(--az-osc)}
.lugar-chips small{
background:var(--az-suave);color:var(--az-osc);
padding:1px 7px;border-radius:999px;font-size:11px;font-weight:800;
}
.lugar-chips a:hover small{background:var(--az-btn);color:#fff}
.lugar-texto{margin:34px 0 10px;max-width:75ch}
.lugar-texto h2{font-size:20px;margin:0 0 8px}
.lugar-texto p{line-height:1.7;font-size:14.5px}
/* --- Banderas del pie: dibujo + nombre, ya no letras sueltas --- */
.flag-country{
display:inline-flex;flex-direction:column;align-items:center;gap:3px;
padding:7px 9px;border-radius:11px;min-width:60px;min-height:44px;
border:1px solid var(--line);text-decoration:none;
}
.flag-country em{font-style:normal;font-size:10.5px;font-weight:700;opacity:.9;white-space:nowrap}
.flag-country small{font-size:10px;font-weight:800;opacity:.75}
.flag-country .bandera{display:block;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.flag-country:hover{border-color:var(--az);background:rgba(255,255,255,.08)}
.flag-country.on{border-color:var(--az-btn);background:rgba(29,127,224,.18)}
.flag-country.off{opacity:.4;cursor:default}
.bandera{vertical-align:middle}
@media (max-width:640px){
.lugar-cab{flex-direction:column;align-items:flex-start}
.flag-country{min-width:54px;padding:6px}
.flag-country em{font-size:9.5px}
}
/* ---------------------------------------------------------------
61. Ficha: la foto antes que los datos
El orden del HTML se conserva (el nombre y la descripcion siguen
yendo primero, que es lo que lee un buscador); solo cambia como se
presenta, con flex.
--------------------------------------------------------------- */
.ficha-row{display:flex;flex-wrap:wrap;align-items:flex-start}
.ficha-row>.col-md-6:nth-child(2){order:-1}