/* ════════════════════════════════════════════════════════════
   d'RAZA Grooming — Tema oscuro (negro + dorado). Mobile-first.
   Objetivos táctiles grandes, pensado para tablet/celular con prisa.
   ════════════════════════════════════════════════════════════ */
:root {
  --negro: #1a1a1a;
  --negro-2: #242424;
  --negro-3: #2e2e2e;
  --dorado: #d4af37;
  --dorado-osc: #b8962f;
  --blanco: #ffffff;
  --gris: #9a9a9a;
  --gris-claro: #f5f5f5;
  --verde: #27ae60;
  --ambar: #f39c12;
  --rojo: #e74c3c;
  --radio: 14px;
  --sombra: 0 4px 16px rgba(0,0,0,.35);
  --topbar-h: 56px;
  --nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--negro);
  color: var(--blanco);
  font-size: 16px;
  line-height: 1.4;
  overscroll-behavior-y: contain;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  /* La altura crece para incluir la zona segura del notch/barra de estado (iOS) */
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--negro-2);
  border-bottom: 1px solid var(--negro-3);
}
.brand { display: flex; align-items: center; gap: 8px; }
.logo { height: 34px; width: auto; }
.brand-txt { font-weight: 800; letter-spacing: .5px; color: var(--dorado); font-size: 1.2rem; }
.topbar-der { display: flex; align-items: center; gap: 8px; }
.badge {
  font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--negro-3); white-space: nowrap;
}
.badge.verde { background: rgba(39,174,96,.18); color: #6ee7a0; }
.badge.ambar { background: rgba(243,156,18,.18); color: #f6c453; }
.badge.gris  { background: var(--negro-3); color: var(--gris); }
.icono-btn {
  background: var(--negro-3); width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.1rem;
}

/* ── Vista / layout ── */
.vista {
  min-height: calc(100vh - var(--topbar-h) - var(--nav-h));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}
.vista-cont { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.hero h1 { font-size: 1.6rem; }
.hero .sub { color: var(--gris); text-transform: capitalize; }
.titulo-sec { color: var(--dorado); margin-top: 6px; }
.sub-h { color: var(--dorado); margin: 4px 0; font-size: 1rem; }
.barra-titulo { display: flex; align-items: center; gap: 10px; }
.barra-titulo h1 { flex: 1; }
.barra-acc { display: flex; gap: 8px; }
.sub-info { color: var(--gris); font-size: .9rem; }

/* ── Botones ── */
.btn {
  background: var(--dorado); color: #1a1a1a; font-weight: 800;
  padding: 14px 18px; border-radius: var(--radio); box-shadow: var(--sombra);
}
.btn:active { background: var(--dorado-osc); }
.btn-grande { padding: 18px; font-size: 1.1rem; }
.btn-bloque { width: 100%; display: block; }
.btn-sec {
  background: var(--negro-3); color: var(--blanco); font-weight: 700;
  padding: 13px 16px; border-radius: var(--radio); border: 1px solid #3a3a3a;
}
.btn-mini { background: var(--negro-3); padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: .9rem; }
.btn-peligro { background: var(--rojo); color: #fff; font-weight: 700; padding: 13px 16px; border-radius: var(--radio); }
.btn-peligro-sec { background: rgba(231,76,60,.15); color: #ff8a7d; padding: 13px 16px; border-radius: var(--radio); font-weight: 700; }
.btn-wa { background: #25d366; color: #07351b; font-weight: 800; padding: 13px 16px; border-radius: var(--radio); }
.btn.deshab, .btn[disabled] { background: #4a4636; color: #8c8773; box-shadow: none; }

/* ── Tarjetas resumen ── */
.tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarjetas-3 { grid-template-columns: 1fr 1fr 1fr; }
.tarjeta {
  background: var(--negro-2); border: 1px solid var(--negro-3); border-radius: var(--radio);
  padding: 16px; display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.tarjeta-icono { font-size: 1.4rem; }
.tarjeta-valor { font-size: 1.6rem; font-weight: 800; color: var(--dorado); }
.tarjeta-titulo { color: var(--gris); font-size: .85rem; }
.accesos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.acceso { background: var(--negro-2); border: 1px solid var(--negro-3); border-radius: 999px; padding: 10px 16px; font-weight: 600; }

/* ── Listas / ítems ── */
.lista { display: flex; flex-direction: column; gap: 10px; }
.vacio { text-align: center; color: var(--gris); padding: 32px 12px; font-size: 1.05rem; }
.vacio.chico { padding: 16px; font-size: .95rem; }

.item-reserva, .item-simple, .item-check {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--negro-2); border: 1px solid var(--negro-3);
  border-radius: var(--radio); padding: 14px; width: 100%;
}
.item-hora { font-weight: 800; color: var(--dorado); min-width: 52px; }
.item-info { flex: 1; }
.item-titulo { font-weight: 700; }
.item-sub { color: var(--gris); font-size: .88rem; }
.miniatura { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--negro-3); display: grid; place-items: center; font-size: 1.5rem; }
.miniatura.ph { color: var(--gris); }
.foto-perfil-hist { width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--radio); }
.is-nombre { display: block; font-weight: 700; }
.mascotas-cli { color: var(--dorado); }
.fecha-header { color: var(--dorado); font-weight: 800; font-size: .95rem; text-transform: capitalize; margin: 14px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--negro-3); }
.fecha-header:first-child { margin-top: 0; }
.is-sub { display: block; color: var(--gris); font-size: .85rem; }

/* Fila con acción a la derecha (mascota con editar, raza oculta con reactivar) */
.item-fila { display: flex; align-items: stretch; gap: 8px; }
.item-fila .item-main {
  flex: 1; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--negro-2); border: 1px solid var(--negro-3);
  border-radius: var(--radio); padding: 14px;
}
.item-fila .item-main.oculto { opacity: .55; }
.zona-peligro { margin-top: 28px; }
.item-fila .icono-btn { align-self: center; }

.item-check.sel { border-color: var(--dorado); background: rgba(212,175,55,.1); }
.check { font-size: 1.3rem; color: var(--dorado); }
.ic-info { flex: 1; }

.pill { font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; text-transform: capitalize; }
.pill.gris { background: var(--negro-3); color: var(--gris); }
.pill.ambar { background: rgba(243,156,18,.2); color: #f6c453; }
.pill.verde { background: rgba(39,174,96,.2); color: #6ee7a0; }
.pill.rojo  { background: rgba(231,76,60,.2); color: #ff8a7d; }

/* ── Card de reserva (citas del día) ── */
.card-reserva { background: var(--negro-2); border: 1px solid var(--negro-3); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card-cab { display: flex; justify-content: space-between; align-items: flex-start; }
.card-cliente { font-weight: 800; }
.card-tel { color: var(--gris); font-size: .85rem; }
.card-der { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.card-hora { color: var(--dorado); font-weight: 700; }
.card-mascota { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--negro); border-radius: 10px; padding: 10px 12px; }
.cm-info { display: flex; flex-direction: column; gap: 2px; }
.cm-nombre { font-weight: 700; }
.cm-raza, .cm-est { color: var(--gris); font-size: .82rem; }
.card-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.card-acciones > * { flex: 1; min-width: 110px; text-align: center; }

/* ── Wizard (agendar) ── */
.pasos { display: flex; gap: 4px; }
.paso { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .5; }
.paso.activo, .paso.hecho { opacity: 1; }
.paso-num { width: 30px; height: 30px; border-radius: 50%; background: var(--negro-3); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.paso.activo .paso-num { background: var(--dorado); color: #1a1a1a; }
.paso.hecho .paso-num { background: var(--verde); color: #fff; }
.paso-lbl { font-size: .72rem; color: var(--gris); }
.paso-cont { display: flex; flex-direction: column; gap: 14px; }
.paso-titulo { color: var(--blanco); }
.paso-ayuda, .resumen-chip { color: var(--gris); font-size: .9rem; }
.resumen-chip { background: var(--negro-2); border-radius: 999px; padding: 8px 14px; align-self: flex-start; }
.wizard-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wizard-pie > .btn, .wizard-pie > .btn-sec { flex: 1; text-align: center; }
.wizard-pie.pegajoso { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); background: var(--negro); padding: 10px 0; }

/* ── Formularios ── */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--gris); font-weight: 600; }
.input, .select, .input-fecha, .input-busc {
  width: 100%; background: var(--negro-2); border: 1px solid var(--negro-3);
  color: var(--blanco); padding: 13px; border-radius: 10px;
}
.input-busc { font-size: 1.05rem; }
textarea.input { resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dorado) 50%), linear-gradient(135deg, var(--dorado) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.busc-res { margin-top: 6px; }

/* ── Bloques de disponibilidad ── */
.bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.bloque { background: var(--negro-2); border: 1px solid var(--negro-3); border-radius: 12px; padding: 12px 6px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.bloque .bl-hora { font-weight: 800; font-size: 1.05rem; }
.bloque .bl-cupo { font-size: .72rem; color: var(--verde); }
.bloque.sel { border-color: var(--dorado); background: rgba(212,175,55,.15); }
.bloque.lleno { opacity: .4; }
.bloque.lleno .bl-cupo { color: var(--rojo); }

/* ── Servicios (chips en agendar) ── */
.panel-servicios { background: var(--negro); border: 1px solid var(--negro-3); border-radius: 0 0 12px 12px; margin-top: -8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.servicios-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-serv { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--negro-2); border: 1px solid var(--negro-3); border-radius: 12px; padding: 8px 12px; text-align: left; }
.chip-serv.on { border-color: var(--dorado); background: rgba(212,175,55,.15); }
.chip-precio { color: var(--dorado); font-size: .78rem; font-weight: 700; }
.sub-mascota { font-size: .85rem; color: var(--gris); }
.serv-fila { display: flex; justify-content: space-between; padding: 4px 0; }
.serv-total { display: flex; justify-content: space-between; border-top: 1px solid var(--negro-3); padding-top: 8px; margin-top: 4px; }
.serv-total b, .serv-fila b { color: var(--dorado); }
.fila-precio { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; align-items: end; margin-bottom: 8px; }
.fp-lbl { font-weight: 700; padding-bottom: 12px; }

/* ── Confirmación ── */
.conf-bloque { background: var(--negro-2); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.conf-fila { display: flex; justify-content: space-between; }
.conf-fila span { color: var(--gris); }
.conf-mascota { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--negro-2); border-radius: 10px; padding: 12px; }
.conf-mascota .select { width: auto; min-width: 140px; }
.total-est { text-align: right; font-size: 1.1rem; }
.total-est b { color: var(--dorado); }

/* ── Atención ── */
.mascota-cab { background: var(--negro-2); border-radius: var(--radio); padding: 14px; }
.mc-nombre { font-size: 1.2rem; font-weight: 800; }
.mc-sub { color: var(--gris); }
.guia-corte { background: rgba(212,175,55,.12); border-left: 3px solid var(--dorado); padding: 10px 12px; border-radius: 8px; font-size: .92rem; }
.guia-corte.alerta { background: rgba(231,76,60,.12); border-left-color: var(--rojo); }
.seccion { display: flex; flex-direction: column; gap: 10px; background: var(--negro-2); border-radius: var(--radio); padding: 14px; }
.total-pago { color: var(--gris); font-size: .9rem; }
.total-pago.ok { color: var(--verde); }
.chks { display: flex; flex-direction: column; gap: 10px; }
.chk { display: flex; align-items: center; gap: 10px; color: var(--blanco); font-weight: 600; }
.chk input { width: 22px; height: 22px; accent-color: var(--dorado); }
.foto-prev { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; margin-top: 8px; }

/* ── Historial ── */
.card-sesion { background: var(--negro-2); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cs-cab { display: flex; justify-content: space-between; }
.cs-cab span { color: var(--dorado); font-weight: 700; }
.cs-sub { color: var(--gris); font-size: .85rem; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--negro-3); border-radius: 999px; padding: 3px 10px; font-size: .75rem; color: var(--dorado); }
.cs-notas { font-size: .9rem; }

/* ── Configuración ── */
.dias { display: flex; gap: 6px; }
.dia { width: 40px; height: 40px; border-radius: 50%; background: var(--negro-3); font-weight: 800; }
.dia.on { background: var(--dorado); color: #1a1a1a; }
.item-config { display: flex; justify-content: space-between; align-items: center; background: var(--negro-2); border-radius: 10px; padding: 12px 14px; }

/* ── Aviso "Por recuperar" en Inicio ── */
.nudge-recuperar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; font-weight: 700;
  background: rgba(243,156,18,.15); color: #f6c453;
  border: 1px solid rgba(243,156,18,.35); border-radius: var(--radio); padding: 14px 16px;
}
.nudge-flecha { font-size: 1.2rem; }

/* ── Por recuperar (tarjetas) ── */
.card-mascota.recuperar { flex-direction: column; align-items: stretch; gap: 8px; }
.recuperar-acc { display: flex; gap: 8px; margin-top: 6px; }
.btn-chip { flex: 1; background: var(--negro-3); border: 1px solid #3a3a3a; border-radius: 999px; padding: 9px 10px; font-size: .82rem; font-weight: 700; }
.btn-chip:active { background: var(--negro); }

/* ── Reportes ── */
.tabs { display: flex; gap: 8px; }
.tab { flex: 1; background: var(--negro-2); border: 1px solid var(--negro-3); padding: 12px; border-radius: 10px; font-weight: 700; color: var(--gris); }
.tab.on { background: var(--dorado); color: #1a1a1a; }
.item-rep { display: flex; justify-content: space-between; align-items: center; background: var(--negro-2); border-radius: 10px; padding: 12px 14px; }
.item-rep b { color: var(--dorado); }

/* ── Avisos ── */
.aviso { padding: 12px 14px; border-radius: 10px; }
.aviso.ambar { background: rgba(243,156,18,.15); color: #f6c453; }
.aviso.rojo { background: rgba(231,76,60,.15); color: #ff8a7d; }

/* ── Navegación inferior ── */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--negro-2); border-top: 1px solid var(--negro-3);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .68rem; color: var(--gris); background: none;
}
.nav-item span { font-size: 1.25rem; }
.nav-item.activo { color: var(--dorado); }
.nav-fab {
  flex: 0 0 auto; width: 58px; height: 58px; margin: -16px 6px 0; border-radius: 50%;
  background: var(--dorado); color: #1a1a1a; box-shadow: var(--sombra);
}
.nav-fab span { font-size: 1.6rem; }

/* ── Toasts ── */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 20px); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 480px; }
.toast { padding: 13px 16px; border-radius: 12px; font-weight: 600; box-shadow: var(--sombra); animation: subir .3s ease; }
.toast.verde { background: var(--verde); color: #fff; }
.toast.ambar { background: var(--ambar); color: #1a1a1a; }
.toast.rojo  { background: var(--rojo); color: #fff; }
.toast.saliendo { opacity: 0; transform: translateY(10px); transition: .3s; }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; } }

/* ── Modal ── */
.modal-fondo { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal { background: var(--negro-2); width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; animation: subir .25s ease; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--negro-3); position: sticky; top: 0; background: var(--negro-2); }
.modal-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-cuerpo > div { display: flex; flex-direction: column; gap: 12px; }
.modal-msg { color: var(--blanco); }
.modal-acciones { display: flex; gap: 10px; }
.modal-acciones > * { flex: 1; text-align: center; }

/* ── Cargando ── */
.cargando { position: fixed; inset: 0; display: grid; place-items: center; z-index: 80; pointer-events: none; }
.cargando[hidden] { display: none; }
.spinner { width: 44px; height: 44px; border: 4px solid var(--negro-3); border-top-color: var(--dorado); border-radius: 50%; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ── Responsive: tablet ── */
@media (min-width: 768px) {
  .vista-cont { padding: 24px; }
  .nav-item { font-size: .8rem; }
  body { font-size: 17px; }
}