/* public_html/tools/quote/assets/quote.css */
/* Importante: NO redefino font-family para heredar la del portal (partials/head.php -> portal.css). */

:root{
  --navy:#1D2E57;
  --yellow:#FFD200;

  --bg: var(--navy);
  --text:#ffffff;
  --muted: rgba(255,255,255,.78);

  --card:#ffffff;
  --cardText:#0B1020;

  --radius: 18px;
  --shadow: 0 14px 40px rgba(0,0,0,.22);
  --shadowSoft: 0 8px 22px rgba(0,0,0,.16);
}

*{box-sizing:border-box}

/* Page background */
body.tool-quote{
  background: var(--bg);
  color: var(--text);
}

/* Shell */
.q-shell{max-width:980px;margin:0 auto;padding:26px 0 44px}
.q-head{margin:10px 0 12px}
.q-head--center{text-align:center}

.q-kicker{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight:900;
}

.q-title{
  margin:12px 0 6px;
  font-size:36px;
  color:#fff;
  letter-spacing:-.2px;
}

/* ✅ FIX UX: .q-sub oscuro por defecto (cards/result) y claro SOLO en header navy */
.q-sub{
  margin:0 auto;
  color: rgba(11,16,32,.62);
  line-height:1.45;
  max-width:72ch;
}
.q-head .q-sub{ color: var(--muted); }

/* Cards / drawers */
.q-card{
  margin-top:18px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
  color: var(--cardText);
}

.q-drawer{position:relative; overflow:hidden}

.q-drawer__top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.q-drawer__badge{
  font-size:12px;
  color: rgba(11,16,32,.62);
  white-space:nowrap;
}

.q-drawer__bar{
  flex:1;height:10px;border-radius:999px;
  background: rgba(29,46,87,.12);
  overflow:hidden;
}

.q-drawer__fill{
  display:block;height:100%;
  background: var(--yellow);
  border-radius:999px;
}

/* Headings */
.q-h2{margin:0 0 14px;font-size:18px;font-weight:900}
.q-h2--center{text-align:center}

/* Step 1 layout (stack) */
.q-stack{display:flex;flex-direction:column;gap:14px}
.q-sep{
  height:1px;
  background: rgba(29,46,87,.12);
  margin:4px 0;
}

/* Form */
.q-form{margin:0}

.q-grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 860px){ .q-grid2{grid-template-columns:1fr} }

.q-field{display:flex;flex-direction:column;gap:8px}

.q-label{
  font-weight:800;
  font-size:13px;
  color:rgba(11,16,32,.82);
}
.q-label--center{text-align:center}

.q-input{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  outline:none;
  font-size:14px;
}

.q-input:focus{
  border-color: rgba(29,46,87,.35);
  box-shadow: 0 0 0 4px rgba(29,46,87,.10);
}

.q-err{
  min-height:16px;
  color:#b42318;
  font-size:12px;
  font-weight:800;
}
.q-err--center{text-align:center}

/* Buttons */
.q-actions{display:flex;justify-content:center;margin-top:16px}
.q-actions--single{justify-content:center}
.q-actions--between{justify-content:space-between;gap:10px;flex-wrap:wrap}

.q-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:0;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  width:100%;
  max-width: 360px;
}

/* Primary = negro */
.q-btn--primary{
  background:#0B1020;
  color:#fff;
  box-shadow: var(--shadowSoft);
}
.q-btn--primary:hover{filter: brightness(1.06)}
.q-btn--primary:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(255,210,0,.28), var(--shadowSoft);
}

.q-btn--ghost{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:none;
}

/* Help link */
.q-help{margin-top:10px}
.q-help--center{text-align:center}

.q-help__link{
  color: rgba(29,46,87,.85);
  font-weight:900;
  text-decoration:none;
}
.q-help__link:hover{text-decoration:underline}

/* =========================================================
   Services (TIPO DE SERVICIO) — 4 columnas + altura uniforme
   ========================================================= */

/* ✅ 4 columnas desktop, 2 tablet, 1 móvil */
.q-services{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;

  align-items: stretch; /* iguala altura de celdas */
}

