/* ==========================================================================
   TavoTV · Panel de configuración
   Paleta tomada de la app de Roku: fondo azul muy oscuro, acento naranja.
   Diseño pensado primero para móvil, que es donde se va a usar.
   ========================================================================== */

:root{
  --fondo:#080B14;
  --panel:#0F1524;
  --panel2:#151D31;
  --borde:#233049;
  --texto:#E2E8F0;
  --suave:#94A3B8;
  --naranja:#FB923C;
  --naranja-osc:#C2410C;
  --teal:#2DD4BF;
  --verde:#22C55E;
  --rojo:#EF4444;
  --ambar:#F59E0B;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  padding-bottom:48px;
}

.caja{max-width:760px;margin:0 auto;padding:0 16px}

/* ------------------------------- cabecera ------------------------------- */
.cabecera{
  background:linear-gradient(180deg,#0D1322,#080B14);
  border-bottom:1px solid var(--borde);
  padding:18px 0 14px;
}
.cabecera-int{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.marca{font-size:23px;font-weight:800;letter-spacing:1px}
.marca b{color:var(--naranja)}
.marca-sub{color:var(--suave);font-size:13px}
.salir{margin-left:auto;align-self:center}

/* ------------------------------- pestañas ------------------------------- */
.pestanas{
  position:sticky;top:0;z-index:20;
  background:rgba(8,11,20,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.pestanas-int{
  display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pestanas-int::-webkit-scrollbar{display:none}
.pest{
  flex:0 0 auto;
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--suave);font:600 14px inherit;font-family:inherit;
  padding:14px 12px;cursor:pointer;white-space:nowrap;
}
.pest:hover{color:var(--texto)}
.pest.activa{color:var(--naranja);border-bottom-color:var(--naranja)}

/* -------------------------------- paneles ------------------------------- */
.panel{display:none;padding-top:20px}
.panel.activo{display:block}

.intro{color:var(--suave);font-size:15px;margin:0 0 18px}
.intro b{color:var(--texto)}

.bloque{
  background:var(--panel);
  border:1px solid var(--borde);
  border-radius:14px;
  padding:18px 16px;
  margin-bottom:18px;
}
.bloque-cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:6px;
}
.bloque h2{
  font-size:17px;margin:0 0 4px;font-weight:700;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.bloque-cab h2{margin:0}
.etq{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;
  color:var(--teal);background:rgba(45,212,191,.1);
  border:1px solid rgba(45,212,191,.3);border-radius:20px;padding:3px 9px;
}

/* -------------------------------- formulario ---------------------------- */
label{
  display:block;font-size:12px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--suave);margin:16px 0 6px;font-weight:600;
}
label:first-child{margin-top:6px}
.opc{text-transform:none;letter-spacing:0;font-weight:400;opacity:.75}

input[type=text],input[type=password],input[type=url],textarea{
  width:100%;
  background:var(--panel2);
  border:1px solid var(--borde);
  color:var(--texto);
  border-radius:10px;
  padding:13px 14px;
  font:16px/1.4 inherit;
  font-family:inherit;
}
textarea{resize:vertical;word-break:break-all}
input:focus,textarea:focus{outline:none;border-color:var(--naranja)}
input::placeholder,textarea::placeholder{color:#54617A}

input[type=file]{
  width:100%;color:var(--suave);font-size:14px;
  background:var(--panel2);border:1px dashed var(--borde);
  border-radius:10px;padding:14px;
}

.campo-ojo{position:relative}
.campo-ojo input{padding-right:62px}
.ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:var(--borde);border:none;color:var(--texto);
  border-radius:7px;padding:7px 11px;font:600 12px inherit;font-family:inherit;
  cursor:pointer;
}
.ojo:hover{background:#2E3D5C}

.interruptor{
  display:flex;align-items:center;gap:11px;
  text-transform:none;letter-spacing:0;font-size:15px;
  color:var(--texto);font-weight:400;margin:18px 0 4px;cursor:pointer;
}
.interruptor input{width:20px;height:20px;accent-color:var(--naranja);flex:0 0 auto}

.pista{color:var(--suave);font-size:13px;margin:8px 0 0}
.pista code,.nota code,.intro code{
  font:600 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--panel2);border:1px solid var(--borde);
  border-radius:5px;padding:1px 5px;color:var(--naranja);
  word-break:break-all;
}
a{color:var(--teal)}
a:hover{color:var(--naranja)}

/* -------------------------------- botones ------------------------------- */
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* Lo que la tele ya tenía puesta ella sola, dentro de un aviso. */
.lista-ya{margin:8px 0 10px;padding-left:20px}
.lista-ya li{margin:3px 0;line-height:1.45}
.btn{
  border:1px solid var(--borde);border-radius:10px;
  padding:12px 18px;font:600 15px inherit;font-family:inherit;
  cursor:pointer;background:var(--panel2);color:var(--texto);
}
.btn:hover{border-color:var(--naranja)}
.btn:active{transform:translateY(1px)}
.btn-ok{background:var(--naranja);border-color:var(--naranja);color:#1A1206}
.btn-ok:hover{background:#FDBA74;border-color:#FDBA74}
.btn-neutro{background:var(--panel2)}
.btn-peligro{color:#FCA5A5;border-color:#7F1D1D;background:rgba(239,68,68,.08)}
.btn-peligro:hover{background:rgba(239,68,68,.16);border-color:var(--rojo)}
.btn-add{padding:9px 14px;font-size:14px;flex:0 0 auto}
.btn-mini{padding:8px 12px;font-size:13px}

.enlace{
  background:none;border:none;padding:0;color:var(--teal);
  font:inherit;text-decoration:underline;cursor:pointer;
}
.enlace:hover{color:var(--naranja)}

/* --------------------------------- notas -------------------------------- */
.nota{
  background:var(--panel);border:1px solid var(--borde);
  border-left:3px solid var(--teal);border-radius:10px;
  padding:15px 16px;font-size:14px;color:var(--suave);margin-bottom:18px;
}
.nota b{color:var(--texto)}
.nota-ambar{border-left-color:var(--ambar)}
.nota-roja{border-left-color:var(--rojo)}

.aviso-priv{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(45,212,191,.06);
  border:1px solid rgba(45,212,191,.25);
  border-radius:12px;padding:14px 15px;margin-bottom:20px;
  font-size:14px;color:var(--suave);
}
.aviso-priv b{color:var(--texto)}
.aviso-priv svg{width:20px;height:20px;flex:0 0 auto;fill:var(--teal);margin-top:2px}

/* ------------------------------- tarjetas ------------------------------- */
.tarjeta{
  background:var(--panel2);border:1px solid var(--borde);
  border-radius:12px;padding:14px;margin-top:12px;
}
.tarjeta-cab{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tarjeta-nom{font-weight:700;font-size:16px;word-break:break-word}
.tarjeta-tipo{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:700;
  border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:2px;
}
.t-xtream{background:rgba(251,146,60,.16);color:var(--naranja)}
.t-m3u{background:rgba(45,212,191,.16);color:var(--teal)}
.tarjeta-dato{
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--suave);word-break:break-all;margin-top:7px;
}
.tarjeta-dato span{color:#5C6B85;text-transform:uppercase;
  font-family:inherit;font-size:10px;letter-spacing:.8px}
.tarjeta-btns{display:flex;gap:7px;flex:0 0 auto}

.vacio{
  color:var(--suave);font-size:14px;text-align:center;
  padding:26px 14px;border:1px dashed var(--borde);
  border-radius:12px;margin-top:12px;
}

/* --------------------------- guía de instalación ------------------------ */
.paso{
  background:var(--panel);border:1px solid var(--borde);
  border-radius:14px;padding:18px 16px;margin-bottom:16px;
}
.paso-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--naranja);color:#1A1206;
  font:800 14px inherit;font-family:inherit;margin-right:10px;flex:0 0 auto;
}
.paso-tit{display:flex;align-items:center;font-size:17px;font-weight:700;margin-bottom:4px}
.paso-desc{color:var(--suave);font-size:14px;margin:0 0 4px}
.ruta{
  display:inline-block;font:600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--panel2);border:1px solid var(--borde);border-radius:6px;
  padding:5px 10px;margin:8px 0 4px;color:var(--teal);
}

.dato{
  display:flex;align-items:center;gap:10px;
  background:var(--panel2);border:1px solid var(--borde);
  border-radius:10px;padding:11px 12px;margin-top:10px;
}
.dato-cuerpo{flex:1;min-width:0}
.dato-etiq{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:#5C6B85;font-weight:700;
}
.dato-val{
  font:14px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;margin-top:2px;
}
.dato-val.vacia{color:#54617A;font-style:italic;font-family:inherit}

.sugerencias{margin-top:12px}

/* ------------------------------- mensajes ------------------------------- */
.msj{
  font-size:14px;border-radius:9px;padding:11px 13px;margin-top:12px;
  border:1px solid;display:flex;gap:9px;align-items:flex-start;
}
.msj b{font-weight:700}
.msj-mal{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.4);color:#FCA5A5}
.msj-bien{background:rgba(34,197,94,.09);border-color:rgba(34,197,94,.4);color:#86EFAC}
.msj-ojo{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.4);color:#FCD34D}
.msj-info{background:var(--panel2);border-color:var(--borde);color:var(--suave)}
.msj ul{margin:5px 0 0;padding-left:18px}
.msj li{margin:3px 0}

.cargando{
  display:inline-block;width:13px;height:13px;flex:0 0 auto;
  border:2px solid rgba(148,163,184,.3);border-top-color:var(--suave);
  border-radius:50%;animation:gira .7s linear infinite;margin-top:3px;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* -------------------------------- brindis ------------------------------- */
.brindis{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);
  background:var(--verde);color:#052E16;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:30px;z-index:100;
  transition:transform .26s cubic-bezier(.2,.9,.3,1.2),opacity .2s linear;
  box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:88vw;text-align:center;
  /* Con el aviso vacío es muy bajito, y desplazarlo un 140% de su propia
     altura no bastaba para sacarlo de la pantalla: se asomaba por abajo.
     Se oculta también con opacidad y visibilidad, que no dependen del alto. */
  opacity:0;visibility:hidden;pointer-events:none;
}
.brindis.ver{transform:translate(-50%,0);opacity:1;visibility:visible}
.brindis.mal{background:var(--rojo);color:#fff}

/* ---------------------------------- pie --------------------------------- */
.pie{
  border-top:1px solid var(--borde);margin-top:36px;padding:22px 0;
  color:var(--suave);font-size:13px;
}
.pie p{margin:0 0 6px}
.pie-nota{color:#5C6B85;font-size:12px}

.oculto{display:none !important}

/* ------------------------------ escritorio ------------------------------ */
@media (min-width:640px){
  .bloque,.paso{padding:20px 22px}
  .marca{font-size:26px}
}


/* ==========================================================================
   BIENVENIDA Y ASISTENTE
   ========================================================================== */

.pantalla{display:none;padding-top:20px}
.pantalla.activa{display:block}

/* --------------------------------- hero --------------------------------- */
.hero{
  text-align:center;
  padding:26px 4px 30px;
}
.hero h1{
  font-size:29px;line-height:1.2;margin:0 0 12px;font-weight:800;letter-spacing:-.3px;
}
.hero h1 b{color:var(--naranja)}
.hero-sub{
  color:var(--suave);font-size:16px;margin:0 auto 24px;max-width:460px;
}
.hero-nota{color:#5C6B85;font-size:13px;margin:14px 0 0}

.hero-final{padding-top:10px}
.tic{
  width:62px;height:62px;margin:0 auto 16px;
  border-radius:50%;background:rgba(34,197,94,.14);
  border:2px solid var(--verde);
  display:flex;align-items:center;justify-content:center;
}
.tic svg{
  width:30px;height:30px;
  fill:none;stroke:var(--verde);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.titulo-paso{font-size:25px;margin:0 0 10px;font-weight:800;letter-spacing:-.2px}
.sub-titulo{font-size:15px;margin:22px 0 0;color:var(--suave);font-weight:600;
  text-transform:uppercase;letter-spacing:.9px}

.btn-grande{
  padding:16px 34px;font-size:17px;font-weight:700;
  background:var(--naranja);border-color:var(--naranja);color:#1A1206;
  border-radius:12px;
}
.btn-grande:hover{background:#FDBA74;border-color:#FDBA74}

/* Botón que lleva a otra web (generar una clave de API). */
.btn-fuera{
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--panel2);border-color:var(--teal);color:var(--teal);
}
.btn-fuera:hover{background:rgba(45,212,191,.1);color:var(--teal)}
.btn-fuera::after{content:"↗";font-size:13px;opacity:.8}

.acciones-centro{justify-content:center}

.alterna{
  text-align:center;color:var(--suave);font-size:14px;
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--borde);
}

/* ------------------------------ aviso legal ----------------------------- */
.bloque-legal{
  border-left:3px solid var(--teal);
  background:linear-gradient(180deg,rgba(45,212,191,.05),var(--panel));
}
.bloque-legal p{margin:0 0 12px}
.bloque-legal p:last-child{margin-bottom:0}
.icono-legal{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;
  background:rgba(45,212,191,.14);color:var(--teal);
  font-weight:700;font-size:15px;
}

.ventaja{
  color:var(--suave);font-size:14px;margin:0 0 16px;
  border-left:2px solid var(--borde);padding-left:12px;
}
.ventaja b{color:var(--texto)}

/* ------------------------------ pasos mini ------------------------------ */
.paso-mini{
  display:flex;gap:13px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--borde);
}
.paso-mini:last-of-type{border-bottom:none;padding-bottom:4px}
.paso-mini b{font-size:15px}
.paso-mini p{margin:3px 0 0;color:var(--suave);font-size:14px}

/* ------------------------------- progreso ------------------------------- */
.progreso{padding:18px 0 4px}
.progreso-barra{
  height:5px;background:var(--panel2);border-radius:4px;overflow:hidden;
  border:1px solid var(--borde);
}
.progreso-relleno{
  height:100%;width:0;background:linear-gradient(90deg,var(--naranja-osc),var(--naranja));
  border-radius:4px;transition:width .35s cubic-bezier(.3,.8,.3,1);
}
.progreso-texto{
  color:var(--suave);font-size:12px;margin-top:8px;
  text-transform:uppercase;letter-spacing:1px;font-weight:600;
}

/* ---------------------------- elegir el tipo ---------------------------- */
.eleccion{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}

.tarjeta-elegir{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:18px 18px;cursor:pointer;font-family:inherit;color:var(--texto);
  transition:border-color .15s,background .15s;
}
.tarjeta-elegir:hover{border-color:var(--naranja);background:var(--panel2)}
.te-titulo{font-size:17px;font-weight:700}
.te-sub{font-size:14px;color:var(--suave)}

/* -------------------------- el código de la TV -------------------------- */
.campo-codigo{
  font:700 27px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  letter-spacing:5px;text-align:center;text-transform:uppercase;
  padding:16px 12px !important;
}

/* ----------------------------- la contraseña ---------------------------- */
.clave-caja{
  margin-top:16px;text-align:center;
  background:linear-gradient(180deg,rgba(251,146,60,.09),var(--panel2));
  border:1px solid var(--naranja);border-radius:14px;padding:20px 16px;
}
.clave-etiq{
  font-size:11px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--suave);font-weight:700;
}
.clave-valor{
  font:700 30px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--naranja);letter-spacing:2px;margin:8px 0 14px;
  word-break:break-all;
}
.clave-nota{color:var(--suave);font-size:13px;margin-top:12px}

/* ------------------------------- cargando ------------------------------- */
.cargando-grande{text-align:center;padding:70px 20px}
.cargando-grande p{color:var(--suave);font-size:16px;margin:22px 0 0}
.rueda{
  width:42px;height:42px;margin:0 auto;
  border:3px solid rgba(251,146,60,.2);border-top-color:var(--naranja);
  border-radius:50%;animation:gira .8s linear infinite;
}

@media (min-width:640px){
  .hero h1{font-size:36px}
  .eleccion{flex-direction:row}
  .tarjeta-elegir{flex:1}
}


/* Destello del aviso de despliegue, para dirigir la mirada al texto que hay que
   leer cuando alguien pulsa "Activar" y no se puede continuar. */
.destello{
  animation: destello 1.4s ease-out;
}
@keyframes destello{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,0) }
  15%,55%{ box-shadow:0 0 0 4px rgba(239,68,68,.45) }
}


/* Agrupa los datos de una lista concreta en el panel de administración, para
   que se vea de un golpe qué campos pertenecen a la misma cuenta. */
.dato-grupo{
  margin-top:14px;padding-left:12px;
  border-left:2px solid var(--borde);
}
.dato-grupo>b{font-size:14px;color:var(--texto)}