/* Autoservicio de activación telefónica — identidad Tu Código Digital.
   ---------------------------------------------------------------------------
   Los valores salen de las fichas de producto del sitio (tema Woodmart):
     fondo #1a1a1a · panel #242424 · acento #dd9933 · títulos Readex Pro
     texto Cabin rgba(255,255,255,.8) · radio 5px campos / 8px botones

   DOS REGLAS que no se tocan, las dos vienen de bugs reales:

   1. Todo elemento que define su propio fondo define TAMBIÉN su color de
      texto, explícito. Nada de heredar: el tema pinta el texto de blanco y
      ya nos dejó una vez campos de texto blanco sobre fondo blanco.

   2. El par fondo/texto se fija acá, no se toma del tema. El acento sí sale
      de --wd-primary-color, porque es decorativo y siempre cae sobre un
      fondo que controlamos nosotros. Si el sitio pasara a claro, el widget
      queda oscuro y desentona — pero se LEE. Desentonar es mejor que
      desaparecer.
   --------------------------------------------------------------------------- */

.tcd-act{
  /* una sola fuente de verdad para todo lo de abajo */
  --tcd-acento:var(--wd-primary-color,#dd9933);
  --tcd-panel:#242424;
  --tcd-hueco:#1a1a1a;
  --tcd-borde:rgba(255,255,255,.12);
  /* .38 y no .2: el relleno del campo (#1a1a1a) contra el panel (#242424) da
     1,12:1, así que el borde es lo ÚNICO que dice dónde empieza el campo.
     Con .2 daba 1,68:1; con .38 llega a 3,1:1, que es el piso de WCAG 1.4.11
     para límites de controles. */
  --tcd-borde-fuerte:rgba(255,255,255,.38);
  --tcd-txt:rgba(255,255,255,.82);
  --tcd-txt-suave:rgba(255,255,255,.55);
  --tcd-titulo:#fff;
  --tcd-wa:#25d366;
  --tcd-mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;

  position:relative;
  max-width:660px;margin:0 auto;
  background:var(--tcd-panel);
  color:var(--tcd-txt);
  font-family:var(--wd-text-font,inherit);
  border:1px solid var(--tcd-borde);
  border-radius:14px;
  padding:30px 28px 26px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.35)
}
/* filete de acento arriba: es lo que hace que el bloque se lea como parte
   de la tienda y no como un formulario pegado */
.tcd-act::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--tcd-acento),rgba(221,153,51,.15))
}
@media(max-width:520px){.tcd-act{padding:24px 18px 20px;border-radius:12px}}

/* ---- encabezado ---------------------------------------------------------- */
.tcd-act-marca{
  display:block;margin:0 0 10px;
  font-family:var(--wd-title-font,inherit);
  font-size:.7rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--tcd-acento)
}
.tcd-act h3{
  margin:0 0 8px;padding:0;
  font-family:var(--wd-title-font,inherit);
  font-size:1.45rem;font-weight:500;line-height:1.25;
  color:var(--tcd-titulo)
}
.tcd-act-sub{color:var(--tcd-txt-suave);margin:0 0 22px;line-height:1.6;font-size:.95rem}
.tcd-act-sub b{color:var(--tcd-txt);font-weight:600}

/* El título del paso 2 recibe el foco por JS cuando aparece el Confirmation ID
   (ver mostrarResultado). Sin :focus-visible el cliente con mouse vería un
   recuadro salido de la nada; con él, solo lo ve quien navega por teclado. */
.tcd-act h3[tabindex]:focus{outline:none}
.tcd-act h3[tabindex]:focus-visible{outline:2px solid var(--tcd-acento);outline-offset:4px;border-radius:4px}

/* foco visible por teclado en todo lo accionable */
.tcd-act button:focus-visible,.tcd-act a:focus-visible{
  outline:2px solid var(--tcd-acento);outline-offset:3px
}

/* ---- campos -------------------------------------------------------------- */
.tcd-act label{
  display:block;margin:18px 0 7px;
  font-family:var(--wd-title-font,inherit);
  font-weight:500;font-size:.9rem;color:var(--tcd-titulo)
}
.tcd-act label span{font-weight:400;color:var(--tcd-txt-suave);font-size:.85em;font-family:var(--wd-text-font,inherit)}

