/* ══════════════════════════════════════════════════════
   ROSET//WATCH — panel interno
   ══════════════════════════════════════════════════════
   Sistema de diseño de ROSET. Sin librerías: el gráfico es SVG que dibuja
   el propio panel, así que esto se puede abrir dentro de cinco años sin
   que se haya roto ninguna dependencia.
   ══════════════════════════════════════════════════════ */

:root{
  --tinta:#06070C;
  --card:#101320;
  --hueso:#F2F1EC;
  --gris-2:#8A8E9C;
  --gris:#6B6F80;
  --linea:rgba(255,255,255,.07);
  --linea-2:rgba(255,255,255,.12);
  --azul:#2440E0;
  --azul-luz:#4C6BFF;
  --menta:#3FB894;
  --ambar:#E8940F;
  --coral:#FF5C38;

  --margen:6vw;
  --transicion:.45s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--tinta);
  color:var(--hueso);
  font-family:'Space Grotesk',Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
:focus-visible{outline:1px solid var(--azul-luz);outline-offset:2px;}

/* ── Estructura ─────────────────────────────────────── */

.envoltorio{padding:0 var(--margen) 14vh;max-width:1560px;margin:0 auto;}

.cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 0;border-bottom:1px solid var(--linea);margin-bottom:7vh;
}
.marca{font-size:15px;font-weight:500;letter-spacing:-.01em;}
.marca em{color:var(--gris);font-weight:400;font-style:normal;}

.etiqueta{
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gris);
}

h1{font-size:clamp(30px,4.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.1;}
h2{font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;}

.seccion{margin-top:9vh;}
.seccion-titulo{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gris);
}
.seccion-titulo i{width:5px;height:5px;border-radius:50%;background:var(--azul-luz);flex:none;}

/* ── Lista de sitios ────────────────────────────────── */

.fila{
  display:grid;grid-template-columns:1fr 130px 120px 150px;gap:20px;align-items:center;
  width:100%;padding:20px 0;background:none;border:0;border-bottom:1px solid var(--linea);
  text-align:left;color:inherit;font:inherit;cursor:pointer;
  /* Se desplaza en horizontal, nunca en vertical: el movimiento vertical en
     hover está descartado en el sistema de diseño. */
  transition:padding var(--transicion),background var(--transicion);
}
.fila:hover{padding-left:16px;background:rgba(255,255,255,.022);}
.fila:hover .dominio{color:var(--azul-luz);}

.fila-cabecera{
  display:grid;grid-template-columns:1fr 130px 120px 150px;gap:20px;
  padding-bottom:12px;border-bottom:1px solid var(--linea-2);
}
.fila-cabecera span{font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gris);}

.dominio{font-size:17px;font-weight:500;letter-spacing:-.015em;transition:color var(--transicion);}
.cliente{font-size:13px;color:var(--gris-2);margin-top:2px;}

.puntuacion{font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.puntuacion.vacia{color:var(--gris);font-size:17px;}

.variacion{font-size:14px;font-variant-numeric:tabular-nums;color:var(--gris-2);}
.variacion.sube{color:var(--menta);}
.variacion.baja{color:var(--coral);}

.meta{font-size:12px;color:var(--gris-2);}

.insignia{
  display:inline-block;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  border:1px solid var(--linea-2);border-radius:100px;padding:5px 11px;color:var(--gris-2);
}
.insignia.critico{color:var(--coral);border-color:rgba(255,92,56,.4);}
.insignia.alto{color:var(--ambar);border-color:rgba(232,148,15,.4);}

/* ── Detalle ────────────────────────────────────────── */

.volver{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  color:var(--gris-2);font:inherit;font-size:9.5px;letter-spacing:3px;
  text-transform:uppercase;cursor:pointer;padding:0 0 4px;margin-bottom:26px;
  transition:color var(--transicion);
}
.volver:hover{color:var(--hueso);}
.volver svg{width:14px;height:14px;}

.resumen{display:flex;flex-wrap:wrap;gap:44px;margin:26px 0 0;}
.resumen div p:first-child{font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gris);margin-bottom:6px;}
.resumen div p:last-child{font-size:30px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums;}

.grafico{width:100%;height:auto;display:block;margin-top:8px;}
.leyenda{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px;}
.leyenda span{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gris-2);}
.leyenda i{width:14px;height:2px;border-radius:2px;flex:none;}

.problema{
  display:grid;grid-template-columns:110px 1fr;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--linea);
}
.problema .pilar{font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gris);padding-top:3px;}
.problema .titulo{font-size:15px;font-weight:500;letter-spacing:-.01em;}
.problema .desc{font-size:13px;color:var(--gris-2);margin-top:5px;max-width:70ch;}
.problema.high .titulo{color:var(--coral);}
.problema.medium .titulo{color:var(--ambar);}

/* ── Formulario ─────────────────────────────────────── */

.formulario{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;align-items:end;max-width:1000px;}
.campo label{display:block;font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gris);margin-bottom:8px;}
.campo input{
  width:100%;background:none;border:0;border-bottom:1px solid var(--linea-2);
  color:var(--hueso);font-family:inherit;font-size:15px;padding:12px 0;
  /* 44px es el mínimo de zona táctil del sistema de diseño. Sin esto el campo
     se queda en 40 y en móvil cuesta acertar. */
  min-height:44px;
  transition:border-color var(--transicion);
}
.campo input:focus{outline:none;border-bottom-color:var(--azul-luz);}
.campo input::placeholder{color:var(--gris);}

.cta{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:14px 24px;border-radius:100px;border:1px solid var(--linea-2);
  background:none;color:var(--hueso);overflow:hidden;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:3px;text-transform:uppercase;
}
.cta .fill{
  position:absolute;inset:0;background:var(--azul);pointer-events:none;
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--transicion);
}
.cta:hover .fill{transform:scaleY(1);}
.cta > :not(.fill){position:relative;z-index:1;}
.cta[disabled]{opacity:.45;cursor:default;}
.cta[disabled] .fill{transform:scaleY(0);}

.mensaje{margin-top:18px;font-size:13px;}
.mensaje.error{color:var(--coral);}
.mensaje.bien{color:var(--menta);}

.vacio{color:var(--gris-2);font-size:14px;padding:26px 0;}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width:900px){
  :root{--margen:16px;}
  .fila,.fila-cabecera{grid-template-columns:1fr auto;gap:12px;}
  .fila-cabecera{display:none;}
  .fila .meta{display:none;}
  .resumen{gap:26px;}
  .problema{grid-template-columns:1fr;gap:6px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}