/* Tablets */
@media (max-width: 1100px){
  .q-services{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Móvil */
@media (max-width: 640px){
  .q-services{ grid-template-columns: 1fr; }
}

.q-svc{
  display:flex;
  flex-direction:column;
  gap:8px;

  padding:10px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;

  height: 100%;
  min-height: 76px; /* ayuda a que se vean “al mismo nivel” */

  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.q-svc:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

/* Estado seleccionado (moderno) */
.q-svc:has(input:checked){
  border-color: rgba(255,210,0,.75);
  box-shadow: 0 0 0 4px rgba(255,210,0,.22), 0 10px 20px rgba(0,0,0,.10);
}

/* Focus visible dentro del tile */
.q-svc:has(input:focus-visible){
  box-shadow: 0 0 0 4px rgba(255,210,0,.22), 0 10px 20px rgba(0,0,0,.10);
  border-color: rgba(255,210,0,.75);
}

/* El radio queda discreto */
.q-svc input{accent-color: var(--yellow)}

/* ✅ Texto máximo 5 líneas (con ellipsis) */
.q-svc__t{
  font-weight:900;
  line-height: 1.2;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.q-svc__d{
  font-size:13px;
  color:rgba(11,16,32,.62);
  line-height:1.25;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Captcha / legal */
.q-captcha{font-size:13px;color:rgba(11,16,32,.62)}
.q-legal{margin:10px 0 0;color:rgba(11,16,32,.58);font-size:12px;line-height:1.4}

/* Honeypot */
.q-hp{position:absolute;left:-9999px;top:-9999px;opacity:0}

/* Result box */
.q-result__ok, .q-result__err{
  border-radius:16px;
  padding:14px;
  background: rgba(29,46,87,.06);
}

/* =========================================================
   Choice cards (company size + risk)
   ========================================================= */

.q-cards{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
  margin-top:4px;
}

@media (max-width: 860px){
  .q-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Risk cards más compact */
.q-cards--risk .q-cardopt{padding:10px 10px}

.q-cardopt{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:16px;
  padding:12px 10px;
  cursor:pointer;
  text-align:center;
  font-weight:900;
  color: rgba(11,16,32,.86);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
  position: relative;
}

.q-cardopt:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
}

.q-cardopt:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(29,46,87,.12), 0 12px 22px rgba(0,0,0,.10);
  border-color: rgba(29,46,87,.35);
}

.q-cardopt.is-selected{
  border-color: rgba(29,46,87,.55);
  box-shadow: 0 0 0 4px rgba(255,210,0,.28), 0 14px 26px rgba(0,0,0,.14);
  transform: translateY(-1px);
}

.q-cardopt.is-selected::after{
  content:"✓";
  position:absolute;
  top:8px;
  right:10px;
  width:20px;height:20px;
  border-radius:999px;
  background: var(--yellow);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

.q-cardopt__main{display:block;font-size:14px}
.q-cardopt__sub{display:block;font-size:12px;color:rgba(11,16,32,.62);font-weight:800}

/* =========================================================
   FIX Safari: servicios arriba full-width + formulario debajo
   (sin :has)
   ========================================================= */

#drawerStep2 .q-field--services{
  grid-column: 1 / -1; /* ocupa 2 columnas del grid */
}

/* Servicios en 4 columnas desktop, 2 tablet, 1 móvil */
#drawerStep2 .q-services{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items: stretch;
}

@media (max-width: 1100px){
  #drawerStep2 .q-services{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #drawerStep2 .q-services{ grid-template-columns: 1fr; }
}

/* Tarjetas compactas (para que “cierren” antes del formulario) */
#drawerStep2 .q-svc{
  min-height: 72px;
  padding:10px;
}

/* Texto compacto */
#drawerStep2 .q-svc__t{
  line-height:1.18;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

#drawerStep2 .q-svc__d{
  font-size:12px;
  line-height:1.22;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  margin-top:2px;
}

#drawerStep2 .q-svc__d{
  font-size:12px;
  line-height:1.22;
  display:-webkit-box;
  -webkit-line-clamp: 2;         /* 2 líneas */
  -webkit-box-orient: vertical;
  overflow:hidden;
  margin-top:2px;
}