.tcd-act input[type=text],.tcd-act input[type=email],.tcd-act textarea{
  width:100%;box-sizing:border-box;display:block;
  padding:13px 15px;
  border:1px solid var(--tcd-borde-fuerte);border-radius:var(--wd-form-brd-radius,5px);
  background:var(--tcd-hueco);
  color:#fff;-webkit-text-fill-color:#fff;   /* hay temas que repintan por text-fill */
  /* 16px NO es estético: por debajo de 16px, Safari en iOS hace zoom al enfocar
     el campo. Enfocando el Installation ID el zoom deja fuera de pantalla el
     contador de dígitos y el botón, justo cuando el cliente los necesita, y no
     se vuelve solo. */
  font-family:var(--tcd-mono);font-size:16px;line-height:1.65;
  transition:border-color .15s,box-shadow .15s
}
/* Altura explícita: el tema le mete un min-height enorme al textarea y el
   rows="3" del HTML no le gana.
   El alto se fija por ancho de pantalla porque lo que manda es cuántas líneas
   ocupa un IID pegado tal cual lo da el asistente ("1234567 " ×9 = 71
   caracteres): en un celular de 320px entran ~22 caracteres por línea (4
   líneas) y en la tarjeta completa de 660px entran ~43 (2 líneas).
   136px cubre el peor caso con aire. Sin esto quedaba en 1px de margen, que
   es el mismo error de "entra justo" que ya nos cortó los dígitos del
   Confirmation ID. Y queda resize:vertical por si aun así alguien lo necesita. */
.tcd-act textarea{resize:vertical;letter-spacing:.5px;min-height:0;height:136px}
@media(min-width:520px){.tcd-act textarea{height:112px}}
/* .5 y no .3: el placeholder del Installation ID es el ÚNICO lugar de la
   página que muestra que son 9 bloques de 7 dígitos. Con .3 daba 2,7:1 y en
   un celular al sol el campo se veía como una caja negra vacía. */
.tcd-act input::placeholder,.tcd-act textarea::placeholder{
  color:rgba(255,255,255,.5);-webkit-text-fill-color:rgba(255,255,255,.5);opacity:1;letter-spacing:0
}
.tcd-act input:focus,.tcd-act textarea:focus{
  outline:none;border-color:var(--tcd-acento);
  box-shadow:0 0 0 3px rgba(221,153,51,.22)
}
/* el autocompletado de Chrome también repinta fondo y texto */
.tcd-act input:-webkit-autofill{
  -webkit-text-fill-color:#fff;box-shadow:0 0 0 100px var(--tcd-hueco) inset;caret-color:#fff
}
/* el foco va aparte y repite el anillo: la máscara del autofill declara
   box-shadow y con mayor especificidad que `input:focus`, así que si no se
   repite acá el campo autocompletado se queda SIN anillo de foco */
.tcd-act input:-webkit-autofill:focus{
  box-shadow:0 0 0 3px rgba(221,153,51,.22),0 0 0 100px var(--tcd-hueco) inset
}

.tcd-act-hint{font-size:.83rem;color:var(--tcd-txt-suave);margin:7px 0 0;min-height:1.2em;line-height:1.45}

/* ---- botones ------------------------------------------------------------- */
/* El primario va en el naranja de la marca con texto OSCURO: blanco sobre
   #dd9933 da 2.3:1 y se lee mal; el mismo naranja con #1a1a1a da 7.5:1.
   Es el botón que decide la conversión, tiene que ser lo más legible del
   bloque. */
.tcd-act button{
  display:block;width:100%;margin-top:22px;
  padding:15px 24px;border:0;border-radius:8px;cursor:pointer;
  background:var(--tcd-acento);color:#1a1a1a;
  font-family:var(--wd-title-font,inherit);
  /* el tema usa text-transform:capitalize en sus botones, pero eso en
     castellano deja "Activar Otro Equipo": las etiquetas van escritas como
     corresponde y sin transformar */
  font-size:.95rem;font-weight:800;letter-spacing:.3px;
  transition:transform .12s,box-shadow .15s,filter .15s;
  box-shadow:0 6px 18px rgba(221,153,51,.25)
}
.tcd-act button:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 9px 22px rgba(221,153,51,.32)}
.tcd-act button:active:not(:disabled){transform:translateY(0)}
/* Deshabilitado con colores propios, NO con opacity. El botón pasa a
   "Consultando…" mientras se espera a Microsoft, que puede tardar; con
   opacity:.45 el naranja y el texto casi negro se desvanecían JUNTOS contra el
   panel y quedaban en ~2,5:1 — el único indicador de que algo está pasando,
   ilegible justo durante la espera. Así da 5,5:1. */
.tcd-act button:disabled{
  cursor:not-allowed;box-shadow:none;filter:none;transform:none;
  background:#7a5a2a;color:#f0f0f0
}

/* el secundario copia el botón de "añadir al carrito" del tema: vidrio */
.tcd-act button.tcd-act-sec{
  background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.18);box-shadow:none
}
/* el box-shadow:none va también acá: la regla genérica de hover
   (.tcd-act button:hover:not(:disabled)) tiene MÁS especificidad que
   .tcd-act button.tcd-act-sec —:not() suma la de su argumento— así que en
   hover le encajaba al secundario el resplandor naranja del primario y los dos
   botones pasaban a leerse como la acción principal. */
