/* ==========================================================================
   Estudio Acordeones Cristo
   Sistema de diseño de la marca (papel crema, tinta, naranja, escala zinc)
   sobre una estructura de taller: raíl lateral con pliegue de fuelle y
   superficies de trabajo blancas.
   ========================================================================== */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-var.woff2") format("woff2");
}

:root{
  /* Marca */
  --naranja:#DF9A10; --naranja-600:#B87D0A; --naranja-100:#FBEFD6; --naranja-50:#FEF9EE;
  --tinta:#1A1816; --blanco:#fff; --papel:#F5F2EC; --papel-50:#FAF8F4;

  --z200:#E9E3D8; --z300:#DAD2C4; --z400:#B3AA9C;
  --z500:#8A8175; --z600:#635B51; --z700:#48423B; --z800:#2C2926;

  /* Roles */
  --bg:var(--papel); --superficie:var(--blanco); --superficie-2:var(--papel-50);
  --tx:var(--tinta); --tx-cuerpo:var(--z700); --tx-suave:var(--z500);
  --linea:var(--z200); --linea-2:var(--z300);

  --ok:#2E7D4F; --ok-bg:#EAF5EE; --ok-linea:#C3DCCD;
  --mal:#B3261E; --mal-bg:#FCEDEB; --mal-linea:#F0C8C3;

  /* Profundidad: sombras de papel sobre papel, nunca duras */
  --s1:0 1px 2px rgba(26,24,22,.04);
  --s2:0 1px 2px rgba(26,24,22,.04), 0 8px 24px -10px rgba(26,24,22,.14);
  --s3:0 24px 60px -20px rgba(26,24,22,.35);

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:8px; --r:10px; --r-lg:16px;
  --rail:236px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx-cuerpo);
  font:400 15px/1.6 var(--font);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--naranja-600);text-underline-offset:2px}
h1,h2,h3{color:var(--tx);letter-spacing:-.02em}
hr{border:0;border-top:1px solid var(--linea);margin:20px 0}
.oculto{display:none!important}
::selection{background:var(--naranja-100);color:var(--tinta)}

:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   ACCESO
   ========================================================================== */

/* La pantalla entera centra la tarjeta: dvh para que el navegador de móvil no
   descuadre el centrado cuando aparece o desaparece su barra de direcciones. */
.acceso-pantalla{display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:24px 16px}
.acceso{width:100%;max-width:390px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--r-lg);padding:38px 34px 34px;box-shadow:var(--s2)}
.acceso h1{margin:0 0 2px;font-family:var(--serif);font-size:29px;font-weight:400;letter-spacing:-.01em}

/* Cabecera de la tarjeta: logo y rótulo centrados, con una línea que los separa
   del formulario. El formulario sigue alineado a la izquierda, que es como se
   leen bien una etiqueta y su campo. */
.acceso-marca{text-align:center;margin:0 0 26px;padding:0 0 24px;
  border-bottom:1px solid var(--linea)}
/* Aquí el fondo es claro, así que el logo va en su color original. El PNG lleva
   más transparencia arriba (20px) que abajo (9px), así que el margen inferior
   se recorta un poco para que el hueco se vea igual por los dos lados. */
.acceso-logo{display:block;width:214px;max-width:100%;height:auto;margin:0 auto 10px}
.acceso p{margin:0;font-size:12.5px;color:var(--tx-suave);
  text-transform:uppercase;letter-spacing:.16em}

/* ==========================================================================
   ESTRUCTURA: RAÍL + LIENZO
   ========================================================================== */

.app{display:flex;min-height:100vh}

