/* ============================================================
   app.css — pantallas del cliente
   Diseñado a 375px y expandido desde ahí.
   ============================================================ */

/* --- Estructura --------------------------------------------- */

.app {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-8));
  min-height: 60dvh;
}

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--verde-profundo);
  color: var(--papel);
  border-bottom: 1px solid rgba(251,248,241,.14);
}
.cabecera__int { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--header-h); }
.marca { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; min-width: 0; }
.marca__sello {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  transform: rotate(-4deg);
  overflow: hidden;
}
/* El archivo del logo tiene fondo negro con resplandor: en vez de
   pedir una versión con fondo transparente, se aprovecha que el
   header ya es oscuro — "screen" hace que el negro se funda con
   ese fondo y sólo quede el dibujo. */
img.marca__sello {
  border: none;
  object-fit: cover;
  mix-blend-mode: screen;
}
.marca__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca__txt b { font-family: var(--display); font-size: var(--t-sm); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca__txt small { font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cabecera__nav { display: flex; align-items: center; gap: var(--s-2); }
.cabecera .btn { --btn-fg: var(--papel); --btn-bd: rgba(251,248,241,.32); }
.cabecera .btn:hover { --btn-bg: rgba(251,248,241,.1); }
.cabecera__enlaces { display: none; gap: var(--s-1); }
.cabecera__enlaces a {
  color: rgba(251,248,241,.78); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
}
.cabecera__enlaces a:hover { color: var(--papel); background: rgba(251,248,241,.1); }
.cabecera__enlaces a[aria-current="page"] { color: var(--ocre); }

/* Barra inferior (mobile) */
.tabbar {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--papel-hueso);
  border-top: var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 24px rgba(38,18,29,.06);
}
.tabbar__i {
  display: grid; justify-items: center; gap: 2px;
  padding: var(--s-2) 0 var(--s-3);
  min-height: var(--tabbar-h);
  color: var(--tinta-suave); text-decoration: none;
  font-size: 11px; font-weight: 600;
  transition: color var(--tr);
}
.tabbar__i[aria-current="page"] { color: var(--verde-profundo); }
.tabbar__i[aria-current="page"] .icono { stroke-width: 2; }
.tabbar__i .icono { width: 22px; height: 22px; }

@media (min-width: 760px) {
  .tabbar { display: none; }
  .app { padding-bottom: var(--s-16); }
  .cabecera__enlaces { display: flex; }
}

/* --- Landing ------------------------------------------------- */

.hero { padding: var(--s-12) 0 var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }
.hero h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
.hero__linea { margin-top: var(--s-4); font-size: var(--t-lg); color: var(--tinta-suave); max-width: 32ch; }
.hero__acciones { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__pata {
  position: absolute; right: -18px; top: -10px;
  width: 140px; height: 140px; color: var(--ocre); opacity: .16;
  stroke-width: .9; pointer-events: none;
}
.hero-caja { position: relative; overflow: hidden; }
/* La foto original es un banner de marketing con su propio texto
   (título, teléfono, dirección) que ya mostramos nosotros en otro
   lado de la página: en vez de pedir una versión recortada, se
   recorta acá con CSS para quedarnos sólo con el perrito. */
.hero__foto {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 0% 42%;
  border-radius: var(--r-lg);
  border: 4px solid var(--blanco);
  box-shadow: var(--sombra-alta);
}
@media (min-width: 760px) {
  .hero { flex-direction: row-reverse; align-items: center; gap: var(--s-10); }
  .hero__texto { flex: 1 1 50%; min-width: 0; }
  .hero__foto { flex: 1 1 45%; max-width: 420px; }
}

.servicios { display: grid; gap: var(--s-3); }
.servicio {
  display: grid;
  grid-template-columns: 46px 1fr 20px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--papel-hueso);
  border: var(--hairline);
  border-radius: var(--r-lg);
  color: inherit; text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.servicio:hover { transform: translateY(-2px); border-color: #D9B8C9; box-shadow: var(--sombra-alta); color: inherit; }
.servicio__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--verde-tenue);
  color: var(--verde-profundo);
}
.servicio__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.servicio__cuerpo b { font-family: var(--display); font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--verde-profundo); }
.servicio__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--tinta-suave); }
.servicio__desde { font-family: var(--data); font-weight: 600; color: var(--tinta); }
.servicio__flecha { color: var(--tinta-suave); }
.servicio--off { opacity: .5; pointer-events: none; }

