/* =========================================================
   MASCOTAS CONECTADAS — components.css — componentes reutilizables
   ========================================================= */
/* ---------- SearchBar ---------- */
.searchbar{position:relative;margin-top:1.5rem;background:#fff;border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:border-color var(--t),box-shadow var(--t)}
.searchbar:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px var(--navy-100)}
.searchbar-field{display:flex;align-items:center;gap:.6rem;padding:.35rem .5rem .35rem .95rem}
.searchbar-field svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.searchbar input{flex:1;border:0;background:none;padding:.85rem 0;font-size:1rem;min-width:0;outline:none}
.searchbar input::placeholder{color:var(--ink-3)}
.searchbar-loc{display:flex;align-items:center;gap:.5rem;padding:.6rem .95rem;border-top:1px solid var(--line);color:var(--navy);font-weight:600;font-size:.95rem;position:relative}
.searchbar-loc svg{width:18px;height:18px;flex:none;color:var(--accent)}
.loc-trigger{flex:1;border:0;background:none;font:inherit;font-weight:600;color:var(--navy);text-align:left;cursor:pointer;padding:0}
.loc-combo svg:last-of-type{width:14px;height:14px;color:var(--ink-3);transition:transform var(--t)}
.loc-trigger[aria-expanded="true"]+svg{transform:rotate(180deg)}
.loc-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:45;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;padding:.4rem}
.loc-menu[hidden]{display:none}
.loc-opt{display:block;width:100%;text-align:left;padding:.65rem .85rem;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--ink);transition:background var(--t)}
.loc-opt:hover,.loc-opt:focus-visible{background:var(--bg-soft);outline:none}
.loc-opt.active{background:var(--navy-100);color:var(--navy);font-weight:700}
.loc-sub{display:block;margin-top:.1rem;font-size:.78rem;font-weight:400;color:#9AA4AF;line-height:1.3}   /* provincia o partido, debajo del nombre */
.loc-opt.active .loc-sub{color:#7D8A99}
.searchbar .btn{margin:.35rem}
@media(min-width:640px){
  .searchbar{flex-direction:row;align-items:center;padding:.35rem}
  .searchbar-field{flex:1 1 auto;min-width:0;padding:0 .5rem 0 .95rem}
  .searchbar-loc{flex:0 0 auto;max-width:180px;border-top:0;border-left:1px solid var(--line);padding:.5rem .9rem}
  .loc-trigger{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .searchbar .btn{margin:0;flex:0 0 auto}
}
/* Apilamiento: el desplegable de sugerencias debe quedar por encima del bloque de urgencia y del resto del hero */
.searchbar{z-index:30}
.hero-copy{position:relative;z-index:6}
.suggest{z-index:40}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:20;overflow:hidden;display:none;max-height:340px;overflow-y:auto}
.suggest.open{display:block}
.suggest-title{padding:.65rem 1rem .35rem;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.suggest-item{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.7rem 1rem;transition:background var(--t)}
.suggest-item:hover,.suggest-item.active{background:var(--bg-soft)}
.suggest-item .ico{width:34px;height:34px;border-radius:9px;background:var(--navy-100);display:grid;place-items:center;color:var(--navy);flex:none}
.suggest-item .ico svg{width:18px;height:18px}
.suggest-item .t{font-weight:600;font-size:.95rem}
.suggest-item .c{font-size:.8rem;color:var(--ink-3)}
.suggest-empty{padding:1rem;color:var(--ink-2);font-size:.9rem}
.suggest-empty .btn{margin-top:.5rem}

/* ---------- Categorías (Angi style) ---------- */
.cat-row{display:flex;gap:.75rem;overflow-x:auto;padding:.25rem .25rem 1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat-row .service-card{scroll-snap-align:start;flex:0 0 150px}
@media(min-width:900px){.cat-row{display:grid;grid-template-columns:repeat(var(--cols,8),1fr);overflow:visible;padding:0}.cat-row .service-card{flex:auto}}
.service-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:1.1rem .75rem 1rem;border-radius:var(--r);border:1.5px solid var(--line);background:#fff;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.service-card:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}
.service-card:not(.soon){border-color:#F6C7AE;background:#FFF9F5}
.service-card:not(.soon):hover{border-color:var(--accent)}
.service-card .ico{width:56px;height:56px;display:grid;place-items:center;background:none}
.service-card .ico svg{width:44px;height:44px}
.service-card.soon .ico{opacity:.9}
.service-card .name{font-weight:700;font-size:.95rem;color:var(--navy)}
.service-card .desc{font-size:.78rem;color:var(--ink-3);line-height:1.35}
.service-card .state{font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;margin-top:.1rem}
.service-card .state.ok{background:var(--ok-100);color:var(--ok)}
.service-card .state.soon{background:var(--bg-soft);color:var(--ink-3)}
.service-card.soon{color:var(--ink-2)}

/* ---------- Problemas (Thumbtack style) ---------- */
.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media(min-width:700px){.problem-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.problem-grid{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
@media(min-width:1000px){.need-grid{grid-template-columns:repeat(3,1fr)}}
.problem-card{display:block;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1.5px solid var(--line);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.problem-card:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-2px)}
.problem-card .img{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.problem-card img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.problem-card:hover img{transform:scale(1.03)}
.problem-card .body{padding:.85rem .95rem 1rem}
.problem-card .t{font-weight:700;font-size:.95rem;color:var(--navy)}
.problem-card .d{font-size:.8rem;color:var(--ink-3);margin-top:.2rem;line-height:1.35}

/* ---------- Pasos ---------- */
.steps{display:grid;gap:1rem}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);gap:1.25rem}}
.step{padding:1.5rem;border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--line)}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:1rem}
.step h3{font-size:1.05rem;margin-bottom:.35rem}
.step p{color:var(--ink-2);font-size:.92rem}

/* ---------- Profesionales ---------- */
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg-soft)}
.avatar.lg{width:112px;height:112px}
.pro-meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.875rem;color:var(--ink-2)}
.pro-meta span{display:inline-flex;align-items:center;gap:.3rem}
.pro-meta svg{width:15px;height:15px;color:var(--ink-3)}
.rating{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--ink)}
.rating svg{width:15px;height:15px;color:#F5A623;fill:#F5A623}
.stars{display:inline-flex;gap:1px}
.stars svg{width:14px;height:14px;fill:#F5A623;color:#F5A623}
.stars svg.off{fill:#E1E5EA;color:#E1E5EA}
.avail{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;padding:.28rem .65rem;border-radius:999px}
.avail i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.avail.today{background:var(--ok-100);color:var(--ok)}
.avail.soon{background:var(--warn-100);color:var(--warn)}
.avail.busy{background:var(--bg-soft);color:var(--ink-3)}

/* ---------- Confianza ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:760px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-item{padding:1.6rem 1.4rem;border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--line);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.trust-item:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(11,37,69,.09);border-color:#fff}
.trust-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--accent-100);color:var(--accent);margin-bottom:.9rem}
.trust-ic svg{width:21px;height:21px}
.trust-item .v{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.15}
.trust-item .l{margin-top:.4rem;color:var(--ink-2);font-size:.9rem;line-height:1.45}

/* ---------- Reseñas ---------- */
.review-grid{display:grid;gap:1rem}
@media(min-width:760px){.review-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.review-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.review-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:1.25rem;display:flex;flex-direction:column;gap:.85rem}
.review-card .head{display:flex;align-items:center;gap:.75rem}
.review-card .head .avatar{width:44px;height:44px}
.review-card .who{font-weight:700;font-size:.95rem}
.review-card .where{font-size:.82rem;color:var(--ink-3)}
.review-card blockquote{margin:0;font-size:.98rem;color:var(--ink);line-height:1.5}
.review-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--navy);background:var(--navy-100);padding:.3rem .65rem;border-radius:8px;font-weight:600;width:fit-content;max-width:100%;white-space:normal}   /* no se sale de la tarjeta en celular */
.review-tag svg{width:14px;height:14px}
.review-card .pro-line{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink-2);padding-top:.75rem;border-top:1px solid var(--line)}
.review-card .pro-line img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.review-card .pro-line a{font-weight:600;color:var(--navy)}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:.6rem}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:0 1.15rem}
.faq summary{list-style:none;cursor:pointer;padding:1rem 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform var(--t);font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.1rem;color:var(--ink-2)}