.rail{position:sticky;top:0;flex:0 0 var(--rail);width:var(--rail);height:100vh;
  display:flex;flex-direction:column;background:var(--tinta);color:#EDE7DC;z-index:30}

/* La firma de la casa: el canto del raíl es un fuelle plegado. */
.rail::after{content:"";position:absolute;top:0;right:0;bottom:0;width:11px;
  background:repeating-linear-gradient(180deg,
    #262120 0px, #1C1917 6px, #121010 7px, #1C1917 8px, #262120 15px);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.4)}

.rail-marca{padding:26px 24px 22px}
.rail-nombre{display:block;font-family:var(--serif);font-size:19px;line-height:1.25;color:#fff}
/* El logo es tinta oscura sobre transparente y el raíl es negro:
   se pasa a blanco puro en vez de invertirlo (invertir estropea la bandera). */
.rail-logo{display:block;width:152px;max-width:100%;height:auto;
  filter:brightness(0) invert(1);opacity:.94}
.rail-sub{display:block;margin-top:9px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#8C8175}

.menu{display:flex;flex-direction:column;gap:2px;padding:6px 14px}
.menu .tab{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  background:none;border:0;border-radius:var(--r);cursor:pointer;text-align:left;
  color:#A79C8D;font:500 14.5px var(--font);letter-spacing:-.01em;
  transition:background .15s ease,color .15s ease}
.menu .tab svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.menu .tab:hover{background:rgba(255,255,255,.06);color:#EDE7DC}
/* Activo: un registro del acordeón, pulsado. */
.menu .tab.activa{background:#312B27;color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3)}
.menu .tab.activa svg{opacity:1;stroke:var(--naranja)}

.rail-pie{margin-top:auto;padding:16px 20px 22px;display:flex;flex-direction:column;gap:4px}
.rail-pie button,.rail-pie a{display:block;width:100%;padding:9px 12px;text-align:left;
  background:none;border:0;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  color:#8C8175;font:500 13.5px var(--font);transition:color .15s ease,background .15s ease}
.rail-pie button:hover,.rail-pie a:hover{color:#fff;background:rgba(255,255,255,.06)}

.lienzo{flex:1;min-width:0;padding:34px 40px 90px;max-width:1240px}
@media(max-width:1100px){.lienzo{padding:28px 24px 70px}}

/* Raíl → barra superior en pantallas pequeñas.
   Va en dos líneas: arriba el logo con Ajustes y Salir a la derecha, y debajo
   las cuatro pestañas. Antes iba todo en una sola línea con scroll lateral y
   Ajustes/Salir quedaban fuera de la pantalla, sin forma de llegar a ellos. */
@media(max-width:860px){
  .app{flex-direction:column}
  .rail{position:sticky;flex-basis:auto;width:100%;height:auto;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:8px;padding:0 14px 6px;overflow:visible}
  .rail::after{top:auto;left:0;right:0;bottom:0;width:auto;height:7px;
    background:repeating-linear-gradient(90deg,
      #2A2522 0px, #1D1A18 6px, #0E0C0B 7px, #1D1A18 8px, #2A2522 15px)}
  .rail-marca{padding:12px 10px 8px 4px}
  .rail-nombre{font-size:16px}
  .rail-logo{width:116px}
  .rail-sub{display:none}

  .rail-pie{order:2;flex-direction:row;margin-top:0;margin-left:auto;padding:0;gap:2px}
  .rail-pie button,.rail-pie a{width:auto;white-space:nowrap}

  /* Las pestañas ocupan la segunda línea entera. Si no caben se deslizan de
     lado; la barra de desplazamiento se oculta porque afea y en táctil sobra. */
  .menu{order:3;flex:1 1 100%;flex-direction:row;padding:0 0 2px;gap:2px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .menu::-webkit-scrollbar{display:none}
  /* width:auto para que cada pestaña ocupe lo que mide su palabra; si no,
     heredan el width:100% del raíl y se reparten la barra a lo ancho. */
  .menu .tab{width:auto;flex:0 0 auto;padding:9px 12px;white-space:nowrap}
  .menu .tab svg{display:none}

  .lienzo{padding:22px 18px 60px}
}

.seccion{display:none;animation:entra .28s ease both}
.seccion.activa{display:block}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   CABECERA DE SECCIÓN
   ========================================================================== */

.cabecera-seccion{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding:0 0 22px;margin:0 0 26px;border-bottom:1px solid var(--linea)}
.cabecera-seccion > div:first-child{flex:1;min-width:280px}
.cabecera-seccion h1{margin:0;font-family:var(--serif);font-size:32px;font-weight:400;
  line-height:1.15;letter-spacing:-.015em}
.cabecera-seccion .sub{margin:8px 0 0;font-size:14.5px;color:var(--tx-suave);max-width:64ch}

.eyebrow{display:block;margin:0 0 10px;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--naranja-600)}

/* ==========================================================================
   REJILLAS
   ========================================================================== */

.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px}
.rejilla-lateral{display:grid;grid-template-columns:minmax(340px,410px) 1fr;gap:24px;align-items:start}
@media(max-width:1100px){.rejilla-2,.rejilla-lateral{grid-template-columns:1fr}}
.linea-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.linea-2{grid-template-columns:1fr}}

/* ==========================================================================
   TARJETAS
   ========================================================================== */

.tarjeta{background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-lg);box-shadow:var(--s1);margin:0 0 20px;overflow:hidden}
.tarjeta > h2{margin:0;padding:17px 22px 15px;font-size:14.5px;font-weight:600;
  color:var(--tx);letter-spacing:-.012em;border-bottom:1px solid var(--linea)}
.tarjeta > h2 .h2-nota{float:right;font-size:11px;font-weight:500;color:var(--tx-suave);
  letter-spacing:.02em;padding-top:2px}
.tarjeta .cuerpo{padding:22px}
.tarjeta.vacia{background:transparent;border-style:dashed;border-color:var(--linea-2);box-shadow:none}
.tarjeta.vacia .cuerpo{text-align:center;padding:80px 30px;color:var(--tx-suave)}
.vacia-titulo{font-family:var(--serif);font-size:21px;color:var(--tx);margin-bottom:8px}

.aviso{background:var(--naranja-50);border:1px solid #EBDCB6;
  border-left:3px solid var(--naranja);border-radius:var(--r);
  padding:14px 18px;margin:0 0 20px;font-size:14px;line-height:1.6;color:#6B5514}
.aviso > b:first-child{display:block;margin-bottom:2px;color:#4A3A0C;font-weight:600}
.aviso b{color:#4A3A0C;font-weight:600}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

label{display:block;font-size:13px;font-weight:500;color:var(--tx);margin:0 0 7px;letter-spacing:-.005em}
label .op{font-weight:400;color:var(--tx-suave)}

input[type=text],input[type=email],input[type=password],input[type=datetime-local],
input[type=date],textarea,select{
  width:100%;padding:11px 13px;font:400 14.5px/1.5 var(--font);color:var(--tx);
  background:#fff;border:1px solid var(--linea-2);border-radius:var(--r);outline:none;
  transition:border-color .15s ease,box-shadow .15s ease}
textarea{resize:vertical;min-height:82px;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--z400)}
input:hover,textarea:hover,select:hover{border-color:var(--z400)}
input:focus,textarea:focus,select:focus{border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(223,154,16,.18)}
select{appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A8175' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}

.mono{font-family:var(--mono);font-size:13px;letter-spacing:0}
.campo{margin:0 0 18px}
.campo:last-child{margin-bottom:0}
.pista{font-size:12.5px;line-height:1.55;color:var(--tx-suave);margin:7px 0 0}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fila > select,.fila > input{flex:1;min-width:0}
.check{display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px;
  color:var(--tx-cuerpo);margin:0 0 10px;cursor:pointer}
.check input{width:auto;accent-color:var(--naranja)}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;font:600 14px var(--font);letter-spacing:-.008em;
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .15s ease,
  border-color .15s ease,color .15s ease,transform .06s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-tinta{background:var(--tinta);color:#fff;box-shadow:var(--s1)}
.btn-tinta:hover{background:#332D28}
.btn-naranja{background:var(--naranja);color:#231A05;box-shadow:var(--s1)}
.btn-naranja:hover{background:var(--naranja-600);color:#fff}
.btn-borde{background:#fff;color:var(--tx);border-color:var(--linea-2)}
.btn-borde:hover{border-color:var(--z500);background:var(--papel-50)}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:var(--r-sm)}
.btn-ancho{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.segmentos,.redes,.rangos{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;
  background:var(--papel);border:1px solid var(--linea);border-radius:11px}
.segmentos button,.redes button,.rangos button{padding:7px 13px;font:500 13px var(--font);
  color:var(--tx-suave);background:none;border:0;border-radius:8px;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.segmentos button:hover,.redes button:hover,.rangos button:hover{color:var(--tx)}
.segmentos button.activo,.rangos button.activo{background:#fff;color:var(--tx);
  font-weight:600;box-shadow:var(--s1)}
.redes button.elegida{background:var(--tinta);color:#fff;font-weight:600}

/* ==========================================================================
   MENSAJES
   ========================================================================== */

.msg{margin:16px 0 0;padding:12px 15px;border-radius:var(--r);font-size:13.8px;
  line-height:1.55;display:none}
.msg.ok{display:block;background:var(--ok-bg);border:1px solid var(--ok-linea);color:var(--ok)}
.msg.mal{display:block;background:var(--mal-bg);border:1px solid var(--mal-linea);color:var(--mal)}
.msg a{color:inherit;font-weight:600}

.cargando{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:giro .7s linear infinite}
.btn-naranja .cargando,.btn-borde .cargando{border-color:rgba(26,24,22,.2);border-top-color:var(--tinta)}
@keyframes giro{to{transform:rotate(360deg)}}

/* ==========================================================================
   ESTADÍSTICAS
   ========================================================================== */

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 20px}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}}

.kpi{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:20px 22px 18px;box-shadow:var(--s1)}
.kpi .etq{font-size:11px;font-weight:600;color:var(--tx-suave);
  text-transform:uppercase;letter-spacing:.14em}
.kpi .val{font-family:var(--serif);font-size:36px;line-height:1.05;color:var(--tx);
  margin:12px 0 10px;letter-spacing:-.02em}
.kpi-pie{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.var-nota{font-size:12.5px;color:var(--tx-suave)}
.kpi .var{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:12.5px;font-weight:600;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.kpi .var.sube{background:var(--ok-bg);color:var(--ok)}
.kpi .var.baja{background:var(--mal-bg);color:var(--mal)}
.kpi .var.igual{background:var(--papel);color:var(--tx-suave)}
.kpi .var span{font-weight:400;color:var(--tx-suave)}
.kpi.acento{background:linear-gradient(180deg,#FEF9EE,#FBEFD6);border-color:#EBDCB6}
.kpi.acento .val{color:#4A3A0C}

.grafico{width:100%;height:270px}
.grafico svg{display:block;width:100%;height:100%;overflow:visible}
.g-linea{fill:none;stroke:var(--naranja);stroke-width:2.25;
  stroke-linejoin:round;stroke-linecap:round}
.g-area{fill:url(#gradArea)}
.g-rejilla{stroke:var(--linea);stroke-width:1;stroke-dasharray:2 4}
.g-txt{font:500 11px var(--font);fill:var(--tx-suave);letter-spacing:.02em}
.g-punto{fill:var(--naranja);stroke:#fff;stroke-width:2.5}

.tabla{display:flex;flex-direction:column}

/* Cabecera de columnas: dice qué son las cifras sin recargar la tarjeta */
.tabla .fila-cab{display:flex;align-items:center;gap:14px;padding:0 12px 9px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--z400);border-bottom:1px solid var(--linea)}
.tabla .fila-cab .cifra,.tabla .fila-cab .pct{font-weight:700;font-size:10.5px;color:var(--z400)}

.tabla .fila-t{position:relative;display:flex;align-items:center;gap:14px;
  padding:11px 12px;border-radius:var(--r-sm);font-size:14px;overflow:hidden;
  border-bottom:1px solid var(--linea);transition:background-color .15s ease}
.tabla .fila-t:last-child{border-bottom:0}
.tabla .fila-t:hover{background:var(--papel-50)}

/* Puesto en el ranking. Los tres primeros, en naranja */
.tabla .rank{width:20px;flex:0 0 20px;text-align:center;font-size:11.5px;font-weight:700;
  color:var(--z400);font-variant-numeric:tabular-nums}
.tabla .fila-t:nth-child(-n+4) .rank{color:var(--naranja-600)}
.tabla .fila-cab .rank{color:transparent}

.tabla .nombre a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .15s ease}
.tabla .nombre a:hover{border-bottom-color:var(--naranja)}
.tabla .fila-t .barra-bg{position:absolute;left:0;top:0;bottom:0;
  background:var(--naranja-50);border-radius:0 var(--r-sm) var(--r-sm) 0;z-index:0}
.tabla .fila-t > *{position:relative;z-index:1}
.tabla .nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--tx);font-weight:500}
.tabla .nombre small{display:block;color:var(--tx-suave);font-size:12px;font-weight:400;
  overflow:hidden;text-overflow:ellipsis}
.tabla .cifra{font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.tabla .pct{width:50px;text-align:right;color:var(--tx-suave);font-size:13px;
  font-variant-numeric:tabular-nums}
.tabla .vacio{padding:34px;text-align:center;color:var(--tx-suave);font-size:14px}

/* ==========================================================================
   IDEAS SUGERIDAS
   ========================================================================== */

.ideas{display:grid;gap:8px;margin:0 0 18px}
.idea{text-align:left;padding:13px 15px;background:var(--papel-50);
  border:1px solid var(--linea);border-radius:var(--r);cursor:pointer;font:inherit;
  transition:border-color .15s ease,background .15s ease,transform .06s ease}
.idea:hover{border-color:var(--naranja);background:#fff;transform:translateX(2px)}
.idea b{display:block;color:var(--tx);font-size:14px;font-weight:600;margin-bottom:3px}
.idea span{font-size:12.5px;color:var(--tx-suave);line-height:1.5}

/* ==========================================================================
   BLOG
   ========================================================================== */

.serp{padding:18px 24px;border-bottom:1px solid var(--linea);background:#fff}
.serp-url{font-size:12.5px;color:#5f6368}
.serp-titulo{font-size:20px;color:#1a0dab;margin:4px 0 3px;line-height:1.3;letter-spacing:-.01em}
.serp-desc{font-size:13.5px;color:#4d5156;line-height:1.55}

.articulo{padding:30px 34px;max-height:660px;overflow:auto}
.articulo > *:first-child{margin-top:0}
.articulo h2{font-family:var(--serif);font-size:24px;font-weight:400;margin:30px 0 12px;
  letter-spacing:-.015em}
.articulo h3{font-size:16.5px;font-weight:600;margin:24px 0 8px}
.articulo p,.articulo li{font-size:16px;line-height:1.72;color:var(--tx-cuerpo)}
.articulo p{margin:0 0 16px}
.articulo ul,.articulo ol{padding-left:22px;margin:0 0 16px}
.articulo li{margin-bottom:7px}
.articulo strong{font-weight:600;color:var(--tx)}
.articulo table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.articulo th,.articulo td{border:1px solid var(--linea);padding:9px 12px;text-align:left}
.articulo th{background:var(--papel-50);font-weight:600}
.articulo blockquote{margin:20px 0;padding:4px 0 4px 18px;border-left:3px solid var(--naranja);
  color:var(--tx-suave);font-style:italic}

.lista-posts{display:flex;flex-direction:column;gap:8px}
.post-item{display:flex;gap:12px;align-items:center;padding:11px 14px;
  background:var(--papel-50);border:1px solid var(--linea);border-radius:var(--r);font-size:14px}
.post-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--tx);font-weight:500}
.post-item .f{font-size:12.5px;color:var(--tx-suave);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.previo-img{aspect-ratio:3/2;border:1px dashed var(--linea-2);border-radius:var(--r);
  background:var(--papel-50);display:flex;align-items:center;justify-content:center;
  color:var(--tx-suave);font-size:14px;overflow:hidden}
.previo-img.cuadrada{aspect-ratio:1/1}
.previo-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   REDES
   ========================================================================== */

.publicaciones{display:grid;gap:18px;margin:0 0 20px}
.pub{background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-lg);box-shadow:var(--s1);overflow:hidden}
.pub-cab{display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--linea)}
.pub-cab .red{font-weight:600;font-size:14.5px;color:var(--tx)}
.pub-cab .cuenta{margin-left:auto;font-size:12.5px;color:var(--tx-suave);
  font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:99px;background:var(--papel)}
.pub-cab .cuenta.pasado{background:var(--mal-bg);color:var(--mal);font-weight:600}
.pub .cuerpo{padding:18px 20px}
.pub textarea{min-height:158px;font-size:14.5px}
.pub .acciones{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* Productos añadidos a un artículo */
.elegidos{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.elegidos:empty{margin-top:0}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 11px;
  background:var(--naranja-50);border:1px solid #EBDCB6;border-radius:99px;
  font-size:12.5px;font-weight:500;color:#5C4A16;max-width:100%}
.chip em{font-style:normal;color:var(--naranja-600);font-weight:600}
.chip button{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(184,125,10,.16);color:#8A6408;
  font-size:13px;line-height:1;cursor:pointer;padding:0}
.chip button:hover{background:var(--mal);color:#fff}

/* Ficha del producto elegido */
.ficha{display:flex;gap:14px;align-items:flex-start;margin-top:12px;padding:12px;
  background:var(--papel-50);border:1px solid var(--linea);border-radius:var(--r)}
.ficha img{width:66px;height:66px;flex:0 0 66px;object-fit:cover;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-sm)}
.ficha-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.ficha-txt b{font-size:14px;font-weight:600;color:var(--tx)}
.ficha-txt span{font-size:12.5px;color:var(--tx-suave);line-height:1.5}
.ficha-res{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.resultados{display:grid;gap:8px;margin-top:14px}
.resultado{padding:10px 14px;border-radius:var(--r);font-size:13.5px}
.resultado.ok{background:var(--ok-bg);border:1px solid var(--ok-linea);color:var(--ok)}
.resultado.mal{background:var(--mal-bg);border:1px solid var(--mal-linea);color:var(--mal)}

/* ==========================================================================
   VISTA PREVIA DE REDES
   Maqueta de cómo queda la publicación en cada plataforma.
   ========================================================================== */

.pv-caja{margin-top:16px;padding-top:16px;border-top:1px dashed var(--linea-2)}

.pv{max-width:396px;background:#fff;border:1px solid #DBDBDB;border-radius:10px;
  overflow:hidden;font-size:13.5px;line-height:1.45;color:#0F1419;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

.pv-cab{display:flex;align-items:center;gap:10px;padding:11px 13px}
.pv-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;
  background:var(--papel);border:1px solid var(--linea);display:grid;place-items:center}
.pv-avatar img{width:26px;height:auto;object-fit:contain}
.pv-quien{min-width:0;line-height:1.3}
.pv-quien b{display:block;font-size:13.5px;font-weight:600;color:#0F1419}
.pv-quien small{font-size:12px;color:#65676B}
.pv-x .pv-quien b{display:inline}
.pv-x .pv-quien small{display:inline}

.pv-txt{padding:0 13px 13px;white-space:normal;word-break:break-word}
.pv-tag{color:#00376B}
.pv-x .pv-tag,.pv-linkedin .pv-tag{color:#1D9BF0}
.pv-mas{color:#8E8E8E}

.pv-img{background:#EFEFEF;line-height:0}
.pv-img img{width:100%;height:auto;display:block}
.pv-img-no{aspect-ratio:1/1;display:grid;place-items:center;line-height:1.4;
  color:#9A9A9A;font-size:12.5px;background:repeating-linear-gradient(45deg,
    #F3F3F3 0 10px,#EDEDED 10px 20px)}
.pv-x .pv-img,.pv-facebook .pv-img,.pv-linkedin .pv-img{margin:0 13px 13px;
  border-radius:10px;overflow:hidden;border:1px solid #E4E4E4}
.pv-x .pv-img-no,.pv-linkedin .pv-img-no{aspect-ratio:16/9}

.pv-iconos{padding:9px 13px 7px;font-size:15px;letter-spacing:7px;color:#262626}

/* Toques propios de cada red */
.pv-instagram .pv-txt{padding-top:2px}
.pv-facebook{border-color:#DDE1E7;background:#fff}
.pv-facebook .pv-txt{padding-top:0}
.pv-x{border-radius:14px}
.pv-linkedin .pv-quien small{color:#666}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.bandeja{padding:16px 24px;border-bottom:1px solid var(--linea);background:#fff}
.bandeja-etq{font-size:11px;font-weight:600;color:var(--tx-suave);text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:6px}
.bandeja-asunto{font-size:16.5px;color:var(--tx);font-weight:600;letter-spacing:-.01em}
.bandeja-pre{font-size:13.5px;color:var(--tx-suave);margin-top:4px}
#nMarco{display:block;width:100%;height:680px;border:0;background:var(--papel)}

/* ==========================================================================
   PESTAÑAS INTERNAS
   ========================================================================== */

.pestanas{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--linea)}
.pest{padding:14px 13px 12px;font:500 13.5px var(--font);color:var(--tx-suave);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.pest:hover{color:var(--tx)}
.pest.activa{color:var(--tx);font-weight:600;border-bottom-color:var(--naranja)}

/* ==========================================================================
   LISTAS EDITABLES
   ========================================================================== */

.lista-items{display:flex;flex-direction:column;gap:9px}
.item{display:flex;gap:9px;align-items:flex-start}
.item textarea{min-height:64px}
.item .quitar{flex:0 0 auto;width:36px;height:36px;border:1px solid var(--linea-2);
  background:#fff;border-radius:var(--r-sm);cursor:pointer;color:var(--tx-suave);
  font-size:17px;line-height:1;transition:color .15s ease,border-color .15s ease}
.item .quitar:hover{color:var(--mal);border-color:var(--mal);background:var(--mal-bg)}
.item-doble{display:grid;gap:7px;flex:1;min-width:0}

/* Historial de lo generado */
.hist{display:flex;flex-direction:column;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.hist:empty{display:none}
.hist-fila{display:flex;gap:12px;align-items:center;padding:11px 13px;background:#fff}
.hist-datos{flex:1;min-width:0}
.hist-titulo{font-size:13.5px;color:var(--tx);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-fecha{margin-top:2px;font-size:11.5px;color:var(--tx-suave)}
.hist-fila .quitar{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--linea-2);
  background:#fff;border-radius:var(--r-sm);cursor:pointer;color:var(--tx-suave);
  font-size:15px;line-height:1;transition:color .15s ease,border-color .15s ease}
.hist-fila .quitar:hover{color:var(--mal);border-color:var(--mal);background:var(--mal-bg)}
.hist-vacio{padding:14px 13px;background:#fff;font-size:13px;color:var(--tx-suave)}

/* ==========================================================================
   AJUSTES
   ========================================================================== */

.modal-fondo{position:fixed;inset:0;z-index:60;background:rgba(26,24,22,.5);
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;overflow:auto;animation:aparece .18s ease both}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:680px;background:var(--superficie);border-radius:var(--r-lg);
  box-shadow:var(--s3);overflow:hidden;animation:sube .24s cubic-bezier(.2,.8,.3,1) both}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.modal-cab{display:flex;align-items:center;padding:20px 24px 18px}
.modal-cab h3{margin:0;font-family:var(--serif);font-size:22px;font-weight:400;flex:1}
.modal-cab button{background:none;border:0;font-size:26px;line-height:1;
  color:var(--tx-suave);cursor:pointer;padding:0 4px}
.modal-cab button:hover{color:var(--tx)}

/* Las seis pestañas de ajustes no caben en un móvil: se deslizan de lado, sin
   barra de desplazamiento a la vista (afea y en táctil no hace falta). */
.modal-pestanas{display:flex;gap:2px;padding:0 18px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  border-bottom:1px solid var(--linea)}
.modal-pestanas::-webkit-scrollbar{display:none}
.modal-pestanas button{padding:11px 12px;font:500 13px var(--font);color:var(--tx-suave);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.modal-pestanas button:hover{color:var(--tx)}
.modal-pestanas button.activa{color:var(--tx);font-weight:600;border-bottom-color:var(--naranja)}

.modal-cuerpo{padding:24px}
.modal-pie{display:flex;justify-content:flex-end;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--linea)}

/* ==========================================================================
   REPASO RESPONSIVE
   Va al final a propósito: son ajustes que deben pisar a lo de arriba.
   ========================================================================== */

/* Nada debe provocar barra horizontal: los contenedores de rejilla y flex
   se niegan a encoger si no se les dice. */
.rejilla-2 > *,.rejilla-lateral > *,.fila > *,.pub,.tarjeta{min-width:0}
img{max-width:100%}

/* --- Tabletas y portátiles pequeños ------------------------------------- */
@media(max-width:900px){
  .cabecera-seccion{align-items:flex-start;gap:16px}
  .cabecera-seccion h1{font-size:27px}
  .rangos{width:100%}
  .rangos button{flex:1}
  .grafico{height:230px}
  #nMarco{height:560px}
}

/* --- Pantallas táctiles ---------------------------------------------------
   Safari hace zoom solo al tocar un campo de menos de 16px, y descoloca la
   pantalla. Pasa igual en iPad, que es más ancho que el corte de móvil, así
   que la regla va por "pantalla táctil" y no por ancho. */
@media(pointer:coarse){
  input[type=text],input[type=email],input[type=password],input[type=datetime-local],
  input[type=date],textarea,select{font-size:16px}
}

/* --- Móviles -------------------------------------------------------------
   El cambio importante: los campos pasan a 16px. Por debajo de 16px, Safari
   de iPhone hace zoom solo al tocar un campo y descoloca la pantalla. */
@media(max-width:620px){
  input[type=text],input[type=email],input[type=password],input[type=datetime-local],
  input[type=date],textarea,select{font-size:16px;padding:10px 12px}

  .lienzo{padding:18px 14px 56px}
  .cabecera-seccion{padding-bottom:16px;margin-bottom:20px}
  .cabecera-seccion h1{font-size:24px}
  .cabecera-seccion .sub{font-size:13.5px}

  .tarjeta{border-radius:var(--r);margin-bottom:16px}
  .tarjeta > h2{padding:14px 16px 12px;font-size:14px}
  .tarjeta > h2 .h2-nota{float:none;display:block;padding-top:3px}
  .tarjeta .cuerpo{padding:16px}
  .tarjeta.vacia .cuerpo{padding:44px 20px}

  .kpi{padding:16px 18px 15px}
  .kpi .val{font-size:29px;margin:9px 0 8px}
  .grafico{height:195px}

  /* La tabla se queda sin sitio: se recortan huecos y se quita el porcentaje,
     que es el dato menos importante de los tres. */
  .tabla .fila-t,.tabla .fila-cab{gap:9px;padding-left:8px;padding-right:8px}
  .tabla .pct{display:none}
  .tabla .cifra{font-size:13.5px}
  .tabla .nombre{font-size:13.5px}

  .pestanas{overflow-x:auto;padding:0 10px;scrollbar-width:none}
  .pestanas::-webkit-scrollbar{display:none}
  .pest{padding:12px 10px;white-space:nowrap}

  .pub .cuerpo{padding:14px 16px}
  .pub-cab{padding:12px 16px}
  .pub textarea{min-height:130px;font-size:16px}
  .pub .acciones .btn{flex:1}

  .bandeja{padding:13px 16px}
  #nMarco{height:460px}

  .previo-img{aspect-ratio:4/3}

  /* El historial: que el título no aplaste a los botones */
  .hist-fila{flex-wrap:wrap;gap:8px}
  .hist-datos{flex:1 1 100%}

  .modal-fondo{padding:2vh 10px}
  .modal-cuerpo{padding:16px}
  .modal-cab{padding:16px 18px 14px}
  .modal-cab h3{font-size:19px}

  .acceso-pantalla{padding:20px 14px}
  .acceso{padding:30px 22px 26px}
  .acceso-marca{margin-bottom:22px;padding-bottom:20px}
  .acceso-logo{width:190px}

  /* La maqueta de red, a lo ancho del móvil */
  .pv{max-width:100%}
}

/* --- Móviles estrechos (iPhone SE y similares) --------------------------- */
@media(max-width:380px){
  /* Apretando un poco las pestañas caben las cuatro sin deslizar. */
  .rail{padding-left:10px;padding-right:10px}
  .menu .tab{padding:9px 9px;font-size:14px}
  .rail-logo{width:104px}

  .lienzo{padding:14px 11px 48px}
  .tarjeta .cuerpo{padding:14px}
  .cabecera-seccion h1{font-size:22px}
  .kpi .val{font-size:26px}
  .rangos button{padding:7px 8px;font-size:12.5px}
  .tabla .rank{width:16px;flex:0 0 16px}
  .fila{gap:6px}
  .btn{padding:10px 14px}
}