/* ========================================================= TIERRA DENTRO — GLOBAL DESIGN SYSTEM ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap'); :root{ --forest:#073d2d; --forest-2:#0c513d; --forest-3:#123b2e; --orange:#f36b21; --orange-dark:#d85c17; --cream:#f5f0e4; --cream-2:#fbfaf6; --sand:#e9e0cf; --ink:#18372d; --muted:#586860; /* antes #6d7c73 — no pasaba 4.5:1 contra --cream (3.86:1) ni con margen contra --white (4.39:1); este valor da ~5.9:1 y ~5.2:1 respectivamente */ --muted-2:#9aa39c; --white:#fff; --danger:#a64b3a; --success:#2f7558; --font-display:"Fraunces",Georgia,serif; --font-body:"Public Sans",Arial,sans-serif; --font-script:"Caveat",cursive; --container:1200px; --container-wide:1360px; --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-pill:999px; --border:rgba(7,61,45,.12); --border-strong:rgba(7,61,45,.20); --shadow-sm:0 4px 14px rgba(7,61,45,.07); --shadow:0 10px 30px rgba(7,61,45,.09); --shadow-lg:0 18px 45px rgba(7,61,45,.14); } /* RESET */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh; /* Red de seguridad contra elementos que se salen del ancho de la pantalla en mobile (no hay overflow horizontal en desktop de por sí, así que esto no cambia nada ahí). */ overflow-x:hidden; background:var(--cream); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.5; } body,button,input,textarea,select{font-family:var(--font-body)} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit} button{cursor:pointer} button:disabled{cursor:not-allowed;opacity:.55} h1,h2,h3,h4{ margin:0; color:var(--ink); font-family:var(--font-display); line-height:1.08; } p{margin:0} ::selection{background:var(--orange);color:var(--white)} /* LAYOUT */ .container{width:min(var(--container),92%);margin-inline:auto} .container-wide{width:min(var(--container-wide),94%);margin-inline:auto} .section{width:min(1200px,92%);margin:auto;padding:75px 0} .eyebrow,.kicker{ font-size:12px; line-height:1.2; letter-spacing:3px; text-transform:uppercase; font-weight:700; color:var(--orange); margin-bottom:7px; } .lede{color:var(--muted);line-height:1.7;max-width:700px} .muted{color:var(--muted)} .text-center{text-align:center} /* landing-only typography scope — keeps bare h2 sizing off every other page */ .landing h2{margin:0;color:var(--forest);font-size:43px;line-height:1} /* HEADER (shared app pages: buscar/detalle/reservar/etc.) */ .topnav,.site-header{ position:relative; z-index:50; background:var(--cream); border-bottom:1px solid var(--border); } /* Variante para páginas donde la nav va encima de un .page-hero-photo (mismo truco que .header en index.html): al no ocupar espacio en el flujo y desvanecerse con un degradado en vez de un borde sólido, la nav se funde con la foto de abajo en lugar de dejar un corte visible entre las dos. */ .topnav-photo{ position:absolute; left:0;right:0;top:0; background:linear-gradient( 180deg, rgba(247,241,226,.98), rgba(247,241,226,.88) 72%, rgba(247,241,226,0) ); border-bottom:0; } .topnav-photo + .page-hero-photo{ padding-top:150px; } .topnav .inner,.site-header .inner{ width:min(var(--container-wide),94%); min-height:106px; margin:auto; display:flex; align-items:center; gap:30px; } .brand{display:flex;align-items:center;gap:10px;font-weight:700} .brand .mark{ width:40px;height:40px;border-radius:10px; display:grid;place-items:center; background:var(--forest);color:var(--white); font-family:var(--font-display);font-weight:700; } .brand .name{color:var(--forest);font-family:var(--font-display);font-size:21px} .brand .name em{color:var(--orange);font-style:normal} .site-logo{ width:350px;max-height:94px;object-fit:contain; object-position:left center;mix-blend-mode:multiply; } .navlinks,.site-nav{ margin-left:auto; display:flex; align-items:center; gap:28px; } .navlinks > a,.site-nav > a,.nav > a{ display:inline-flex; align-items:center; gap:6px; color:var(--forest-3); font-size:14px; font-weight:600; white-space:nowrap; transition:color .18s ease; } .navlinks a:hover,.navlinks a.active, .site-nav a:hover,.site-nav a.active{color:var(--orange)} /* Botón hamburguesa (mobile) — oculto en escritorio, ver RESPONSIVE */ .nav-toggle{ display:none; margin-left:auto; width:42px;height:42px; align-items:center;justify-content:center; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--white); color:var(--forest); font-size:18px; flex:none; } .nav-toggle:hover{background:rgba(7,61,45,.05)} /* Menú de usuario (inyectado por initAuthNav en js/common.js) */ .authnav{position:relative} .authnav-btn{ background:transparent;border:0;cursor:pointer; font:inherit;font-weight:600;color:inherit;padding:8px 0; } .authnav-menu{ position:absolute;right:0;top:calc(100% + 8px); min-width:210px;background:var(--white); border:1px solid var(--border);border-radius:var(--radius); padding:14px;box-shadow:var(--shadow);z-index:1000; } .authnav-name{font-weight:700} .authnav-email,.authnav-role{font-size:12px;color:var(--muted);margin-top:3px} .authnav-role{margin-bottom:12px} .authnav-link{ display:block;padding:8px 0;color:inherit;text-decoration:none; } .authnav-logout{ display:block;width:100%;margin-top:6px;padding:9px 0; background:transparent;border:0;border-top:1px solid var(--border); cursor:pointer;text-align:left;color:var(--danger); } /* Avatar circular — foto de perfil, o inicial de respaldo si no hay foto. .av es el tamaño medio por default (tarjetas de experiencia/hostrow); .av-sm para navbar/reseñas, .av-lg para perfil.html y encabezados. */ .av{ width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--sand);color:var(--forest); font-family:var(--font-display);font-weight:700;font-size:18px; } .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .av-xs{width:18px;height:18px;font-size:9px} .av-sm{width:32px;height:32px;font-size:13px} .av-lg{width:88px;height:88px;font-size:32px} .authnav-btn{display:inline-flex;align-items:center;gap:8px} /* Sin esto, un nombre largo hace que el (sin clase, ver initAuthNav en common.js) se envuelva en varias líneas y desalinee todo el header — el botón nunca fue pensado para nombres de más de ~15 caracteres. */ .authnav-btn span{ max-width:140px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; } /* Fila de identidad (nombre/foto + texto) — usado en detalle de experiencia y perfil público de anfitrión. */ .hostrow{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit} .hostrow .t{display:flex;flex-direction:column} /* Tabs simples (mismo look que .authtabs de login.html, generalizado para reusarse en dashboard.html sin tocar login.html). */ .tabs{ display:flex;gap:6px;background:var(--sand); border-radius:var(--radius-pill);padding:4px;margin-bottom:22px; flex-wrap:wrap; } .tab{ flex:1;border:none;background:transparent;padding:10px 14px; border-radius:var(--radius-pill);font-weight:600;font-size:14px; color:var(--muted);white-space:nowrap; } .tab.is-active{background:var(--forest);color:var(--white)} /* Contador pequeño sobre una pestaña (ej. "Aprobaciones (3)") — solo se muestra cuando hay algo accionable, para que dashboard.html se sienta como un panel real y no una lista de páginas sueltas. */ .tab-badge{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 5px;margin-left:6px; background:var(--orange);color:var(--white); border-radius:var(--radius-pill);font-size:11px;font-weight:700; vertical-align:middle; } .tab.is-active .tab-badge{background:rgba(255,255,255,.28)} /* Banner de cuenta arriba de dashboard.html — avatar + rol + saludo, mismo degradado forest que .page-hero, para que el panel se distinga de una página de contenido normal desde el primer vistazo. */ .dash-header{ display:flex;align-items:center;gap:22px;flex-wrap:wrap; background:linear-gradient(120deg,var(--forest),var(--forest-2)); color:var(--white);border-radius:var(--radius-lg); padding:28px 32px;box-shadow:var(--shadow); } .dash-header .av-lg{ border:3px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14);color:var(--white); } .dash-header-role{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:#f8eddd; background:rgba(255,255,255,.14);border-radius:var(--radius-pill); padding:4px 12px;margin-bottom:8px; } .dash-header h1{color:var(--white);font-size:26px;margin:0;font-family:var(--font-display)} .dash-header p{color:rgba(255,255,255,.82);margin-top:6px;max-width:520px;font-size:14px} /* Fila de números rápidos entre el banner de bienvenida y las pestañas — sin esto el panel iba directo del saludo a las pestañas, sin dar ningún resumen de la cuenta de un vistazo. */ .dash-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px; } .dash-stat{ background:var(--white);border:1px solid var(--border);border-radius:var(--radius); padding:16px 18px;box-shadow:var(--shadow-sm);text-align:center; } .dash-stat strong{display:block;font-size:26px;font-family:var(--font-display);color:var(--forest)} .dash-stat span{font-size:12.5px;color:var(--muted)} @media(max-width:650px){.dash-stats{gap:8px} .dash-stat{padding:12px 8px}.dash-stat strong{font-size:20px}.dash-stat span{font-size:11px}} /* Ícono grande centrado para estados vacíos (Mis reservas, Mis publicaciones, etc.) — antes era solo texto + botón, que se leía como un error en vez de "todavía no hay nada aquí". */ .empty-state-icon{ width:60px;height:60px;border-radius:50%;margin:0 auto; background:rgba(7,61,45,.06);color:var(--forest); display:flex;align-items:center;justify-content:center; } .empty-state-icon .icon{width:26px;height:26px} /* Tarjeta de sección — envuelve cada bloque de contenido del panel (Mis reservas, Mis sitios, etc.) con un ícono + título, en vez de un

