:root{
    --brand:#0ea5e9;
    --brand-2:#0369a1;
    --ink:#111827;
    --muted:#6b7280;
    --bg:#0b0f1a;
    --card:#111827;
    --ring: 0 0 0 3px rgba(14,165,233,.25);
    --radius: 16px;
}
*{box-sizing:border-box}
html,body{
    margin:0;padding:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
    color:#e5e7eb;
    background:linear-gradient(180deg,#0b0f1a, #0b0f1a 60%, #0a0e17);
    scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px, 92vw);margin:0 auto}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    padding:1rem 1.1rem;border-radius:12px;background:var(--brand);color:#001018;
    font-weight:800;letter-spacing:.2px;box-shadow:0 8px 18px rgba(14,165,233,.35);transition:.2s;
    min-height:48px;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.16);color:#e5e7eb;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.12);color:#e5e7eb}

/* ===== NAVBAR ===== */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(11,15,26,.85);border-bottom:1px solid rgba(255,255,255,.08)}
nav.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.logo{display:flex;align-items:center;gap:.7rem;font-weight:900;letter-spacing:.3px}
.logo-mark{width:36px;height:36px;border-radius:999px;background:radial-gradient(circle at 30% 30%, #fecaca, #ef4444 50%, #7f1d1d);box-shadow:0 6px 22px rgba(239,68,68,.45)}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.nav-links a{opacity:.95;transition:.25s;padding:.5rem .8rem;border-radius:999px}
.nav-links a:hover{opacity:1;background:rgba(255,255,255,.08)}
.nav-links a::after{content:"";display:block;height:2px;margin-top:6px;background:linear-gradient(90deg,transparent,#ef4444,transparent);transform:scaleX(0);transition:transform .25s;transform-origin:center}
.nav-links a:hover::after{transform:scaleX(1)}
.call-btn{background:#0ea5e9;color:#001018;box-shadow:0 8px 18px rgba(14,165,233,.35);font-weight:800;border-radius:10px;min-height:44px}
.call-btn:hover{background:#38bdf8}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:1px solid rgba(255,255,255,.12);width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:2px;background:#e5e7eb;border-radius:2px}

.hero{padding:64px 0 24px}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.headline{font-size:clamp(28px, 6vw, 56px); line-height:1.05;font-weight:900;margin:0 0 .5rem}
.sub{font-size:1.05rem;color:#cbd5e1;max-width:56ch}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);padding:1.2rem;border-radius:var(--radius)}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}
.hero-grid .item{background:var(--card);border:1px solid rgba(255,255,255,.08);padding:1rem;border-radius:14px}
.hero-grid .item h4{margin:.2rem 0 .1rem}

.section{padding:56px 0}
.title{font-size:clamp(22px,4vw,30px);font-weight:900;margin:0 0 .8rem}
.muted{color:#9ca3af}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.1rem}
.icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(14,165,233,.12);color:#67e8f9}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.price{display:flex;align-items:baseline;gap:.35rem;font-weight:900}
.price .num{font-size:28px}

.hours{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.table{border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.table-row{display:grid;grid-template-columns:1fr auto;padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.table-row:last-child{border-bottom:none}

.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}

.form{display:grid;gap:.7rem}
.input, textarea{width:100%;padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#0f172a;color:#e5e7eb;font-size:16px;line-height:1.35;min-height:48px}
textarea{min-height:120px;resize:vertical}
.input:focus, textarea:focus{outline:none;box-shadow:var(--ring)}

.faq{display:grid;gap:.6rem}
details{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.8rem 1rem}
summary{cursor:pointer;font-weight:700}

.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.gallery img{height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08)}

.map{border:0;width:100%;height:320px;border-radius:14px}

footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.06);color:#a1a1aa}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}

.floating-wa{position:fixed;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:.6rem;background:#22c55e;color:#062b12;padding:.9rem 1rem;border-radius:999px;font-weight:900;box-shadow:0 10px 24px rgba(34,197,94,.45);z-index:60;min-height:48px}
.floating-wa svg{width:20px;height:20px}

/* ===== DASHBOARD ===== */
#dashboard{display:none}
.dash-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.table2{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.table2 th,.table2 td{padding:.7rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;font-size:.95rem}
.status-pill{padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:.8rem}

/* Login modal */
.modal{display: none; position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;z-index:70}
.modal.show{display:flex}
.modal .box{width:min(440px,92vw);background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1rem}

/* Login Modal Success */
.modalSuccess{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.35); /* overlay */
  backdrop-filter: blur(4px);
  z-index: 1000; /* por encima de todo */
}
.modalSuccess.show{ display:flex; }
.modalSuccess .box{
  width:min(440px,92vw);
  background: var(--card, #111827);
  color: inherit;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:1rem;
  text-align: center;
}

/* Avatar redondo */
.CircleImg{
  width:125px;
  height:125px;
  border:5px solid #fff;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin-inline:auto;
}
.titleH3{ margin-bottom:0; }
/* ===== Responsive ===== */
@media (max-width: 900px){
    .hero .wrap{grid-template-columns:1fr}
    .grid-3, .pricing{grid-template-columns:1fr}
    .hero-grid{grid-template-columns:1fr 1fr}
    .cols{grid-template-columns:1fr}
    .hours{grid-template-columns:1fr}
    .nav-toggle{display:flex}
    .nav-links{position:fixed;left:0;right:0;bottom:0;background:rgba(11,15,26,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.08);display:grid;gap:.8rem;padding:12px;transform:translateY(110%);transition:.25s ease}
    .nav-links.open{transform:translateY(0)}
    .nav-links a,.call-btn{justify-content:center}
}
@media (max-width: 600px){
    .hero{padding:40px 0 16px}
    .headline{font-size:clamp(26px,8vw,36px)}
    .sub{font-size:1rem}
    .hero-grid{grid-template-columns:1fr}
    #turno .grid-3{grid-template-columns:1fr !important}
    #turno form > div{grid-template-columns:1fr !important}
    .btn{width:100%}
    .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 380px){
    .container{width:94vw}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .floating-wa{right:12px;bottom:12px;padding:.8rem .9rem}
}
/* === Dashboard mejorado === */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:.6rem 0 1rem}
.stat{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.8rem}
.stat-num{font-size:28px;font-weight:900;line-height:1}
.stat-label{color:#9ca3af;font-size:.9rem;margin-top:.2rem}
.dash-controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:.6rem;margin:.8rem 0}
.table2 td .row-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.status-pill.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#86efac}
.status-pill.pending{border-color:rgba(234,179,8,.35);background:rgba(234,179,8,.10);color:#fde68a}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:.8rem}
.badge.whatsapp{border-color:rgba(34,197,94,.35)}
.badge.phone{border-color:rgba(14,165,233,.35)}
@media (max-width: 900px){
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .dash-controls{grid-template-columns:1fr 1fr}
}
/* ===== Tabla bonita ===== */
.table2{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
}
.table2 thead th{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  position:sticky; top:0; z-index:1;
}
.table2 tr{ transition:background .15s ease; }
.table2 tbody tr:hover{ background:rgba(255,255,255,.03); }

/* celdas centradas verticalmente */
.table2 th,.table2 td{ vertical-align:middle; }

/* “Creado” y “Cita” en una línea */
.td-nowrap{ white-space:nowrap; }

/* Detalle con clamp (2 líneas) */
.td-detalle{
  max-width: 800px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pills de contacto */
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  font-size:.85rem; line-height:1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.badge.phone{
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.35);
}
.badge.whatsapp{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.35);
}
.badge .dot{
  width:.6rem;height:.6rem;border-radius:50%;
  background:currentColor; display:inline-block;
}

/* Estado pulido */
.status-pill{
  padding:.25rem .6rem; border-radius:999px;
  font-weight:700; letter-spacing:.2px; text-transform:lowercase;
}
.status-pill.ok{
  color:#86efac; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4);
}
.status-pill.pending{
  color:#fde68a; background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.4);
}

/* Botones compactos en acciones */
.row-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.btn.xs{
  padding:.55rem .7rem; min-height:auto; border-radius:10px;
  font-weight:700; font-size:.9rem;
}

/* Responsive acciones: sólo ícono en mobile */
@media (max-width: 700px){
  .row-actions .btn{ padding:.5rem; }
  .row-actions .btn::after{ content:attr(data-ico); font-size:1rem; }
  .row-actions .btn{ font-size:0; }
}

html, body {
  overscroll-behavior: none;   /* Bloquea overscroll en navegadores modernos */
  margin: 0;
  padding: 0;
}

/* Quita el destello blanco arriba/abajo */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  background-color: #0b0f1a;          /* tu color más oscuro */
  overscroll-behavior: none;          /* evita el “rebote” en Chrome/Brave/Edge */
}

/* Si usás gradiente, ponelo en html y deja color sólido de respaldo */
html {
  background:
    linear-gradient(180deg, #0b0f1a, #0b0f1a 60%, #0a0e17) no-repeat fixed;
  background-color: #0b0f1a;          /* fallback cuando hay estiramiento */
}

/* iOS Safari: asegura fondo oscuro durante el elástico */
@supports (-webkit-touch-callout: none) {
  body { background-color: #0b0f1a; }
}

.logo {
  pointer-events: none;
}

/* Celda Detalle con preview + botón */
.td-detalle{ 
  max-width: 520px; 
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width: 900px){ .td-detalle{ max-width: 320px; -webkit-line-clamp:3; } }

.detalle-cell{ display:flex; align-items:center; gap:.6rem; }

.btn-confirm {
  background: #22c55e; /* verde */
  color: white;
  border: none;
  padding: .4rem .8rem;
  border-radius: 6px;
  cursor: pointer;
}

.btn-deny {
  background: #ef4444; /* rojo */
  color: white;
  border: none;
  padding: .4rem .8rem;
  border-radius: 6px;
  cursor: pointer;
}

.btn-confirm:hover { background: #16a34a; }
.btn-deny:hover { background: #dc2626; }

.estado.confirmado { color: #22c55e; font-weight: 600; }
.estado.denegado { color: #ef4444; font-weight: 600; }
.estado.pendiente { color: #eab308; font-weight: 600; }

.status-pill.muted { background:#374151; color:#e5e7eb; } /* gris */
.status-pill.deny  { background:#ef4444; color:#fff; }   /* rojo */

/* ====== PATCH MOBILE CLEANUP ====== */

/* contenedor y secciones más compactos en móvil */
@media (max-width: 600px){
  .container{ width:100%; padding-inline:16px; }
  .section{ padding:32px 0; }
  .card{ padding:14px; }
  .btn{ width:100%; min-height:44px; padding:.9rem 1rem; box-shadow:0 6px 14px rgba(14,165,233,.22); }
  .btn.secondary,.btn.ghost{ box-shadow:none; }
  .call-btn{ box-shadow:none; }                  /* quita halo fuerte del botón “Llamar” */
  .hero{ padding:40px 0 12px; }
  .hero-card{ padding:14px; box-shadow:none; }
  .hero-grid{ grid-template-columns:1fr; gap:.6rem; }
}

/* Menú móvil como overlay superior, no bottom-sheet invasivo */
@media (max-width: 900px){
  .nav-links{
    position: fixed;
    inset: 56px 0 auto 0;                        /* debajo del header */
    max-height: calc(100dvh - 56px);
    background: rgba(11,15,26,.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.08);
    display: grid;
    gap: .8rem;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(-120%);
    transition: transform .25s ease;
    z-index: 60;
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a, .call-btn{ justify-content:center; }
  body.menu-open{ overflow: hidden; }            /* bloquea scroll del body */
}

/* Tipos y espacios más “livianos” en móvil chico */
@media (max-width: 430px){
  .headline{ font-size: clamp(26px, 7.2vw, 34px); }
  .title{ font-size: clamp(20px, 5.6vw, 26px); margin-bottom:.6rem; }
  .sub, .muted, .table-row, .input{ font-size: clamp(14px, 3.8vw, 16px); }
}

/* Reduce brillo/sombras globales que generan “halo” */
.call-btn, .btn{
  filter: none !important;
}
.hero-card, .card{
  box-shadow: none !important;
}

/* Botón flotante WhatsApp: un poco menos intrusivo */
.floating-wa{
  right: 14px; bottom: 14px;
  box-shadow: 0 8px 18px rgba(34,197,94,.35);
  padding: .8rem .95rem;
}

/* Safe area inferior para iPhone */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  .nav-links{ padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}