/* Campo de contraseña con botón para mostrarla */
.pw-wrap{position:relative;display:block}
.pw-wrap input,.field .pw-wrap input{width:100%;padding-right:3rem}
.pw-eye{position:absolute;top:50%;right:.45rem;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:none;color:var(--ink-3);cursor:pointer;transition:color var(--t),background var(--t)}
.pw-eye:hover{color:var(--navy);background:var(--bg-soft)}
.pw-eye:focus-visible{outline:3px solid var(--accent);outline-offset:1px}

/* Formularios en ventana emergente: título a escala del formulario */
.modal-h{font-size:clamp(1.35rem,4vw,1.6rem);line-height:1.2;color:var(--navy);letter-spacing:-.01em;padding-right:2.5rem}
/* Opciones de motivo (reportes): fila con el círculo a la izquierda, resaltada al elegirla */
.reason-field{border:0;padding:0;margin:0 0 1.1rem;min-width:0}
.reason-field legend{padding:0;margin-bottom:.5rem;font-weight:600;font-size:.92rem;color:var(--ink)}
.reason-list{display:grid;gap:.5rem}
@media(min-width:520px){.reason-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reason{display:flex;align-items:center;gap:.65rem;min-width:0;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3;transition:border-color var(--t),background var(--t)}
.reason:hover{border-color:var(--ink-3)}
.field .reason{font-weight:500}   /* no hereda la negrita de los títulos de campo */
.field .reason input,.reason input{flex:none;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:50%;box-shadow:none;background:none;accent-color:var(--navy);cursor:pointer}
.field .reason-list .reason:has(input:checked),.reason-list .reason:has(input:checked){border-color:var(--navy);background:var(--navy-100);font-weight:600}   /* la selección gana sobre el aviso de error */
.reason:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.reason-field.invalid .reason{border-color:#E8B4AE}
.reason-field.invalid .err{display:block}
/* Desplegables del buscador (sugerencias y zona): mientras están abiertos, su sección queda por encima de las que siguen.
   Sin esto, la sección siguiente (ej. "Servicios principales" en la home) se dibuja encima de la lista. */
section:has(.suggest.open),section:has(.loc-menu:not([hidden])){position:relative;z-index:60}
.suggest{max-height:min(340px,55vh)}
.loc-menu{max-height:min(280px,50vh)}
.service-card .ico img{width:100%;height:100%;object-fit:contain;display:block}   /* ícono propio cargado en Administración → Categorías */
.service-card .ico{width:100px;height:100px}   /* íconos de la home a 100 × 100 px (los dibujados quedan centrados con su tamaño) */
.service-card .ico img{mix-blend-mode:multiply}   /* el fondo blanco del PNG toma el color de la tarjeta (sin cuadrado blanco) */