/* ============================================================
   Mascotero — componentes
   ============================================================ */

/* --- Botones ---------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--verde-profundo);
  --btn-bd: var(--linea);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform var(--tr), background-color var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; transform: none; pointer-events: none;
}

.btn--primario {
  --btn-bg: var(--ocre);
  --btn-fg: #FFFFFF;
  --btn-bd: #B01062;
  box-shadow: 0 2px 0 #A80D57;
}
.btn--primario:hover { --btn-bg: #EA3A8E; }
.btn--primario:active { box-shadow: 0 1px 0 #A80D57; }

.btn--verde { --btn-bg: var(--verde-profundo); --btn-fg: var(--papel); --btn-bd: var(--verde-profundo); }
.btn--verde:hover { --btn-bg: #1B4E43; }

/* Verde real: para decisiones que son "esto salió bien / está
   listo" — separado de --btn-verde (que en realidad es ciruela). */
.btn--exito { --btn-bg: var(--verde-exito); --btn-fg: #FFFFFF; --btn-bd: var(--verde-exito); }
.btn--exito:hover { --btn-bg: #167A4C; }

.btn--fantasma { --btn-bg: transparent; --btn-bd: var(--linea); }
.btn--fantasma:hover { --btn-bg: var(--papel-hueso); --btn-bd: var(--verde-medio); }

.btn--peligro { --btn-bg: transparent; --btn-fg: var(--rojo); --btn-bd: #F0B8B3; }
.btn--peligro:hover { --btn-bg: var(--rojo-tenue); --btn-bd: var(--rojo); }

.btn--plano { border-color: transparent; min-height: 36px; padding-inline: var(--s-3); }
.btn--plano:hover { --btn-bg: var(--papel-hueso); }

.btn--lg { min-height: 54px; font-size: var(--t-base); padding-inline: var(--s-6); }
.btn--sm { min-height: 34px; font-size: var(--t-xs); padding-inline: var(--s-3); }
.btn--bloque { display: flex; width: 100%; }
.btn--icono { min-height: 40px; width: 40px; padding: 0; border-radius: var(--r-full); }

/* --- Superficies ------------------------------------------ */

.card {
  background: var(--papel-hueso);
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--sombra);
}
.card--plana { box-shadow: none; background: transparent; }
.card--blanca { background: var(--blanco); }
.card--atencion { border-color: #EFC3B6; background: var(--coral-tenue); }

.panel {
  background: var(--papel-hueso);
  border: var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.seccion { padding-block: var(--s-12); }
.seccion + .seccion { border-top: var(--hairline); }

/* --- Sellos (el gesto de la libreta) ----------------------- */

.sello {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  border: 1.5px solid var(--ocre);
  border-radius: var(--r-sm);
  color: #8A0F52;
  background: rgba(224,25,119,.07);
  font-family: var(--data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: center;
}
.sello--coral { border-color: var(--coral); color: #A93A22; background: rgba(226,102,75,.07); }
.sello--verde { border-color: var(--verde-medio); color: var(--verde-profundo); background: rgba(14,134,168,.07); }
.sello--recto { transform: none; }
.sellos { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.sellos > .sello:nth-child(2n) { transform: rotate(2.5deg); }
.sellos > .sello:nth-child(3n) { transform: rotate(-1.5deg); }

/* --- Chips ------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-3);
  border-radius: var(--r-full);
  border: 1px solid var(--linea);
  background: var(--papel);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.chip--confirmado     { background: var(--verde-exito-tenue); border-color: #A8DDBE; color: var(--verde-exito-oscuro); }
.chip--pendiente      { background: var(--ocre-tenue); border-color: #F3AFD3; color: #8A0F52; }
.chip--revision       { background: var(--coral-tenue); border-color: #EFC3B6; color: #A93A22; }
.chip--en_curso       { background: var(--verde-medio); border-color: var(--verde-medio); color: var(--papel); }
.chip--completado     { background: var(--verde-exito-tenue); border-color: #A8DDBE; color: var(--verde-exito-oscuro); }
.chip--cancelado      { background: transparent; border-color: var(--linea); color: var(--tinta-suave); text-decoration: line-through; }
.chip--no_show        { background: var(--rojo-tenue); border-color: #F0B8B3; color: var(--rojo-oscuro); }
.chip--hold           { background: var(--papel-hundido); border-color: var(--linea); color: var(--tinta-suave); }

/* Pago de un turno: eje aparte del estado del turno (asistió o no),
   así que tiene su propia pareja verde/rojo en vez de pedirle
   prestados los chips de arriba, que ya significan otra cosa. */
.chip--pago-si { background: var(--verde-exito-tenue); border-color: #A8DDBE; color: var(--verde-exito-oscuro); }
.chip--pago-no { background: var(--rojo-tenue); border-color: #F0B8B3; color: var(--rojo-oscuro); font-weight: 700; }
.chip--pago-no:hover, .chip--pago-si:hover { filter: brightness(.97); }

/* --- Formularios ------------------------------------------ */

.campo { display: flex; flex-direction: column; gap: var(--s-2); }
.campo + .campo { margin-top: var(--s-4); }

.campo > label, .rotulo {
  font-family: var(--data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-suave);
  font-weight: 500;
}

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3);
  background: var(--blanco);
  color: var(--tinta);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: #C9BFA9; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--verde-medio);
  box-shadow: 0 0 0 3px rgba(47,106,90,.15);
}
.input::placeholder, .textarea::placeholder { color: #A9A296; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--coral); }

.select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C7480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

.ayuda { font-size: var(--t-xs); color: var(--tinta-suave); }
.error { font-size: var(--t-xs); color: #A93A22; font-weight: 600; }

/* Opciones tipo tarjeta (radio / checkbox). El estado "elegido" no
   se banca sólo en el color: además engrosa el borde y suma un
   tilde verde en la esquina, para que quede clarísimo qué está
   tocado incluso mirando de reojo. */
.opciones { display: grid; gap: var(--s-2); }
.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 44px var(--s-3) var(--s-3);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--blanco);
  cursor: pointer;
  position: relative;
  transition: border-color var(--tr), background-color var(--tr), box-shadow var(--tr);
}
.opcion:hover { border-color: #D9B8C9; background: #FFFBFD; }
.opcion input { margin: 2px 0 0; accent-color: var(--verde-exito); width: 18px; height: 18px; flex: none; }
.opcion:has(input:checked) {
  border-color: var(--verde-exito);
  background: var(--verde-exito-tenue);
  box-shadow: 0 0 0 1.5px var(--verde-exito);
}
.opcion:has(input:checked)::after {
  content: '✓';
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--verde-exito); color: #FFFFFF;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.opcion:has(input:focus-visible) { outline: 2.5px solid var(--verde-exito); outline-offset: 2px; }
.opcion__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion__txt strong { font-weight: 600; font-size: var(--t-sm); }
.opcion__txt span { font-size: var(--t-xs); color: var(--tinta-suave); }
.opcion__precio { margin-left: auto; font-family: var(--data); font-size: var(--t-sm); font-weight: 600; }

/* --- Avatares y fotos ------------------------------------- */

.avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-full);
  border: 1.5px solid var(--linea);
  background: var(--papel-hundido);
  object-fit: cover;
  overflow: hidden;
}
.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: 64px; height: 64px; }

.foto-pegada {
  --rot: -1.5deg;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--papel-hundido);
  border: 6px solid var(--blanco);
  border-bottom-width: 18px;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(38,18,29,.16);
  transform: rotate(var(--rot));
}

/* --- Ficha de mascota (elemento firma) --------------------- */

.ficha {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--papel-hueso);
  border: var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  text-align: left;
  width: 100%;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.ficha::before {
  /* margen perforado del carnet */
  content: "";
  position: absolute;
  inset: var(--s-2) auto var(--s-2) 0;
  width: 3px;
  border-right: 2px dotted var(--linea);
  pointer-events: none;
}
.ficha__foto {
  width: 96px; height: 96px;
  object-fit: cover;
  background: var(--papel-hundido);
  border: 5px solid var(--blanco);
  border-bottom-width: 14px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(38,18,29,.14);
  transform: rotate(-1.5deg);
}
.ficha__cuerpo { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ficha__nombre {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--verde-profundo);
}
.ficha__meta { font-size: var(--t-xs); color: var(--tinta-suave); font-family: var(--data); }
.ficha--seleccionable { cursor: pointer; }
.ficha--seleccionable:hover { border-color: #C9BFA9; }
.ficha--activa { border-color: var(--verde-medio); box-shadow: 0 0 0 2px rgba(47,106,90,.28), var(--sombra); }
.ficha__tilde {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--verde-medio); color: var(--papel);
  display: grid; place-items: center;
  opacity: 0; transform: scale(.6); transition: all var(--tr);
}
.ficha--activa .ficha__tilde { opacity: 1; transform: scale(1); }
.ficha--compacta { grid-template-columns: 64px 1fr; padding: var(--s-3); }
.ficha--compacta .ficha__foto { width: 64px; height: 64px; border-width: 4px; border-bottom-width: 10px; }
.ficha--compacta .ficha__nombre { font-size: var(--t-lg); }

/* --- Ticket de cotización --------------------------------- */

.ticket {
  background: var(--blanco);
  border: var(--hairline);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: var(--s-6) var(--s-4) var(--s-4);
  box-shadow: var(--sombra);
  position: relative;
}
.ticket::after {
  /* borde troquelado abajo */
  content: "";
  display: block;
  height: 10px;
  margin: var(--s-4) calc(var(--s-4) * -1) -14px;
  background:
    radial-gradient(circle at 6px 0, transparent 0 6px, var(--blanco) 6px) repeat-x;
  background-size: 14px 10px;
  filter: drop-shadow(0 1px 0 var(--linea));
}
.ticket__linea {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding-block: var(--s-2);
  font-size: var(--t-sm);
}
.ticket__linea + .ticket__linea { border-top: 1px dotted var(--linea); }
.ticket__linea b { font-family: var(--data); font-weight: 600; font-variant-numeric: tabular-nums; }
.ticket__total {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 2px solid var(--verde-profundo);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
}
.ticket__total b { font-family: var(--data); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.04em; }

/* --- Tabs -------------------------------------------------- */

.tabs { display: flex; gap: var(--s-1); border-bottom: var(--hairline); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; background: none; border: 0;
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--tr), border-color var(--tr);
}
.tab:hover { color: var(--tinta); }
.tab[aria-selected="true"] { color: var(--verde-profundo); border-bottom-color: var(--ocre); }

/* --- Barra de progreso ------------------------------------ */

.progreso {
  height: 10px; border-radius: var(--r-full);
  background: var(--papel-hundido);
  border: var(--hairline);
  overflow: hidden;
}
.progreso__valor {
  height: 100%; background: var(--ocre);
  border-radius: var(--r-full);
  transition: width 400ms cubic-bezier(.2,.7,.3,1);
}
.progreso--verde .progreso__valor { background: var(--verde-medio); }
.progreso--coral .progreso__valor { background: var(--coral); }

/* --- Pasos ------------------------------------------------- */

.pasos { display: flex; align-items: center; gap: var(--s-2); }
.paso {
  flex: 1 1 0; height: 4px; border-radius: var(--r-full);
  background: var(--papel-hundido);
  transition: background-color var(--tr);
}
.paso--hecho { background: var(--verde-medio); }
.paso--actual { background: var(--ocre); }

/* --- Banner ------------------------------------------------ */

.banner {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--linea);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--papel-hueso);
  font-size: var(--t-sm);
}
.banner--atencion { border-color: #F3AFD3; border-left-color: var(--ocre); background: var(--ocre-tenue); color: #7A0F4A; }
.banner--alerta   { border-color: #EFC3B6; border-left-color: var(--coral); background: var(--coral-tenue); color: #8A3520; }
.banner--ok       { border-color: #A8DDBE; border-left-color: var(--verde-exito); background: var(--verde-exito-tenue); color: var(--verde-exito-oscuro); }
.banner .icono { margin-top: 2px; }

/* --- Modal ------------------------------------------------- */

.modal-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(74,14,56,.42);
  backdrop-filter: blur(2px);
  display: grid; place-items: end center;
  padding: 0;
  animation: aparecer 180ms ease both;
}
.modal {
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  overflow: auto;
  background: var(--papel);
  border: var(--hairline);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sombra-alta);
  padding: var(--s-6) var(--s-4) var(--s-8);
  animation: subir 220ms cubic-bezier(.2,.7,.3,1) both;
}
.modal__barra {
  width: 44px; height: 4px; border-radius: var(--r-full);
  background: var(--linea); margin: calc(var(--s-4) * -1) auto var(--s-4);
}
.modal__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 640px) {
  .modal-fondo { place-items: center; padding: var(--s-6); }
  .modal { border-radius: var(--r-lg); padding: var(--s-6); }
  .modal__barra { display: none; }
}

/* --- Toast ------------------------------------------------- */

.toasts {
  position: fixed; z-index: 80;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--s-4));
  display: flex; flex-direction: column; gap: var(--s-2);
  width: min(420px, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-full);
  background: var(--verde-profundo);
  color: var(--papel);
  font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--sombra-alta);
  animation: subir 220ms cubic-bezier(.2,.7,.3,1) both;
}
.toast--error { background: #A93A22; }
.toast--ocre { background: var(--ocre); color: #FFFFFF; }

/* --- Estado vacío ------------------------------------------ */

.vacio {
  display: grid; gap: var(--s-3); justify-items: center;
  text-align: center;
  padding: var(--s-8) var(--s-4);
  border: 1.5px dashed var(--linea);
  border-radius: var(--r-lg);
  color: var(--tinta-suave);
}
.vacio h3 { color: var(--verde-profundo); }

/* --- Skeleton / carga -------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--papel-hundido) 25%, #FBE8F0 37%, var(--papel-hundido) 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease infinite;
  border-radius: var(--r-sm);
}

/* --- Animaciones ------------------------------------------- */

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* El único momento orquestado: el sello que baja y se estampa. */
@keyframes estampar {
  0%   { opacity: 0; transform: scale(2.6) rotate(-16deg); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(.92) rotate(-7deg); filter: blur(0); }
  70%  { transform: scale(1.06) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.estampa {
  display: grid; place-items: center;
  width: 108px; height: 108px;
  border: 3.5px solid var(--verde-medio);
  border-radius: var(--r-full);
  color: var(--verde-medio);
  background: rgba(14,134,168,.06);
  animation: estampar 620ms cubic-bezier(.2,.8,.3,1) both;
}
.estampa .icono { width: 46px; height: 46px; stroke-width: 2.4; }