.como { counter-reset: paso; display: grid; gap: var(--s-4); }
.como li {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s-4); align-items: start;
}
.como li::before {
  counter-increment: paso; content: counter(paso);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1.5px solid var(--ocre); border-radius: var(--r-full);
  font-family: var(--data); font-weight: 600; font-size: var(--t-sm); color: #8A0F52;
}
.como b { display: block; font-weight: 600; }
.como span { font-size: var(--t-sm); color: var(--tinta-suave); }

.datos-local { display: grid; gap: var(--s-3); }
.datos-local div { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-sm); }
.datos-local .icono { color: var(--verde-medio); margin-top: 2px; }

/* --- Subcabecera de flujo ------------------------------------ */

.flujo-top {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--papel);
  padding-block: var(--s-3);
  border-bottom: var(--hairline);
  margin-bottom: var(--s-6);
}
.flujo-top__fila { display: flex; align-items: center; gap: var(--s-3); }
.flujo-top__fila h2 { font-size: var(--t-lg); }
.hold {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-full);
  background: var(--ocre-tenue);
  border: 1px solid #F3AFD3;
  color: #7A0F4A;
  font-size: var(--t-xs); font-weight: 600;
}
.hold b { font-family: var(--data); }
.hold--poco { background: var(--coral-tenue); border-color: #EFC3B6; color: #8A3520; }

/* --- Calendario ---------------------------------------------- */

.cal { background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--r-lg); padding: var(--s-3); box-shadow: var(--sombra-alta); }
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-3); }
.cal__nav b { font-family: var(--display); font-size: var(--t-base); letter-spacing: -0.02em; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span {
  text-align: center; padding-bottom: var(--s-2);
  font-family: var(--data); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.dia {
  appearance: none;
  display: grid; place-items: center; gap: 3px;
  aspect-ratio: 1 / 1.05;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  font-family: var(--data); font-size: var(--t-sm); font-weight: 500;
  color: var(--tinta);
  transition: background-color var(--tr), border-color var(--tr), color var(--tr);
}
.dia__punto { width: 6px; height: 6px; border-radius: var(--r-full); background: transparent; }
.dia__dow { font-family: var(--data); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .6; line-height: 1; }
.dia--fuera { opacity: .28; }
.dia--pasado, .dia--cerrado { color: #B3ACA0; }
.dia--cerrado { background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(38,18,29,.045) 4px 8px); }
/* Semáforo real, no la paleta de marca: así "se puede" y "no se
   puede" se leen antes de mirar el texto — no sólo un puntito. */
.dia--libre { background: var(--verde-exito-tenue); border-color: #A8DDBE; color: var(--verde-exito-oscuro); cursor: pointer; }
.dia--libre .dia__punto { background: var(--verde-exito); }
.dia--libre:hover { border-color: var(--verde-exito); }
.dia--pocos { background: var(--coral-tenue); border-color: #EFC3B6; color: #8A3520; cursor: pointer; }
.dia--pocos .dia__punto { background: var(--coral); }
.dia--completo { background: var(--rojo-tenue); border-color: #F0B8B3; color: var(--rojo-oscuro); }
.dia--completo .dia__punto { background: var(--rojo); }
.dia--bloqueado { background: var(--rojo-tenue); border-color: #F0B8B3; color: var(--rojo-oscuro);
  background-image: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(151,35,28,.10) 4px 8px); }
.dia--hoy { box-shadow: inset 0 0 0 1.5px var(--verde-profundo); }
.dia[aria-pressed="true"] { background: var(--verde-profundo); border-color: var(--verde-profundo); color: var(--papel); }
.dia[aria-pressed="true"] .dia__punto { background: var(--ocre); }
.dia:disabled { cursor: default; }

.cal__leyenda { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding-top: var(--s-3); margin-top: var(--s-3); border-top: var(--hairline); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-suave); }
.cal__leyenda span { display: inline-flex; align-items: center; gap: var(--s-2); }
.cal__leyenda i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--linea); flex: none; }

/* --- Slots ---------------------------------------------------- */

.slots { display: grid; gap: var(--s-2); }
@media (min-width: 560px) { .slots { grid-template-columns: 1fr 1fr; } }
.slot {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-md);
  text-align: left;
  transition: border-color var(--tr), transform var(--tr), background-color var(--tr);
}
.slot:hover { border-color: var(--verde-medio); transform: translateY(-1px); }
.slot b { font-family: var(--data); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.03em; }
.slot span { font-size: var(--t-xs); color: var(--tinta-suave); }
.slot .icono { margin-left: auto; color: var(--tinta-suave); }

