/* ============================================================================
   TEMA MAINTON — la presentación de la plantilla sobre la web existente.
   Paleta: celeste #16bae1 · amarillo #fbb908 · tinta #1e1e29 · marino #072d5a
   Tipografías: Rubik (títulos) + Sintony (texto), como la plantilla.
   Se carga DE ÚLTIMO para mandar sobre el tema anterior.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;900&family=Sintony:wght@400;700&display=swap');

:root{
  --primary: 193 82% 48%;          /* #16bae1 */
  --ring: 193 82% 48%;
  --accent: 45 96% 51%;            /* #fbb908 */
  --radius: .35rem;
}

body{ font-family:'Sintony','Trebuchet MS',system-ui,sans-serif; }
.font-display{ font-family:'Rubik','Trebuchet MS',sans-serif; font-weight:500; }
h2.font-display{ color:#1e1e29; letter-spacing:0; }
.tz-hero .font-display,.mp-hero .font-display{ color:#fff; }

/* ---- Botones: planos con borde, como .btn-style-one de la plantilla ---- */
.mp-btn-pill,.mp-btn-pill-o,.rounded-full[class*="bg-primary"],button.rounded-xl[class*="bg-primary"],
.mp-busca-btn,.mp-btn-lleno{
  border-radius:4px!important;
  box-shadow:none;
  text-transform:none;
  font-family:'Rubik',sans-serif;
  font-weight:500;
  letter-spacing:.01em;
}
.mp-btn-pill-o{ border:2px solid #16bae1; color:#0b7d99; }
.mp-btn-pill-o:hover{ background:#16bae1; border-color:#16bae1; color:#fff; }
.mp-busca-btn,.mp-btn-lleno,.mp-tab2-on,.mp-dest-flecha:hover,.mp-busca-sel:focus{
  background-color:#16bae1; border-color:#16bae1;
}
.mp-busca-btn:hover,.mp-btn-lleno:hover{ background-color:#0d94b5; border-color:#0d94b5; }

/* ---- Tarjetas: blancas con la sombra suave de la plantilla ---- */
.glass,.glass-strong{
  background:#ffffff;
  border:1px solid #e2edf5;
  box-shadow:0 10px 30px rgba(7,45,90,.06);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:box-shadow .3s ease, transform .3s ease;
}
.glass:hover,.glass-strong:hover{ box-shadow:0 18px 40px rgba(7,45,90,.10); }

/* ---- Bandas y fondos de sección ---- */
.mp-banda-gris{ background:#e8f1f7; }
.mp-banda-grad,.mp-banda-marcas,.mp-cat-band{ background:linear-gradient(105deg,#072d5a,#16bae1); }
.mp-prop-a{ background:linear-gradient(135deg,#072d5a,#0d94b5); }
.mp-prop-b{ background:linear-gradient(135deg,#0d94b5,#16bae1); }
.text-gradient{ background:linear-gradient(to right,#072d5a,#16bae1); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- Verdes esmeralda del tema viejo → celeste de la plantilla ---- */
.text-emerald-400,.text-emerald-500{ color:#16bae1; }
.bg-emerald-400,.bg-emerald-500{ background-color:#16bae1; }
.bg-emerald-500\/10{ background-color:rgba(22,186,225,.1); }
.bg-emerald-500\/20{ background-color:rgba(22,186,225,.2); }
.border-emerald-500\/30{ border-color:rgba(22,186,225,.3); }
.mp-h-ico:hover{ color:#16bae1; }

/* ---- Pie de página marino, como la plantilla ---- */
.mp-footer{ background:#072d5a; color:#b7c8de; }
.mp-footer .text-muted-foreground{ color:#92b0d4; }

/* ---- Revelado al hacer scroll (efecto WOW/fadeInUp de la plantilla) ---- */
.ns-rev{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s ease; }
.ns-rev.ns-vis{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .ns-rev{ opacity:1; transform:none; transition:none; } }

/* ---- Botón «subir» de la plantilla ---- */
#ns-subir{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:44px; height:44px; border:none; border-radius:4px;
  background:#16bae1; color:#fff; font-size:20px; line-height:1;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(7,45,90,.25); transition:background .2s;
}
#ns-subir:hover{ background:#072d5a; }
#ns-subir.ns-on{ display:flex; }

/* ---- Estado del pedido: letras blancas sobre celeste ---- */
.ns-estado-chip{ display:inline-block; background:#16bae1; color:#fff!important; padding:4px 12px; border-radius:4px; font-weight:600; font-size:13px; }

/* ---- Elección del reembolso: ventana propia que tapa lo de atrás ---- */
.ns-eleccion{
  position:fixed!important; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:86vh; overflow-y:auto;
  background:#fff!important; border:none!important; border-radius:16px;
  padding:22px 22px 18px!important; z-index:160;
  box-shadow:0 0 0 100vmax rgba(7,25,45,.6), 0 30px 80px rgba(7,45,90,.35);
}

/* Panel «Tu servicio asignado» del técnico: banda azul, letras blancas,
   tarjetas blancas adentro. */
.ns-banda-azul{ background:linear-gradient(115deg,#0d94b5,#16bae1); border:none;
  box-shadow:0 14px 30px rgba(13,148,181,.30); }
.ns-banda-azul>h2.font-display{ color:#fff!important; }
.ns-banda-azul>p.text-muted-foreground{ color:rgba(255,255,255,.88)!important; }
.ns-banda-azul>div{ background:#fff; border:1px solid #e2edf5!important;
  box-shadow:0 6px 18px rgba(7,45,90,.10); }

/* ============================================================================
   TIPOGRAFÍA BLINDADA — letras profesionales aunque el CSS base sea viejo.
   Tinta oscura para títulos y datos, gris sobrio para textos secundarios.
   ========================================================================== */
:root{
  --background:204 45% 98%; --card:0 0% 100%;
  --foreground:216 28% 14%; --muted-foreground:213 14% 42%;
}
body{ color:#1e2733; background:#f6fafd; }
h1,h2,h3,h4,.font-display{ color:#101828; }
.text-foreground{ color:#1e2733!important; }
.text-muted-foreground{ color:#5b6b7c!important; }
.glass label,.glass-strong label{ color:#334155; }
.glass b,.glass strong,.glass-strong b,.glass-strong strong,
.glass .font-semibold,.glass .font-bold,.glass-strong .font-semibold,.glass-strong .font-bold{ color:#0f172a; }

/* Excepciones: dentro de bandas oscuras y el pie, las letras siguen claras. */
.tz-hero h1,.tz-hero h2,.tz-hero h3,.tz-hero .font-display,
.mp-hero h1,.mp-hero h2,.mp-hero h3,.mp-hero .font-display,
.mp-banda-grad h1,.mp-banda-grad h2,.mp-banda-grad h3,.mp-banda-grad .font-display,
.mp-prop-a h1,.mp-prop-a h2,.mp-prop-a h3,.mp-prop-a .font-display,
.mp-prop-b h1,.mp-prop-b h2,.mp-prop-b h3,.mp-prop-b .font-display,
.mp-banda-marcas h1,.mp-banda-marcas h2,.mp-banda-marcas .font-display,
.mp-cat-band h1,.mp-cat-band h2,.mp-cat-band .font-display,
.mp-footer h1,.mp-footer h2,.mp-footer h3,.mp-footer h4,.mp-footer .font-display{ color:#fff; }
.mp-footer .text-muted-foreground{ color:#92b0d4!important; }
.mp-banda-grad .text-muted-foreground,.mp-banda-marcas .text-muted-foreground,
.mp-cat-band .text-muted-foreground,.tz-hero .text-muted-foreground,
.mp-prop-a .text-muted-foreground,.mp-prop-b .text-muted-foreground{ color:rgba(255,255,255,.85)!important; }
.ns-banda-azul>h2.font-display{ color:#fff!important; }
.ns-banda-azul>p.text-muted-foreground{ color:rgba(255,255,255,.9)!important; }

/* ---- Degradados primario+acento (quedaban verdosos): celeste limpio ---- */
.bg-gradient-to-br.from-primary.to-accent{
  background:linear-gradient(135deg,#072d5a,#16bae1)!important;
}
/* El circulito del perfil jamás se deforma (solo los avatares con
   degradado: los chips de estado de las listas NO son círculos). */
span.rounded-full.shrink-0[class*="bg-gradient"]{ aspect-ratio:1/1; }

/* El blanco explícito siempre gana (avatares, chips y textos sobre color). */
.text-white{ color:#fff!important; }
.text-primary-foreground{ color:#fff!important; }

/* ---- Tarjetas de servicios de la portada: «Pricing Package» de la
   plantilla. Tarjetas blancas en abanico (rotateY) que se enderezan al
   pasar el mouse, precio grande celeste y botón píldora relleno→contorno. */
.ns-precio-bloque{ position:relative; font:inherit; }
.ns-precio-caja{
  position:relative; height:100%; display:flex; flex-direction:column;
  align-items:center; text-align:center; padding:34px 16px 26px;
  perspective:600px;
}
.ns-precio-caja::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:100%;
  border-radius:8px; background:#ffffff;
  box-shadow:0 0 10px rgba(0,0,0,.10);
  transition:transform .4s ease, box-shadow .4s ease;
}
.ns-precio-caja>*{ position:relative; }
.ns-precio-bloque:nth-child(4n+1) .ns-precio-caja::before{ transform:rotateY(10deg) scale(.98) translateY(-10px); }
.ns-precio-bloque:nth-child(4n+2) .ns-precio-caja::before{ transform:rotateY(5deg); }
.ns-precio-bloque:nth-child(4n+3) .ns-precio-caja::before{ transform:rotateY(-5deg); }
.ns-precio-bloque:nth-child(4n)   .ns-precio-caja::before{ transform:rotateY(-10deg) scale(.98) translateY(-10px); }
.ns-precio-bloque:hover .ns-precio-caja::before{
  transform:none; box-shadow:0 12px 28px rgba(7,45,90,.16);
}
.ns-precio-ico{ font-size:46px; line-height:1; margin-bottom:16px; }
.ns-precio-nombre{
  font-size:15px; font-weight:500; line-height:1.4; letter-spacing:.02em;
  text-transform:uppercase; color:#1e1e29; margin:0 0 16px;
}
.ns-precio-valor{
  color:#16bae1; font-family:'Rubik',sans-serif; font-size:34px;
  font-weight:600; line-height:1;
}
.ns-precio-valor sup{ font-size:17px; font-weight:600; margin-right:1px; }
.ns-precio-valor sub{ font-size:13px; font-weight:400; margin-left:5px; bottom:0; }
.ns-precio-texto{ color:#7e7e7e; font-size:13px; line-height:1.5; margin:16px 0 0; flex:1; }
.ns-precio-nota{ color:#7e7e7e; font-size:11px; margin:8px 0 0; opacity:.85; }
.ns-precio-btn{
  display:inline-block; margin-top:18px; padding:9px 32px; border-radius:50px;
  border:2px solid #16bae1; background:#16bae1; color:#fff!important;
  font-family:'Rubik',sans-serif; font-size:14.5px; font-weight:500;
  transition:all .3s ease;
}
.ns-precio-bloque:hover .ns-precio-btn{ background:transparent; color:#16bae1!important; }


/* Títulos de las bandas de página (ficha, entrar, carrito…): blancos. */
.mp-bc-title,.mp-bc-title.font-display{ color:#fff!important; }
.mp-bc-sub{ color:rgba(255,255,255,.85)!important; }

/* ---- Formularios de agendar en celular: una sola columna, casillas
   parejas y letra de 16px (así iPhone no hace zoom al escribir). ---- */
@media (max-width:640px){
  .ns-modal-agendar{ padding:18px 14px 16px!important; border-radius:14px!important; }
  .ns-modal-agendar div[style*="grid-template-columns"]{ grid-template-columns:1fr!important; gap:0 12px!important; }
  .ns-modal-agendar input,.ns-modal-agendar select,.ns-modal-agendar textarea{
    font-size:16px!important; width:100%!important; box-sizing:border-box; min-height:44px;
  }
  .ns-modal-agendar label{ margin-top:10px!important; }
  .ns-modal-agendar select{ padding-right:30px!important; }
}

/* Celular: formulario «Nueva oferta» del técnico. Los botones finales
   (Publicar / Guardar como borrador / Atrás / Cancelar) van en filas
   parejas de ancho completo, no desparejos. */
@media (max-width:640px){
  .glass-strong.rounded-3xl .flex.flex-wrap.items-center.gap-3.pt-1{ display:grid!important; grid-template-columns:1fr 1fr; gap:10px!important; }
  .glass-strong.rounded-3xl .flex.flex-wrap.items-center.gap-3.pt-1 > button{ width:100%; justify-content:center; margin-left:0!important; padding-left:10px!important; padding-right:10px!important; }
  .glass-strong.rounded-3xl .flex.flex-wrap.items-center.gap-3.pt-1 > button:first-child{ grid-column:1 / -1; }
  .glass-strong.rounded-3xl .flex.flex-wrap.items-center.gap-3.pt-1 > button:nth-child(2):last-child{ grid-column:1 / -1; }
  .glass-strong.rounded-3xl .flex.flex-wrap.items-center.gap-3.pt-1 > button.bg-amber-500\/90{ grid-column:1 / -1; }
  .glass-strong.rounded-3xl input,.glass-strong.rounded-3xl select,.glass-strong.rounded-3xl textarea{ font-size:16px!important; }
}