/* ————————————————————————————————————————————————
   CONCORDE EXPERIENCIAS — panel de gestión
   Reutiliza las variables y los botones de estilos.css.
    1. Estructura
    2. Métricas
    3. Calculadora
    4. Tabla de actividades
    5. Consultas
    6. Responsive
   ———————————————————————————————————————————————— */

/* 1. Estructura */
.panel{padding:118px 0 80px;background:var(--arena)}
.p-intro{max-width:64ch;margin-bottom:52px}
.p-intro h1{font-size:clamp(1.9rem,3.6vw,2.85rem);margin-bottom:16px}
.p-aviso{
  margin-top:26px;padding:14px 18px;border-left:3px solid var(--sol);
  background:rgba(249,174,50,0.1);border-radius:0 var(--r) var(--r) 0;
  font-size:0.86rem;line-height:1.6;color:var(--tinta-2);
}
.p-aviso b{font-weight:600}
.p-bloque{
  background:var(--blanco);border:1px solid var(--linea-2);border-radius:var(--r);
  padding:clamp(24px,3.4vw,38px);margin-bottom:24px;
}
.p-h2{font-size:clamp(1.2rem,2.1vw,1.55rem);font-weight:500;letter-spacing:-0.018em;margin-bottom:6px}
.p-sub{font-size:0.89rem;color:var(--gris);line-height:1.62;margin-bottom:26px;max-width:62ch}

/* 2. Métricas */
.p-metricas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:22px}
.p-metrica{background:var(--blanco);padding:22px 20px}
.p-metrica b{display:block;font-size:clamp(1.5rem,2.5vw,2rem);font-weight:200;letter-spacing:-0.03em;color:var(--mar);line-height:1.1}
.p-metrica small{display:block;margin-top:7px;font-size:0.74rem;color:var(--gris);line-height:1.45}

/* 3. Calculadora */
.p-calc{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(26px,3.4vw,44px);align-items:start}
.p-controles{display:grid;gap:22px}
.p-control label{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:0.83rem;color:var(--tinta-2);margin-bottom:9px;
}
.p-control label b{font-weight:600;color:var(--mar);font-size:0.97rem;white-space:nowrap}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  background:var(--linea);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;
  background:var(--sol);cursor:pointer;border:3px solid var(--blanco);
  box-shadow:0 2px 8px rgba(14,48,58,0.26);transition:transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
input[type=range]::-moz-range-thumb{
  width:19px;height:19px;border-radius:50%;background:var(--sol);cursor:pointer;
  border:3px solid var(--blanco);box-shadow:0 2px 8px rgba(14,48,58,0.26);
}
.p-resultado{background:var(--tinta);border-radius:var(--r);padding:26px 26px 22px;color:var(--arena)}
.p-res-fila{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid rgba(250,246,239,0.13);
}
.p-res-fila small{font-size:0.79rem;color:rgba(250,246,239,0.62);line-height:1.45}
.p-res-fila b{font-size:1.12rem;font-weight:500;color:var(--blanco);white-space:nowrap}
.p-res-fila.destaca{border-bottom:none;padding-top:18px}
.p-res-fila.destaca small{color:rgba(250,246,239,0.8)}
.p-res-fila.destaca b{font-size:1.85rem;font-weight:300;color:var(--sol);letter-spacing:-0.025em}
.p-res-nota{
  margin-top:14px;padding-top:15px;border-top:1px solid rgba(250,246,239,0.13);
  font-size:0.78rem;color:rgba(250,246,239,0.6);line-height:1.58;
}

/* 4. Tabla de actividades */
.p-tabla{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.p-fila{
  display:grid;grid-template-columns:2.4fr 1fr 0.7fr 0.6fr 1.1fr;gap:16px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--linea-2);font-size:0.87rem;
}
.p-fila:last-child{border-bottom:none}
.p-cabecera{
  background:var(--arena-2);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:600;color:var(--gris);
}
.p-fila .p-nom{font-weight:500;color:var(--tinta);line-height:1.35}
.p-fila .p-tipo{color:var(--gris);font-size:0.82rem}
.p-fila[data-on="0"]{background:var(--arena)}
.p-fila[data-on="0"] .p-nom,.p-fila[data-on="0"] .p-tipo,.p-fila[data-on="0"] .num{opacity:.45}
.p-sw{display:inline-flex;align-items:center;gap:9px;font-size:0.8rem;color:var(--tinta-2);text-align:left}
.p-sw i{
  width:36px;height:20px;border-radius:100px;background:var(--gris-2);position:relative;
  flex:none;transition:background .25s;
}
.p-sw i::after{
  content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.24);
}
.p-sw[aria-pressed="true"] i{background:var(--pino)}
.p-sw[aria-pressed="true"] i::after{transform:translateX(16px)}
.p-sw em{font-style:normal;white-space:nowrap}
.p-pie-tabla{margin-top:15px;font-size:0.81rem;color:var(--gris)}

/* 5. Consultas */
.p-consultas{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.p-consulta{border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px;background:var(--blanco)}
.p-c-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}
.p-c-top b{font-size:0.94rem;font-weight:600}
.p-consulta p{font-size:0.85rem;color:var(--tinta-2);line-height:1.5}
.p-consulta small{display:block;margin-top:7px;font-size:0.78rem;color:var(--gris);line-height:1.5}
.p-chip{
  font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:100px;white-space:nowrap;flex:none;
}
.p-chip.verde{background:rgba(76,107,81,0.13);color:#3C5741}
.p-chip.ambar{background:rgba(249,174,50,0.2);color:#8A5D06}
.p-chip.azul{background:rgba(20,128,156,0.13);color:var(--mar)}

.p-firma{text-align:center;margin-top:44px;font-size:0.82rem;color:var(--gris-2)}
.p-firma b{color:var(--gris);font-weight:600}

/* 6. Responsive */
@media (max-width:900px){
  .p-calc{grid-template-columns:1fr}
  .p-metricas{grid-template-columns:repeat(2,1fr)}
  .p-consultas{grid-template-columns:1fr}
}
@media (max-width:520px){
  /* Aquí no hay menú hamburguesa, así que marca + idioma + botón
     tienen que caber en una línea sin salirse. */
  .nav{gap:10px}
  .nav-side{gap:7px}
  .nav .btn{padding:9px 11px;font-size:0.72rem}
  .lang button{padding:6px 7px;font-size:0.58rem}
  .brand{gap:3px}
  .brand .logo{height:21px}
  /* Aquí sí cabe: sin el «Panel de gestión» la cabecera parecería la web normal. */
  header .brand small{display:block;font-size:0.5rem}
}
@media (max-width:680px){
  .panel{padding-top:100px}
  .p-cabecera{display:none}
  .p-fila{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 16px}
  .p-fila .p-nom{grid-column:1/-1}
  .p-fila .p-tipo{grid-column:1}
  .p-fila .num{grid-column:2;text-align:right;font-size:0.84rem}
  .p-fila .p-sw{grid-column:1/-1;margin-top:8px}
}