/* --- Uploader de foto ----------------------------------------- */

.uploader {
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-4);
  border: 1.5px dashed var(--linea);
  border-radius: var(--r-lg);
  background: var(--papel-hueso);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tr), background-color var(--tr);
}
.uploader:hover { border-color: var(--verde-medio); background: #FBE8F0; }
.uploader .icono { color: var(--verde-medio); }
.foto-preview { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-4) 0; }
.foto-preview img { max-width: 260px; }

/* --- Cotización ------------------------------------------------ */

.desglose { margin-top: var(--s-3); }
.desglose summary {
  cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--verde-medio);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 0;
}
.desglose summary::-webkit-details-marker { display: none; }
.desglose summary .icono { transition: transform var(--tr); }
.desglose[open] summary .icono { transform: rotate(180deg); }

.rango-ajuste {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--data); font-size: var(--t-sm);
  color: var(--tinta-suave);
}

/* --- Confirmación ---------------------------------------------- */

.confirmado-top { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) 0 var(--s-6); text-align: center; }

.maquetas { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .maquetas { grid-template-columns: 1fr 1fr; align-items: start; } }

.maqueta {
  border: 1.5px solid var(--linea);
  border-radius: 22px;
  background: var(--blanco);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.maqueta__barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-2) var(--s-4);
  background: var(--papel-hundido);
  border-bottom: var(--hairline);
  font-family: var(--data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
}
.maqueta__cuerpo { padding: var(--s-4); }
.maqueta__meta { font-size: var(--t-xs); color: var(--tinta-suave); display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: var(--hairline); margin-bottom: var(--s-3); }
.maqueta__meta b { color: var(--tinta); }
.maqueta__texto { font-size: var(--t-sm); white-space: pre-wrap; line-height: 1.55; }

.chat { background: var(--papel-hundido); padding: var(--s-4); display: grid; gap: var(--s-2); }
.burbuja {
  position: relative;
  justify-self: end;
  max-width: 92%;
  padding: var(--s-3) var(--s-3) var(--s-4);
  background: var(--verde-tenue);
  border: 1px solid #C7DBD2;
  border-radius: var(--r-md) 2px var(--r-md) var(--r-md);
  font-size: var(--t-sm);
  white-space: pre-wrap;
  line-height: 1.5;
}
.burbuja b { font-weight: 700; }
.burbuja__hora {
  position: absolute; right: 10px; bottom: 5px;
  display: flex; align-items: center; gap: 3px;
  font-family: var(--data); font-size: 10px; color: var(--tinta-suave);
}
.burbuja__hora .icono { width: 12px; height: 12px; color: var(--verde-medio); }

/* --- Mis turnos ------------------------------------------------- */

