/* =========================================================
Alquilotrastero.com — estilos base (mobile-first)
========================================================= */
:root {
/* Se mantiene el naranja de marca como acento; el resto de la paleta
(fondo, bordes, texto) se acerca a los grises neutros de Apple. */
--color-primary: #ff6600;
--color-primary-dark: #e05500;
--color-secondary: #0d1b2a;
--color-bg: #f5f5f7;
--color-card: #ffffff;
--color-border: #e5e5ea;
--color-text: #1d1d1f;
--color-text-muted: #86868b;
--radius: 18px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 14px rgba(0,0,0,.05);
--shadow-hover: 0 2px 6px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10);
--ease: cubic-bezier(.4, 0, .2, 1);
--header-h: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--color-bg);
color: var(--color-text);
line-height: 1.5;
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; margin: 0; }
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 16px;
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
height: var(--header-h);
}
/* Barra translúcida "vidrio esmerilado", como la barra de menús de macOS o la
cabecera de apple.com: el color solido de arriba es el fallback para
navegadores sin soporte de backdrop-filter. Solo en escritorio (>=900px,
el mismo corte que el resto de reglas nav-desktop/nav-toggle de aquí
abajo): en móvil el header pasa a fondo sólido a propósito, para evitar
el jank de repintado que backdrop-filter provoca en Safari/Chrome
móviles al hacer scroll con un header en position:sticky. */
@media (min-width: 900px) {
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header {
background: rgba(255, 255, 255, .78);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
}
}
.site-header .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.logo {
display: flex;
align-items: center;
min-width: 0;
flex-shrink: 1;
}
.logo img {
display: block;
height: 26px;
width: auto;
max-width: 100%;
}
@media (min-width: 480px) {
.logo img { height: 32px; }
}
@media (min-width: 900px) {
.logo img { height: 40px; }
}
.nav-desktop { display: none; align-items: center; gap: 20px; }
.nav-desktop a.btn { white-space: nowrap; }
.nav-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border: none; background: transparent;
font-size: 24px;
}
.nav-mobile {
display: none;
position: fixed;
inset: var(--header-h) 0 0 0;
background: var(--color-card);
z-index: 99;
padding: 24px 16px;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
display: block;
padding: 14px 4px;
font-size: 18px;
border-bottom: 1px solid var(--color-border);
}
@media (min-width: 900px) {
.nav-desktop { display: flex; }
.nav-toggle { display: none; }
.nav-mobile { display: none !important; }
}
/* ---------- Botones ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
border-radius: 980px;
font-weight: 590;
font-size: 15px;
letter-spacing: -0.011em;
border: 1px solid transparent;
transition: transform .12s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-danger { background: #fff; color: #d93025; border-color: #f3c2bd; }
/* ---------- Hero / Buscador ---------- */
.hero {
background: linear-gradient(135deg, var(--color-secondary), #16324a);
color: #fff;
padding: 36px 0 90px;
}
.hero h1 {
font-size: 26px;
margin: 0 0 6px;
font-weight: 700;
}
.hero p { color: #cbd5e1; margin: 0 0 20px; font-size: 15px; }
.search-card {
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow-hover);
padding: 16px;
margin-top: -60px;
color: var(--color-text);
}
.search-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.search-tab {
flex: 1;
text-align: center;
padding: 10px;
border-radius: var(--radius-sm);
font-weight: 700;
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.search-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.search-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.field label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--color-text-muted);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: .03em;
}
.field select, .field input {
width: 100%;
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
font-size: 15px;
background: #fff;
}
.field select:focus, .field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(255,102,0,.15); }
@media (min-width: 700px) {
.search-grid { grid-template-columns: repeat(4, 1fr); align-items: end; }
.search-grid .field-submit { grid-column: span 4; }
}
@media (min-width: 1000px) {
.search-grid { grid-template-columns: 2fr 2fr 1fr 1fr 1fr; }
.search-grid .field-submit { grid-column: auto; }
}
/* ---------- Secciones home ---------- */
.section { padding-top: 40px; padding-bottom: 40px; }
.section-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-title a { font-size: 14px; color: var(--color-primary); font-weight: 700; }
.provincias-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 700px) { .provincias-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .provincias-grid { grid-template-columns: repeat(6, 1fr); } }
.provincia-chip {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 14px 10px;
text-align: center;
font-weight: 600;
font-size: 14px;
box-shadow: var(--shadow);
}
.provincia-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* ---------- Cards de anuncio ---------- */
.anuncios-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) { .anuncios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .anuncios-grid { grid-template-columns: repeat(3, 1fr); } }
.anuncio-card {
background: var(--color-card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: box-shadow .15s ease, transform .15s ease;
display: flex;
flex-direction: column;
}
.anuncio-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.anuncio-card .foto-wrap {
aspect-ratio: 4 / 3;
background: #e9ecef;
position: relative;
overflow: hidden;
}
.anuncio-card .foto {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.anuncio-card .badge {
position: absolute;
top: 10px; left: 10px;
background: var(--color-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
}
.anuncio-card .badge-categoria {
left: auto;
right: 10px;
background: #2d2d2d;
}
.anuncio-card .cuerpo { padding: 12px 14px 16px; flex: 1; display: flex; flex-direction: column; }
.anuncio-card .precio { font-size: 19px; font-weight: 700; color: var(--color-secondary); }
.anuncio-card .titulo { font-size: 15px; font-weight: 600; margin: 4px 0; }
.anuncio-card .meta { font-size: 13px; color: var(--color-text-muted); display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
/* ---------- Listado / resultados con filtros ---------- */
.resultados-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
@media (min-width: 960px) {
.resultados-layout { grid-template-columns: 260px 1fr; }
}
.filtros-panel {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 16px;
}
.filtros-panel h2 { margin-top: 0; font-size: 15px; }
.filtros-panel .field { margin-bottom: 12px; }
.resultados-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.resultados-header .total { font-weight: 700; }
.paginacion { display: flex; gap: 6px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.paginacion a, .paginacion span {
padding: 8px 13px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: #fff;
font-weight: 600;
font-size: 14px;
}
.paginacion .activa { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* ---------- Ficha de anuncio ---------- */
.detalle-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 960px) { .detalle-layout { grid-template-columns: 2fr 1fr; } }
.galeria-principal { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: #e9ecef; }
.galeria-principal.galeria-clicable { cursor: zoom-in; }
/* La foto principal es ahora un ![]()
real (antes un div con background-image, sin valor
para el SEO de imágenes); lo posicionamos a pantalla completa dentro del contenedor,
que conserva el aspect-ratio y el fondo gris de reserva cuando no hay foto. */
.galeria-principal #galeriaPrincipal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .22s ease; }
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.galeria-miniaturas img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; }
.galeria-miniaturas img.activa { border-color: var(--color-primary); }
/* Flechas de navegacion sobre la imagen principal y sobre el lightbox */
.galeria-flecha {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, .45);
color: #fff;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: background .15s ease;
}
.galeria-flecha:hover { background: rgba(0, 0, 0, .7); }
.galeria-flecha-izq { left: 10px; }
.galeria-flecha-der { right: 10px; }
/* ---------- Lightbox / pop-up de foto ampliada ---------- */
.lightbox { display: none; }
.lightbox:not([hidden]) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
z-index: 300;
background: rgba(6, 7, 9, .97);
padding: 16px;
}
body.lightbox-abierto { overflow: hidden; }
.lightbox-imagen {
width: 100%;
max-width: 1100px;
flex: 1 1 auto;
min-height: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity .22s ease;
}
.lightbox-cerrar {
position: absolute;
top: 14px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.lightbox-cerrar:hover { background: rgba(255, 255, 255, .25); }
.lightbox-flecha { width: 48px; height: 48px; font-size: 24px; background: rgba(255, 255, 255, .12); }
.lightbox-flecha:hover { background: rgba(255, 255, 255, .25); }
.lightbox-flecha.galeria-flecha-izq { left: 8px; }
.lightbox-flecha.galeria-flecha-der { right: 8px; }
.lightbox-miniaturas {
display: flex;
gap: 8px;
margin-top: 14px;
overflow-x: auto;
max-width: 100%;
padding-bottom: 4px;
}
.lightbox-miniaturas img {
width: 64px;
height: 48px;
object-fit: cover;
border-radius: 6px;
cursor: pointer;
border: 2px solid transparent;
opacity: .6;
flex: 0 0 auto;
}
.lightbox-miniaturas img.activa { border-color: var(--color-primary); opacity: 1; }
@media (max-width: 640px) {
.galeria-flecha { width: 34px; height: 34px; font-size: 16px; }
.lightbox-cerrar { top: 8px; right: 8px; }
.lightbox-flecha { width: 40px; height: 40px; }
}
.detalle-info h1 { font-size: 22px; margin: 16px 0 4px; }
.detalle-info .ubicacion { color: var(--color-text-muted); margin-bottom: 12px; }
.compartir-anuncio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.compartir-etiqueta { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.detalle-precio { font-size: 28px; font-weight: 700; color: var(--color-secondary); }
.detalle-caracteristicas { display: flex; gap: 20px; margin: 16px 0; flex-wrap: wrap; }
.detalle-caracteristicas .item { background: var(--color-bg); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; }
.contacto-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 18px;
position: sticky;
top: calc(var(--header-h) + 16px);
}
.contacto-card h3 { margin-top: 0; }
.contacto-card textarea {
width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
font-family: inherit; font-size: 14px; min-height: 90px; resize: vertical;
}
/* ---------- Banners ---------- */
.banner-slot { margin: 20px 0; text-align: center; }
.banner-slot img, .banner-slot video { border-radius: var(--radius); width: 100%; display: block; }
.banner-slot .banner-label {
font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
color: var(--color-text-muted); margin-bottom: 4px;
}
.banner-slot.sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
.banner-slot.footer { max-width: 728px; margin: 30px auto 0; }
.banner-slot.footer .banner-label { color: #94a3b8; }
/* ---------- Formularios generales ---------- */
.form-card {
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
max-width: 560px;
margin: 0 auto;
}
.form-card h1 { font-size: 22px; margin-top: 0; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea {
width: 100%; padding: 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(255,102,0,.15);
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-cols-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .form-cols-2 { grid-template-columns: 1fr 1fr; } }
/* Dirección + Número en la misma línea, con el número más estrecho: se
mantiene en fila incluso en móvil (a diferencia de .form-cols-2, que
apila en pantallas pequeñas) porque el campo numérico es lo bastante
pequeño para convivir con la dirección en una sola línea. */
.form-cols-direccion-numero { display: flex; gap: 10px; align-items: flex-start; }
.form-cols-direccion-numero .campo-direccion { flex: 1 1 auto; min-width: 0; }
.form-cols-direccion-numero .campo-numero { flex: 0 0 88px; }
/* El atributo [hidden] debe ganar siempre a cualquier "display" que un
selector de clase (p.ej. .form-cols-2 { display:grid }) le imponga al
mismo elemento: con igual especificidad, la regla de la clase (definida
después en la cascada) ganaba y el bloque se quedaba visible aunque el
JS le pusiera element.hidden = true. Bug real: en el formulario de
publicar anuncio y en el de alta de inmueble Pro, los campos de
Planta/Puerta y Metros/Altura no se ocultaban al elegir "Centro
Self-Storage" o "Guardamuebles" pese a que el JS los marcaba como
hidden.
*/
[hidden] { display: none !important; }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.alert-error { background: #fdecea; color: #a4222c; border: 1px solid #f3c2bd; }
.alert-ok { background: #e8f6ee; color: #1e6b3c; border: 1px solid #bfe6cd; }
/* ---------- Tablas de panel ---------- */
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.tabla-responsive { width: 100%; overflow-x: auto; background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
table th, table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 14px; }
table th { background: var(--color-bg); font-size: 12px; text-transform: uppercase; color: var(--color-text-muted); }
table tr:last-child td { border-bottom: none; }
.thumb-mini { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
@media (min-width: 700px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.stat-card .num { font-size: 30px; font-weight: 700; color: var(--color-primary); }
.stat-card .label { color: var(--color-text-muted); font-size: 14px; }
.admin-tabs {
display: flex;
gap: 6px;
margin-bottom: 20px;
overflow-x: auto;
/* Fijos bajo la barra superior al hacer scroll, igual que ésta, para
poder cambiar de pestaña (Mis anuncios/Mensajes/...) sin tener que
volver arriba del todo. Fondo sólido + padding propio, porque al
quedar "pegados" el contenido de debajo pasa a estar detrás. */
position: sticky;
top: var(--header-h);
z-index: 90;
background: var(--color-bg);
padding: 10px 0;
margin: 0 0 10px;
}
.admin-tabs a { padding: 10px 16px; border-radius: var(--radius-sm); background: var(--color-card); border: 1px solid var(--color-border); font-weight: 600; font-size: 14px; white-space: nowrap; }
.admin-tabs a.active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
/* Envoltorio que agrupa el menú de pestañas (Resumen/Trasteros/...) y el
formulario de filtros de una misma página de panel para que ambos queden
"flotando" pegados bajo la cabecera al hacer scroll, como una sola pieza,
en vez de que solo el menú se quede fijo y el filtro se desplace con el
resto del contenido. Al ser el envoltorio el que lleva el sticky (y no
cada hijo por separado con su propio "top" calculado), el filtro se puede
añadir o quitar de una página sin tener que recalcular ninguna posición. */
.panel-sticky-header {
position: sticky;
top: var(--header-h);
z-index: 90;
background: var(--color-bg);
padding: 10px 0;
margin: 0 0 10px;
}
.panel-sticky-header .admin-tabs {
position: static;
padding: 0;
margin: 0 0 10px;
}
.panel-sticky-header .filtro-usuarios { margin-bottom: 0; }
/* ---------- Footer ---------- */
.site-footer { background: var(--color-secondary); color: #cbd5e1; margin-top: 50px; padding: 40px 0 24px; }
.site-footer .footer-titulo { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 620px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .footer-grid { grid-template-columns: repeat(5, 1fr); } }
.site-footer a { display: block; padding: 4px 0; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-social { margin-top: 12px; }
.site-footer .footer-social a { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.footer-bottom { text-align: center; font-size: 13px; margin-top: 30px; color: #94a3b8; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.empty-state .btn { margin-top: 14px; }
/* ---------- Combobox con autocompletado (provincia / localidad) ---------- */
.combo { position: relative; }
.combo-search {
width: 100%;
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
font-size: 15px;
background: #fff;
font-family: inherit;
}
.combo-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(255,102,0,.15); }
.combo-search:disabled { background: #f1f3f5; color: #9aa1a9; cursor: not-allowed; }
.combo-options {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-hover);
max-height: 260px;
overflow-y: auto;
z-index: 60;
}
.combo-option { padding: 10px 12px; font-size: 14px; cursor: pointer; }
.combo-option:hover, .combo-option.active { background: var(--color-bg); }
.combo-empty { padding: 10px 12px; font-size: 14px; color: var(--color-text-muted); }
/* ---------- Perfil de usuario (Particular/Profesional) ---------- */
.aviso-perfil {
background: #fff8e6;
border: 1px solid #f0dca0;
color: #7a5c00;
padding: 14px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-size: 14px;
}
.aviso-perfil strong { font-weight: 700; }
.tipo-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 18px;
}
.tipo-toggle label {
display: block;
position: relative;
border: 2px solid var(--color-border);
border-radius: 10px;
padding: 14px;
text-align: center;
font-weight: 600;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.tipo-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-toggle input:checked + span { color: var(--color-primary); }
.tipo-toggle label:has(input:checked) {
border-color: var(--color-primary);
background: #f2f7ff;
}
.tipo-toggle label span.desc {
display: block;
font-weight: 400;
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
}
.filtro-usuarios {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: flex-end;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 18px;
}
.filtro-usuarios .field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--color-text-muted); }
.filtro-usuarios select { padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; min-width: 160px; }
.badge-tipo {
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
}
.badge-tipo-particular { background: #e8f0fe; color: #1a4fb4; }
.badge-tipo-profesional { background: #e8f6ee; color: #1e6b3c; }
.badge-tipo-pendiente { background: #f1f3f5; color: #6b7280; }
.badge-tipo-pro { background: #fff3cd; color: #8a6300; font-weight: 700; }
/* ---------- Zona Pro ---------- */
.pro-kpis {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 24px;
}
@media (min-width: 700px) { .pro-kpis { grid-template-columns: repeat(4, 1fr); } }
.pro-kpi {
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
}
.pro-kpi .valor { font-size: 26px; font-weight: 700; }
.pro-kpi .etiqueta { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.pro-kpi.alerta .valor { color: #d93025; }
.pro-seccion { margin-top: 32px; }
.pro-seccion h2 { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.badge-estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-estado-vigente, .badge-estado-pagado { background: #e8f6ee; color: #1e6b3c; }
.badge-estado-finalizado { background: #f1f3f5; color: #6b7280; }
.badge-estado-rescindido { background: #fdeceb; color: #b3261e; }
.badge-estado-pendiente { background: #fff8e6; color: #7a5c00; }
.badge-estado-atrasado { background: #fdeceb; color: #b3261e; }
/* ---------- Dashboard de analíticas Gestión Pro ---------- */
.pro-dashboard-header {
display: flex;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.pro-dashboard-header .field { min-width: 220px; }
.pro-mes-selector { display: flex; align-items: center; gap: 8px; }
.pro-mes-actual { font-weight: 700; min-width: 140px; text-align: center; }
.pro-chart-wrap { width: 100%; overflow-x: auto; }
.pro-chart { display: block; width: 100%; max-width: 560px; height: auto; }
.pro-chart-bar-pagado { fill: #2e9e5b; }
.pro-chart-bar-pendiente { fill: #e2a300; }
.pro-chart-bar-vacia { fill: var(--color-border); }
.pro-chart-label { font-size: 11px; fill: var(--color-text-muted); }
.pro-chart-leyenda { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }
.pro-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.pro-chart-swatch-pagado { background: #2e9e5b; }
.pro-chart-swatch-pendiente { background: #e2a300; }
.pro-board { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .pro-board { grid-template-columns: repeat(2, 1fr); } }
.pro-board-col h3 { font-size: 15px; margin: 0 0 10px; color: var(--color-text-muted); }
.pro-board-vacio { color: var(--color-text-muted); font-size: 14px; }
.pro-unit-card {
background: var(--color-card);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
padding: 12px 14px;
margin-bottom: 10px;
border-left: 4px solid var(--color-border);
}
.pro-unit-disponible { border-left-color: #2e9e5b; }
.pro-unit-ocupado { border-left-color: var(--color-primary); }
.pro-unit-ref { font-weight: 700; }
.pro-unit-centro { font-weight: 400; color: var(--color-text-muted); }
.pro-unit-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }
.pro-unit-inquilino { font-size: 13px; margin-top: 6px; }
.pro-aviso-atrasados { background: #fdeceb; color: #b3261e; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.pro-aviso-atrasados a { color: #b3261e; text-decoration: underline; }
.pro-upsell {
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 32px 24px;
text-align: center;
max-width: 620px;
margin: 0 auto;
}
.pro-upsell .icono { font-size: 40px; margin-bottom: 10px; }
.pro-upsell h1 { margin: 0 0 10px; font-size: 22px; }
.pro-upsell p { color: var(--color-text-muted); margin: 0 0 20px; }
.pro-upsell ul { text-align: left; max-width: 380px; margin: 0 auto 24px; }
.pro-upsell li { padding: 6px 0; }
.pro-upsell li::before { content: "✓ "; color: var(--color-primary); font-weight: 700; }
.contrato-datos { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.contrato-datos dl { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
@media (min-width: 700px) { .contrato-datos dl { grid-template-columns: 1fr 1fr; } }
.contrato-datos dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.contrato-datos dd { margin: 2px 0 0; }
.contrato-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
/* ---------- Páginas legales ---------- */
.legal-content {
background: var(--color-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px 20px;
max-width: 820px;
margin: 0 auto;
line-height: 1.65;
}
@media (min-width: 700px) { .legal-content { padding: 40px 48px; } }
.legal-content h1 { font-size: 26px; margin: 0 0 4px; }
.legal-content .legal-actualizado { color: var(--color-text-muted); font-size: 13px; margin-top: 0; margin-bottom: 28px; }
.legal-content h2 { font-size: 18px; margin: 32px 0 12px; color: var(--color-secondary); }
.legal-content p { margin: 0 0 14px; }
.legal-content ul { margin: 0 0 14px; padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--color-primary); font-weight: 600; }
.legal-content code {
background: var(--color-bg);
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
}
.legal-table {
width: 100%;
border-collapse: collapse;
margin: 0 0 20px;
font-size: 13px;
}
.legal-table th, .legal-table td {
border: 1px solid var(--color-border);
padding: 10px;
text-align: left;
vertical-align: top;
}
.legal-table th { background: var(--color-bg); font-weight: 700; }
.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; }
/* ---------- Aviso de cookies ---------- */
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 200;
max-width: 620px;
margin: 0 auto;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-hover);
padding: 20px;
display: none;
}
.cookie-banner.visible { display: block; }
.cookie-banner p {
margin: 0 0 14px;
font-size: 14px;
color: var(--color-text);
line-height: 1.5;
}
.cookie-banner a { color: var(--color-primary); font-weight: 600; }
.cookie-banner__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cookie-banner__actions .btn { flex: 1 1 140px; text-align: center; }
/* ---------- Checkbox de consentimiento en formularios ---------- */
.form-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 18px;
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.5;
}
.form-check input[type="checkbox"] {
margin-top: 3px;
width: 16px;
height: 16px;
flex-shrink: 0;
accent-color: var(--color-primary);
}
.form-check a { color: var(--color-primary); font-weight: 600; }
/* ---------- Pagina "Hazte Pro" ---------- */
.pro-hero {
background: linear-gradient(135deg, #eef1f5 0%, #ffffff 60%);
color: var(--color-text);
padding: 50px 0 60px;
text-align: center;
border-bottom: 1px solid var(--color-border);
}
.pro-hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.pro-hero-badge img { height: 28px; }
.pro-badge {
background: var(--color-primary);
color: #fff;
font-weight: 700;
font-size: 13px;
letter-spacing: .04em;
padding: 4px 10px;
border-radius: 6px;
}
.pro-hero h1 { font-size: 28px; font-weight: 700; margin: 0 0 14px; line-height: 1.3; color: var(--color-secondary); }
.pro-hero h1 .destacado { color: var(--color-primary); }
.pro-hero-sub { color: var(--color-text-muted); font-size: 16px; max-width: 560px; margin: 0 auto 28px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.section-title-center { font-size: 24px; font-weight: 700; text-align: center; margin: 0 0 30px; }
.pro-features-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .pro-features-grid { grid-template-columns: repeat(2, 1fr); } }
.pro-feature-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
}
.pro-feature-icon { font-size: 32px; margin-bottom: 12px; }
.pro-feature-card h3 { font-size: 17px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.pro-feature-card h3 .check {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
background: #fdece0; color: var(--color-primary); font-size: 12px; font-weight: 700;
}
.pro-feature-card p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.pro-como-funciona { background: var(--color-card); }
.pro-pasos { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .pro-pasos { grid-template-columns: repeat(3, 1fr); } }
.pro-paso { text-align: center; }
.pro-paso span {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--color-secondary); color: #fff; font-weight: 700; font-size: 17px;
margin-bottom: 14px;
}
.pro-paso h3 { font-size: 16px; margin: 0 0 6px; }
.pro-paso p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.pro-cta-final {
background: linear-gradient(135deg, #16324a, var(--color-secondary));
color: #fff;
text-align: center;
padding: 50px 0;
}
.pro-cta-final h2 { font-size: 22px; margin: 0 0 22px; font-weight: 700; }
/* ---------- Pagina "Publicar" (landing del boton/banner "Publicar anuncio"
para visitantes sin sesion, ver PaginasController::publicar()) ----------
Reutiliza .pro-hero/.pro-hero-badge/.pro-badge/.pro-hero-sub/.btn-lg,
.section-title-center, .pro-features-grid/.pro-feature-card/.check y
.pro-cta-final (son genericos pese al nombre), y anade solo lo nuevo:
un tinte de fondo propio para el hero, el flujo de pasos con flechas
conectoras, el FAQ desplegable y el aviso cruzado hacia Hazte Pro. */
.publicar-hero { background: linear-gradient(135deg, #fff3e9 0%, #ffffff 60%); }
.publicar-hero-note { color: var(--color-text-muted); font-size: 13px; margin-top: 14px; }
.publicar-flow { display: flex; flex-direction: column; gap: 0; }
.publicar-flow-step {
background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 26px 22px 22px; text-align: center; position: relative;
}
.publicar-flow-icon { font-size: 30px; margin-bottom: 6px; }
.publicar-flow-number {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
width: 26px; height: 26px; border-radius: 50%; background: var(--color-secondary); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.publicar-flow-step h3 { font-size: 16px; margin: 4px 0 6px; }
.publicar-flow-step p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.publicar-flow-arrow { text-align: center; font-size: 22px; line-height: 1; color: var(--color-primary); padding: 8px 0; transform: rotate(90deg); }
@media (min-width: 900px) {
.publicar-flow { flex-direction: row; align-items: stretch; gap: 4px; }
.publicar-flow-step { flex: 1; }
.publicar-flow-arrow { display: flex; align-items: center; transform: none; padding: 0 2px; }
}
.publicar-faq { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; }
.publicar-faq-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 18px; }
.publicar-faq-item summary {
cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.publicar-faq-item summary::-webkit-details-marker { display: none; }
.publicar-faq-item summary::after { content: '+'; font-size: 20px; color: var(--color-primary); flex-shrink: 0; }
.publicar-faq-item[open] summary::after { content: '\2212'; }
.publicar-faq-item p { color: var(--color-text-muted); font-size: 14px; margin: 0 0 16px; }
.publicar-cross-pro {
display: flex; align-items: center; gap: 14px; background: var(--color-card); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: 18px 22px; max-width: 720px; margin: 0 auto;
}
.publicar-cross-pro .publicar-cross-pro-icono { font-size: 26px; flex-shrink: 0; }
.publicar-cross-pro p { margin: 0; flex: 1; font-size: 14px; }
.publicar-cross-pro a { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
@media (max-width: 480px) {
.publicar-cross-pro { flex-wrap: wrap; text-align: center; justify-content: center; }
.publicar-cross-pro a { width: 100%; }
}
/* ---------- Tamanos (etiquetas anadibles) e inmuebles Pro ---------- */
.tags-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tag-item {
display: inline-flex; align-items: center; gap: 6px;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: 20px; padding: 6px 8px 6px 12px; font-size: 13px; font-weight: 600;
}
.tag-quitar {
background: transparent; border: none; cursor: pointer;
color: var(--color-text-muted); font-size: 16px; line-height: 1; padding: 0 2px;
}
.tag-quitar:hover { color: #d93025; }
.tags-add { display: flex; gap: 8px; }
.tags-add input { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 14px; }
.servicios-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .servicios-grid { grid-template-columns: repeat(2, 1fr); } }
.servicio-check {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--color-border); border-radius: 10px;
padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 600;
background: var(--color-card);
}
.servicio-check.marcado { border-color: var(--color-primary); background: #fff6ef; color: var(--color-primary-dark); }
.servicio-check input { flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--color-primary); }
.servicio-icono { font-size: 18px; }
.servicios-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.servicio-badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--color-text);
}
/* =========================================================
Popup "Fotos y vídeo" del formulario de anuncio/trastero:
agrupa la subida de fotos/vídeo (con previsualización y giro antes de
publicar) y las fotos/vídeo ya guardados (con girar/eliminar) en un