.tcd-act button.tcd-act-sec:hover:not(:disabled){background:rgba(255,255,255,.13);filter:none;box-shadow:none}

/* ---- error + salida por WhatsApp ---------------------------------------- */
.tcd-act-err{
  display:block;
  background:rgba(220,38,38,.1);border:1px solid rgba(248,113,113,.32);
  color:#fca5a5;border-radius:8px;padding:13px 15px;margin:16px 0 0;
  font-size:.9rem;line-height:1.55
}
.tcd-act-err:empty,.tcd-act-err[hidden]{display:none}

.tcd-act-wa{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:12px;padding:9px 16px;border-radius:8px;
  background:var(--tcd-wa);color:#0b3d20!important;
  font-family:var(--wd-title-font,inherit);font-size:.85rem;font-weight:700;
  text-decoration:none!important;border:0;
  transition:filter .15s,transform .12s
}
.tcd-act-wa:hover{filter:brightness(1.06);transform:translateY(-1px);color:#0b3d20!important}
.tcd-act-wa svg{width:17px;height:17px;fill:currentColor;flex:none}

/* el mismo enlace, pero permanente y en voz baja, al pie de la tarjeta */
.tcd-act-ayuda{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--tcd-borde);
  font-size:.85rem;color:var(--tcd-txt-suave);line-height:1.5
}
.tcd-act-ayuda a{
  color:var(--tcd-acento)!important;font-weight:600;text-decoration:none!important;
  border-bottom:1px solid rgba(221,153,51,.4)
}
.tcd-act-ayuda a:hover{border-bottom-color:var(--tcd-acento)}

/* ---- resultado: los bloques del Confirmation ID -------------------------- */
/* Estos números el cliente los lee de la pantalla y los tipea en el asistente.
   Legibilidad antes que elegancia: grandes, monoespaciados y espaciados.

   NUNCA 8 columnas en fila, y en teléfono ni siquiera 4. Seis dígitos a un
   cuerpo legible necesitan ~60px de caja como piso:
     · 8 columnas en la tarjeta de 660px → caja de 60px: se cortaba el último
       bloque y mostraba "2711" en vez de "271116";
     · 4 columnas en un teléfono de 375px → caja de 55px: se cortaban LOS OCHO.
   Medido en el sitio, no calculado. De ahí 2 columnas hasta 520px y 4 de ahí
   en adelante — que además es como los presenta el asistente de Microsoft. */
.tcd-act-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0}
@media(min-width:520px){.tcd-act-grid{grid-template-columns:repeat(4,1fr)}}

.tcd-act-box{
  background:var(--tcd-hueco);border:1px solid var(--tcd-borde);
  border-radius:9px;padding:12px 6px;text-align:center;color:#fff;min-width:0
}
.tcd-act-box .l{
  font-family:var(--wd-title-font,inherit);
  font-size:.65rem;font-weight:700;letter-spacing:1.2px;
  color:var(--tcd-acento)
}
.tcd-act-box .v{
  font-family:var(--tcd-mono);
  font-size:22px;font-weight:700;
  margin-top:6px;letter-spacing:1px;color:#fff;
  /* RED DE SEGURIDAD, no es decorativo. .tcd-act lleva overflow:hidden (lo
     necesita el filete de acento con las esquinas redondeadas), así que si
     algún día un bloque no entrara en su caja los dígitos se CORTARÍAN sin
     aviso — y el cliente tipearía un Confirmation ID incompleto en el
     asistente sin enterarse. Con esto, el peor caso es que el número se
     parta en dos líneas: feo, pero legible y completo.
     Con las medidas actuales no se dispara nunca; está por si cambia la
     fuente, el cuerpo o el padding. */
  word-break:break-all
}
@media(min-width:520px){.tcd-act-box .v{font-size:clamp(18px,2.6vw,26px)}}
/* bloque que arranca en cero: el error de tipeo más común de todos */
.tcd-act-box.cero{border-color:var(--tcd-acento);background:rgba(221,153,51,.1)}
.tcd-act-box.cero .v{color:var(--tcd-acento)}