suelto sobre el fondo de la página. */ .section-card{ background:var(--white);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:24px;margin-top:24px; } .section-card-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap} .section-card-icon{ width:40px;height:40px;border-radius:12px;flex-shrink:0; background:rgba(7,61,45,.08);color:var(--forest); display:flex;align-items:center;justify-content:center; } .section-card-icon .icon{width:20px;height:20px} .section-card-head h2{font-size:18px;margin:0;flex:1;min-width:0} .section-card-head p{margin-top:2px;font-size:13px;color:var(--muted)} /* Secciones colapsables del tab "Aprobaciones" en dashboard.html — cada una es un
para que el admin pueda cerrar las que ya revisó en vez de scrollear un muro continuo. Con fondo/borde/sombra propios (en vez de solo un borde superior) se ven como tarjetas independientes, igual que .section-card en las demás pestañas. */ .admin-section{ background:var(--white);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:20px 24px; } .admin-section summary{ cursor:pointer;list-style:none; font-family:var(--font-display);color:var(--ink); font-size:20px;font-weight:600;line-height:1.08; } .admin-section summary::-webkit-details-marker{display:none} .admin-section summary::before{ content:"▸";display:inline-block;margin-right:8px; font-size:16px;color:var(--muted);transition:transform .15s ease; } .admin-section[open] summary::before{transform:rotate(90deg)} /* Calendario de reservas del anfitrión (tab "Calendario" en dashboard.html) — grid de 7 columnas, un botón por día. */ .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .calendar-weekday{ text-align:center;font-size:11px;font-weight:700;color:var(--muted); text-transform:uppercase;padding-bottom:6px;letter-spacing:.03em; } .calendar-day{ min-height:64px;border-radius:10px;border:1px solid var(--border); padding:6px;cursor:pointer;background:var(--white); display:flex;flex-direction:column;gap:6px;text-align:left; transition:background .12s ease, border-color .12s ease; font-family:var(--font-body); } .calendar-day:hover{border-color:var(--forest)} .calendar-day.is-empty{visibility:hidden;cursor:default} .calendar-day.is-today{border-color:var(--orange);border-width:2px} .calendar-day.has-bookings{background:rgba(7,61,45,.05)} .calendar-day.is-selected{border-color:var(--forest);border-width:2px} .calendar-day .day-num{font-size:12px;font-weight:600;color:var(--ink)} .calendar-day .day-dots{display:flex;gap:3px;flex-wrap:wrap} .calendar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .calendar-dot.confirmed{background:var(--success)} .calendar-dot.pending{background:#a5680f} @media(max-width:650px){ .calendar-day{min-height:44px;padding:4px} .calendar-weekday{font-size:9.5px} } /* En celulares muy angostos (iPhone SE y similares), 7 columnas con gap:6px dejaban cada celda por debajo de los ~44px recomendados de objetivo táctil — se achica el gap para recuperar ese ancho. */ @media(max-width:380px){ .calendar-grid{gap:3px} .calendar-day{padding:2px} } /* HEADER (landing page — index.html) */ .header{ position:absolute; left:0;right:0;top:0; z-index:20; height:106px; background:linear-gradient( 180deg, rgba(247,241,226,.98), rgba(247,241,226,.88) 72%, rgba(247,241,226,0) ); } .header-inner{ width:min(1360px,94%); height:106px; margin:auto; display:flex; align-items:center; gap:30px; } .logo{ width:350px;height:94px; object-fit:contain; object-position:left center; display:block; mix-blend-mode:multiply; flex:0 0 350px; } .nav{margin-left:auto;display:flex;align-items:center;gap:32px} .nav a{color:var(--forest-3);font-weight:600;font-size:15px;white-space:nowrap} .nav a:hover{color:var(--orange)} .nav .active{color:var(--orange);position:relative} .nav .active:after{ content:"";position:absolute;left:0;right:0;bottom:-11px; height:2px;background:var(--orange); } .login{ border:1.5px solid #153d30;border-radius:var(--radius-pill); padding:12px 20px;display:flex;align-items:center;gap:9px; } /* HERO (shared page-header pattern, used by inner pages) */ .page-hero{ background:linear-gradient(120deg,var(--forest),var(--forest-2)); color:var(--white); padding:72px 0; } .page-hero h1{color:var(--white);font-size:clamp(38px,6vw,58px)} .page-hero p{ margin-top:12px;max-width:680px;color:rgba(255,255,255,.82) } /* Variante con la misma foto del hero de index.html, para páginas internas que quieran el mismo fondo en vez del degradado sólido. */ .page-hero-photo{ background: linear-gradient( 90deg, rgba(5,31,23,.76) 0%, rgba(5,31,23,.58) 34%, rgba(5,31,23,.16) 69%, rgba(5,31,23,.12) 100% ), url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=2400&q=90") center/cover no-repeat; } /* HERO (landing page) */ .hero{ min-height:800px; position:relative; overflow:hidden; background: linear-gradient( 90deg, rgba(5,31,23,.76) 0%, rgba(5,31,23,.58) 34%, rgba(5,31,23,.16) 69%, rgba(5,31,23,.12) 100% ), url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=2400&q=90") center/cover no-repeat; } .hero:after{ content:"";position:absolute;inset:auto 0 0;height:190px; background:linear-gradient(transparent,rgba(4,31,23,.78)); } .hero-inner{ position:relative;z-index:4; width:min(1360px,94%);min-height:800px;margin:auto; display:flex;align-items:center; } .hero-copy{width:650px;color:var(--white);padding-top:55px} .hero .eyebrow{ color:#f8eddd;font-size:13px;letter-spacing:4px;margin-bottom:18px; } .hero h1{ margin:0;font-family:var(--font-display); font-size:clamp(70px,7.5vw,110px);line-height:.82;letter-spacing:-5px; font-weight:600;color:var(--white); text-shadow:0 3px 16px rgba(0,0,0,.15); } .script{ display:block;font-family:var(--font-script);font-size:1.02em; font-weight:600;letter-spacing:-2px;transform:rotate(-2deg); margin-left:8px;margin-top:2px; } .orange-line{ width:430px;max-width:78%;height:17px; border-bottom:6px solid var(--orange);border-radius:50%; transform:rotate(-2deg);margin:0 0 25px 12px; } .hero-copy-text{ max-width:570px;font-size:19px;line-height:1.55; margin:0 0 28px;color:rgba(255,255,255,.92); } .actions{display:flex;gap:14px;flex-wrap:wrap} /* BUTTONS */ .btn{ min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 25px; border:1.5px solid transparent; border-radius:var(--radius-pill); font-weight:700; font-size:15px; line-height:1; transition:.16s ease; } .btn:hover{transform:translateY(-1px)} .btn-primary,.btn-orange{ background:var(--orange);color:var(--white);border-color:var(--orange); box-shadow:0 8px 25px rgba(0,0,0,.18); } .btn-primary:hover,.btn-orange:hover{ background:var(--orange-dark);border-color:var(--orange-dark);box-shadow:var(--shadow-sm) } .btn-dark{background:var(--forest);color:var(--white);border-color:var(--forest)} .btn-dark:hover{background:var(--forest-2);border-color:var(--forest-2)} .btn-green{background:rgba(7,61,45,.92);border-color:rgba(255,255,255,.85);color:var(--white)} .btn-ghost{background:transparent;color:var(--forest);border-color:var(--border-strong)} .btn-ghost:hover{background:rgba(7,61,45,.06);border-color:var(--forest)} .btn-light{background:var(--white);color:var(--forest);border-color:var(--white)} .btn-block{width:100%} /* Botón partido en dos mitades bajo un mismo look (p.ej. "Publicar mi terreno" / "Compartir un lugar" en el hero) — dos acciones distintas que conviene agrupar visualmente en vez de tratarlas como un tercer botón suelto con su propio color. */ .btn-split{ display:inline-flex;align-items:stretch;min-height:54px; background:rgba(7,61,45,.92);border:1.5px solid rgba(255,255,255,.85); border-radius:var(--radius-pill);overflow:hidden; } .btn-split a{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 22px;color:var(--white);font-weight:700;font-size:15px; white-space:nowrap;transition:.16s ease; } .btn-split a:hover{background:rgba(255,255,255,.14)} .btn-split-divider{width:1.5px;flex-shrink:0;background:rgba(255,255,255,.35);margin:9px 0} @media(max-width:480px){ .btn-split{flex-direction:column;border-radius:18px;width:100%} .btn-split a{justify-content:flex-start;padding:14px 18px} .btn-split-divider{width:auto;height:1.5px;margin:0 16px} } /* CARDS */ .card{ background:var(--white); border:1px solid rgba(7,61,45,.08); border-radius:20px; box-shadow:0 12px 32px rgba(7,61,45,.09); overflow:hidden; transition:.2s ease; } a.card:hover{ transform:translateY(-4px); box-shadow:0 18px 42px rgba(7,61,45,.14); } .cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* Variante de 2 columnas — secciones "destacados" que muestran a lo más 2 tarjetas (eventos/experiencias recientes en index.html). */ .cardgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:16px 0 24px} .stat-box{background:var(--white);border:1px solid rgba(7,61,45,.08);border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(7,61,45,.06)} .stat-box .stat-value{font-size:26px;font-weight:700;color:var(--forest)} .stat-box .stat-label{font-size:13px;color:var(--muted);margin-top:4px} .card-photo,.photo{ height:245px; background-position:center; background-size:cover; background-repeat:no-repeat; background-color:#789477; position:relative; } .card-body,.card .body{padding:20px} .card h3{margin:0 0 6px;color:var(--forest);font-size:25px} .location,.loc{margin-top:0;color:var(--muted);font-size:13px} .rating{ position:absolute;top:14px;right:14px; padding:7px 10px;border-radius:var(--radius-pill); background:rgba(255,255,255,.95);color:var(--forest); font-size:12px;font-weight:700; } .price{ position:absolute;left:14px;bottom:14px; padding:7px 11px;border-radius:var(--radius-pill); background:var(--forest);color:var(--white); font-size:12px;font-weight:700; } /* Botón de corazón sobre la foto de una tarjeta de sitio — anidado dentro de un , con stopPropagation() en el click para no disparar la navegación de la tarjeta. */ .favorite-btn{ position:absolute;top:14px;right:14px;z-index:1; width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.95);border:0;cursor:pointer; color:var(--forest);transition:.15s ease; } .favorite-btn:hover{transform:scale(1.08)} .favorite-btn .icon{width:17px;height:17px;fill:none;stroke:currentColor} .favorite-btn.is-favorited{color:var(--orange)} .favorite-btn.is-favorited .icon{fill:currentColor} .guarantee-badge{ position:absolute;top:14px;left:14px; display:flex;align-items:center;gap:6px; padding:4px 10px 4px 4px;border-radius:var(--radius-pill); background:rgba(255,255,255,.95);color:var(--forest); font-size:11px;font-weight:700; box-shadow:var(--shadow-sm); } .guarantee-badge-lg{ top:20px;left:20px;gap:9px; padding:8px 18px 8px 8px; font-size:15px; } .guarantee-badge-lg .gb-text{display:flex;flex-direction:column;gap:1px;line-height:1.3} .guarantee-badge-lg .gb-sub{font-size:11px;font-weight:600;color:var(--muted)} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .tag{ background:#edf2eb;color:var(--forest); border-radius:var(--radius-pill); padding:6px 9px;font-size:11px;font-weight:600; } /* STATUS / CAPACITY PILLS (used across eventos.html, evento-detalle.html, perfil.html, admin.html) */ .pill{ display:inline-flex;align-items:center;gap:5px; border-radius:var(--radius-pill); padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.3px; } .pill-pending{background:#fbeed7;color:#a5680f} .pill-approved{background:#e1f0e6;color:var(--success)} .pill-rejected{background:#f6e2de;color:var(--danger)} .pill-full{background:#f6e2de;color:var(--danger)} .pill-open{background:#edf2eb;color:var(--forest)} /* ICONS */ .icon{width:16px;height:16px;flex-shrink:0} /* SEARCH */ .searchbar{ min-height:50px;display:flex;align-items:center;gap:10px; padding:0 15px;background:var(--white); border:1px solid var(--border);border-radius:var(--radius) } .searchbar input{ width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink) } .searchbar input::placeholder{color:var(--muted-2)} /* El input interno no tiene borde propio (border:0) — el estilo de :focus genérico de más abajo le pinta un box-shadow, pero al no tener borde y vivir dentro de esta cápsula redondeada, el anillo queda cortado por el borde del contenedor y es casi invisible. Se estiliza el contenedor completo al enfocar el input, igual que ya hace el resto de los campos del formulario. */ .searchbar:focus-within{ border-color:var(--forest-2); box-shadow:0 0 0 3px rgba(12,81,61,.10) } /* Select de filtro suelto junto a un buscador (estado en eventos.html, sitio/lugar en el calendario de dashboard.html) — mismo look que .searchbar pero para un