.turnos { display: grid; gap: var(--s-3); }
.turno {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center;
  width: 100%; text-align: left;
  padding: var(--s-3);
  background: var(--papel-hueso);
  border: var(--hairline);
  border-radius: var(--r-md);
  color: inherit; text-decoration: none;
  transition: border-color var(--tr), transform var(--tr);
}
.turno:hover { border-color: #D9B8C9; transform: translateY(-1px); color: inherit; }
.turno__foto {
  width: 56px; height: 56px; border-radius: var(--r-sm);
  object-fit: cover; border: 3px solid var(--blanco);
  box-shadow: 0 1px 4px rgba(38,18,29,.14);
  transform: rotate(-1.5deg);
}
.turno__cuerpo { display: grid; gap: 2px; min-width: 0; }
.turno__cuerpo b { font-family: var(--display); font-size: var(--t-base); letter-spacing: -0.02em; }
.turno__cuando { font-family: var(--data); font-size: var(--t-xs); color: var(--tinta-suave); }
.turno__der { display: grid; justify-items: end; gap: var(--s-2); }
.turno--cancelado .turno__foto { filter: grayscale(1); opacity: .6; }

.detalle-fila { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px dotted var(--linea); font-size: var(--t-sm); }
.detalle-fila > span:first-child { color: var(--tinta-suave); }
.detalle-fila b { margin-left: auto; font-family: var(--data); font-weight: 600; text-align: right; }

/* --- Cuenta y mascotas ------------------------------------------ */

.perfil { display: flex; align-items: center; gap: var(--s-4); }
.perfil img { width: 72px; height: 72px; }
.perfil__txt { display: grid; gap: 2px; min-width: 0; }
.perfil__txt b { font-family: var(--display); font-size: var(--t-xl); letter-spacing: -0.03em; }

.avatares { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (min-width: 480px) { .avatares { grid-template-columns: repeat(6, 1fr); } }
.avatar-op {
  position: relative;
  padding: 0; border: 2px solid transparent; border-radius: var(--r-full);
  background: none; line-height: 0;
  transition: border-color var(--tr), transform var(--tr);
}
.avatar-op img { width: 100%; height: auto; border-radius: var(--r-full); border: 1px solid var(--linea); }
.avatar-op:hover { transform: scale(1.06); }
.avatar-op[aria-pressed="true"] { border-color: var(--verde-medio); }
.avatar-op[aria-pressed="true"]::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--verde-medio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFF8FB' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 2px solid var(--papel);
}

.fidelidad { display: grid; gap: var(--s-2); }
.fidelidad__linea { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.fidelidad__linea b { font-family: var(--data); }

.mascotas-grid { display: grid; gap: var(--s-3); }
@media (min-width: 620px) { .mascotas-grid { grid-template-columns: 1fr 1fr; } }

.agregar {
  display: grid; place-items: center; gap: var(--s-2);
  min-height: 110px; padding: var(--s-4);
  border: 1.5px dashed var(--linea); border-radius: var(--r-md);
  background: transparent; color: var(--tinta-suave);
  font-size: var(--t-sm); font-weight: 600;
  transition: border-color var(--tr), color var(--tr), background-color var(--tr);
}
.agregar:hover { border-color: var(--verde-medio); color: var(--verde-profundo); background: var(--papel-hueso); }

/* --- Rango de fechas (post-quirúrgica) --------------------------- */

.rango { display: grid; gap: var(--s-3); }
@media (min-width: 480px) { .rango { grid-template-columns: 1fr 1fr; } }
.dia--rango { background: var(--verde-tenue); border-color: #A9DCEA; }
.dia--extremo { background: var(--verde-profundo); border-color: var(--verde-profundo); color: var(--papel); }
.dia--extremo .dia__punto { background: var(--ocre); }

/* --- Login ------------------------------------------------------- */

.login { display: grid; gap: var(--s-4); max-width: 420px; margin-inline: auto; }
.separador { display: flex; align-items: center; gap: var(--s-3); color: var(--tinta-suave); font-size: var(--t-xs); }
.separador::before, .separador::after { content: ""; flex: 1; border-top: var(--hairline); }