/* ---- avisos -------------------------------------------------------------- */
.tcd-act-aviso{
  background:rgba(221,153,51,.1);border:1px solid rgba(221,153,51,.35);
  color:#f3d9a4;border-radius:8px;padding:12px 15px;margin:12px 0;
  font-size:.88rem;line-height:1.6
}
.tcd-act-aviso b{color:#fff}
.tcd-act-aviso-info{background:rgba(255,255,255,.05);border-color:var(--tcd-borde);color:var(--tcd-txt)}
.tcd-act-restantes{color:var(--tcd-txt-suave);font-size:.87rem;margin:16px 0 0;line-height:1.5}

/* ==========================================================================
   El texto DE LA PÁGINA que rodea al widget (la guía "Cómo llegar al
   Installation ID" y las preguntas frecuentes).
   --------------------------------------------------------------------------
   Esto NO es parte del shortcode: es contenido del post, hermano del widget.
   Se estiliza igual porque sin esto el bloque queda como una isla prolija en
   medio de una página sin armar. Lo medido antes de tocar nada:

     · los párrafos corrían a 1271px de ancho = ~159 caracteres por línea
       (lo cómodo son 55-85), al lado de una tarjeta de 660px;
     · el <code> del comando `slui 4` era display:block sobre negro puro y
       ocupaba 1254px — una banda negra de lado a lado por dos palabras;
     · h2 (24px) y h3 (23,2px) eran casi del mismo cuerpo y NINGUNO tenía
       margen superior, así que los títulos se pegaban al párrafo anterior.

   El alcance lo da la clase `tcd-act-pagina` en el <body>, que el plugin
   agrega SOLO en las páginas que usan el shortcode (ver body_class en
   tcd-activacion.php). Nada de esto toca al resto del sitio.
   ========================================================================== */

/* Una sola columna, del mismo ancho que la tarjeta: es lo que hace que la
   página se lea como una pieza y no como un widget tirado sobre un texto. */
.tcd-act-pagina .entry-content > p,
.tcd-act-pagina .entry-content > h2,
.tcd-act-pagina .entry-content > h3,
.tcd-act-pagina .entry-content > h4,
.tcd-act-pagina .entry-content > ol,
.tcd-act-pagina .entry-content > ul,
.tcd-act-pagina .entry-content > blockquote,
.tcd-act-pagina .entry-content > figure,
.tcd-act-pagina .entry-content > table{
  max-width:660px;margin-left:auto;margin-right:auto
}

.tcd-act-pagina .entry-content > p{line-height:1.7;margin-bottom:18px}

/* h2: marca de sección con el mismo filete de acento que corona la tarjeta */
.tcd-act-pagina .entry-content > h2{
  position:relative;
  margin-top:60px;margin-bottom:18px;padding-top:22px;
  font-size:1.5rem;line-height:1.3
}
.tcd-act-pagina .entry-content > h2::before{
  content:"";position:absolute;top:0;left:0;
  width:44px;height:3px;border-radius:2px;
  background:var(--wd-primary-color,#dd9933)
}

/* h3: son las preguntas frecuentes. Bajan de cuerpo para que dejen de
   competir con los h2, y un filete arriba las separa entre sí. */
.tcd-act-pagina .entry-content > h3{
  margin-top:32px;margin-bottom:10px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:1.12rem;line-height:1.4
}
/* la primera pregunta después del título de sección no lleva separador */
.tcd-act-pagina .entry-content > h2 + h3{
  border-top:0;padding-top:0;margin-top:24px
}

/* listas: numeración en el acento y aire entre pasos */
.tcd-act-pagina .entry-content > ol,
.tcd-act-pagina .entry-content > ul{
  padding-left:26px;margin-bottom:18px;line-height:1.7
}
.tcd-act-pagina .entry-content > ol > li,
.tcd-act-pagina .entry-content > ul > li{margin-bottom:12px}
.tcd-act-pagina .entry-content > ol > li::marker{color:var(--wd-primary-color,#dd9933);font-weight:700}
.tcd-act-pagina .entry-content > ul > li::marker{color:var(--wd-primary-color,#dd9933)}

/* El comando: una ficha del ancho del comando, no una banda de lado a lado.
   Los DOS !important son necesarios y están medidos: hay un CSS en línea del
   sitio con `pre, code { color:#fff !important; background:#000 !important }`
   —es lo que pintaba la banda negra— y contra !important no alcanza ninguna
   especificidad. Se marcan solo esas dos propiedades, las únicas disputadas;
   el resto de la regla gana por especificidad normal. Si algún día se saca ese
   CSS en línea, estos dos !important se pueden sacar también. */
.tcd-act-pagina .entry-content code{
  display:inline-block;width:auto;
  background:#1a1a1a!important;color:var(--wd-primary-color,#dd9933)!important;
  border:1px solid rgba(255,255,255,.15);border-radius:6px;
  padding:5px 12px;margin:2px 0;
  font-family:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  font-size:.95em;line-height:1.5;
  white-space:pre-wrap;word-break:break-word
}

/* ---- quien pidió menos movimiento ---------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .tcd-act *,.tcd-act *::before{transition:none!important;animation:none!important}
  .tcd-act button:hover:not(:disabled),.tcd-act-wa:hover{transform:none}
}