/* ==========================================================================
   T-VOIP · Sistema de diseño
   Versión 1.0 · septiembre de 2026

   Todo lo que necesita cualquier desarrollo para verse como T-VOIP.
   Los colores y la tipografía salen de la guía de marca 2026; lo demás
   (escalas, componentes, estados) se construyó sobre esa base.

   Todas las clases van con prefijo .tv- para poder convivir con
   Bootstrap, Tailwind o cualquier CSS que ya tenga el proyecto.

   Uso mínimo:
     <link rel="stylesheet" href="css/tvoip.css">
     <body class="tv-claro">   o   <body class="tv-oscuro">
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   Si necesita cambiar algo de forma global, cámbielo aquí y no en los
   componentes. Nunca escriba un color a mano dentro de un componente.
   ========================================================================== */

:root{

  /* --- Marca ------------------------------------------------------------ */
  --tv-rojo:          #E2231A;   /* color principal de la marca */
  --tv-rojo-oscuro:   #A81913;   /* hover, presionado y texto rojo sobre claro */
  --tv-rojo-claro:    #F7C6C2;   /* fondos suaves y badges */
  --tv-rojo-vivo:     #FF5B50;   /* SOLO para texto rojo sobre fondo oscuro */

  --tv-negro:         #000000;
  --tv-tinta:         #101010;   /* negro de la marca para superficies */
  --tv-grafito:       #262626;   /* texto largo sobre fondo claro */

  /* --- Neutros ---------------------------------------------------------- */
  --tv-hueso:         #FAFAF8;   /* fondo claro base */
  --tv-blanco:        #FFFFFF;
  --tv-gris-borde:    #E4E2DC;   /* bordes y divisores */
  --tv-gris-deco:     #9B988D;   /* DECORATIVO: iconos, líneas. Nunca texto. */
  --tv-gris-texto:    #726F64;   /* texto secundario sobre fondo claro (4,81:1) */

  /* --- Semánticos ------------------------------------------------------- */
  /* No venían en la guía de marca; se eligieron con el contraste medido. */
  --tv-exito:         #0F7B4F;
  --tv-aviso:         #8A5200;
  --tv-info:          #1F5F8B;
  --tv-error:         #A81913;
  /* Versiones para fondo oscuro */
  --tv-exito-vivo:    #3FD18B;
  --tv-aviso-vivo:    #F2A93B;
  --tv-info-vivo:     #5FB3E4;
  --tv-error-vivo:    #FF5B50;

  /* --- Tipografía ------------------------------------------------------- */
  --tv-fuente:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tv-fuente-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --tv-peso-normal:   400;
  --tv-peso-medio:    500;
  --tv-peso-semi:     600;
  --tv-peso-fuerte:   700;
  --tv-peso-extra:    800;   /* solo titulares */

  /* Escala tipográfica. Los titulares son fluidos: crecen con la pantalla. */
  --tv-txt-xs:        0.75rem;    /* 12px · etiquetas, notas al pie */
  --tv-txt-sm:        0.875rem;   /* 14px · texto de apoyo */
  --tv-txt-base:      1rem;       /* 16px · cuerpo */
  --tv-txt-md:        1.0625rem;  /* 17px · cuerpo cómodo */
  --tv-txt-lg:        clamp(1.02rem, 1.7vw, 1.22rem);
  --tv-txt-h3:        1.2rem;
  --tv-txt-h2:        clamp(1.95rem, 3.9vw, 3rem);
  --tv-txt-h1:        clamp(2.5rem, 6vw, 4.5rem);

  --tv-alto-apretado: 1.1;
  --tv-alto-normal:   1.62;

  /* Montserrat es geométrica y ancha: los titulares necesitan tracking negativo */
  --tv-track-h1:      -0.035em;
  --tv-track-h2:      -0.03em;
  --tv-track-h3:      -0.018em;
  --tv-track-cuerpo:  -0.005em;
  --tv-track-etiqueta: 0.16em;   /* mayúsculas espaciadas */

  /* --- Espaciado -------------------------------------------------------- */
  /* Escala de 4px. Use siempre estos valores, no números sueltos. */
  --tv-e1:  4px;
  --tv-e2:  8px;
  --tv-e3:  12px;
  --tv-e4:  16px;
  --tv-e5:  20px;
  --tv-e6:  24px;
  --tv-e8:  32px;
  --tv-e10: 40px;
  --tv-e12: 48px;
  --tv-e16: 64px;
  --tv-e20: 80px;
  --tv-e24: 96px;
  /* Aire vertical entre secciones de página */
  --tv-seccion: clamp(76px, 10vw, 140px);

  /* --- Radios ----------------------------------------------------------- */
  --tv-radio-sm:   8px;
  --tv-radio:      14px;   /* tarjetas y campos */
  --tv-radio-lg:   22px;   /* bloques grandes */
  --tv-radio-full: 999px;  /* botones y píldoras */

  /* --- Sombras ---------------------------------------------------------- */
  --tv-sombra-sm:  0 2px 8px -2px rgba(16,16,16,.12);
  --tv-sombra:     0 18px 40px -24px rgba(16,16,16,.30);
  --tv-sombra-lg:  0 30px 70px -32px rgba(16,16,16,.45);
  --tv-sombra-roja:0 12px 30px -10px rgba(226,35,26,.60);

  /* --- Movimiento ------------------------------------------------------- */
  --tv-ease:       cubic-bezier(.22,.61,.36,1);
  --tv-ease-out:   cubic-bezier(.16,1,.3,1);
  --tv-rapido:     .2s;
  --tv-normal:     .3s;
  --tv-lento:      .6s;

  /* --- Disposición ------------------------------------------------------ */
  --tv-ancho:      1200px;
  --tv-margen:     clamp(20px, 5vw, 64px);

  /* --- Capas ------------------------------------------------------------ */
  --tv-z-base:     1;
  --tv-z-flotante: 90;
  --tv-z-nav:      100;
  --tv-z-modal:    200;
  --tv-z-aviso:    300;

  /* --- Variables de superficie (las reescribe .tv-oscuro) --------------- */
  --tv-fondo:          var(--tv-hueso);
  --tv-fondo-elevado:  var(--tv-blanco);
  --tv-texto:          var(--tv-grafito);
  --tv-texto-fuerte:   var(--tv-tinta);
  --tv-texto-suave:    var(--tv-gris-texto);
  --tv-borde:          var(--tv-gris-borde);
  --tv-acento:         var(--tv-rojo);
  --tv-acento-texto:   var(--tv-rojo-oscuro);  /* rojo legible sobre claro */
}

/* Superficie oscura. Póngala en <body> o en cualquier contenedor. */
.tv-oscuro{
  --tv-fondo:         var(--tv-tinta);
  --tv-fondo-elevado: rgba(250,250,248,.04);
  --tv-texto:         #B9B6AD;
  --tv-texto-fuerte:  var(--tv-blanco);
  --tv-texto-suave:   var(--tv-gris-deco);
  --tv-borde:         rgba(250,250,248,.16);
  --tv-acento:        var(--tv-rojo);
  --tv-acento-texto:  var(--tv-rojo-vivo);
  --tv-exito:         var(--tv-exito-vivo);
  --tv-aviso:         var(--tv-aviso-vivo);
  --tv-info:          var(--tv-info-vivo);
  --tv-error:         var(--tv-error-vivo);
  background: var(--tv-fondo);
  color: var(--tv-texto);
}
.tv-claro{
  background: var(--tv-fondo);
  color: var(--tv-texto);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

.tv-claro *,.tv-claro *::before,.tv-claro *::after,
.tv-oscuro *,.tv-oscuro *::before,.tv-oscuro *::after{ box-sizing:border-box }

.tv-claro,.tv-oscuro{
  font-family: var(--tv-fuente);
  font-size: var(--tv-txt-md);
  line-height: var(--tv-alto-normal);
  font-weight: var(--tv-peso-normal);
  -webkit-font-smoothing: antialiased;
}

.tv-claro p,.tv-oscuro p{ letter-spacing: var(--tv-track-cuerpo) }

/* Foco visible: obligatorio. Nunca lo quite sin poner otro en su lugar. */
.tv-claro :focus-visible,
.tv-oscuro :focus-visible{
  outline: 3px solid var(--tv-acento);
  outline-offset: 3px;
  border-radius: var(--tv-radio-sm);
}

.tv-claro ::selection{ background: var(--tv-rojo); color:#fff }
.tv-oscuro ::selection{ background: var(--tv-rojo); color:#fff }

@media (prefers-reduced-motion: reduce){
  .tv-claro *,.tv-oscuro *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */

.tv-h1,.tv-h2,.tv-h3{
  font-family: var(--tv-fuente);
  color: var(--tv-texto-fuerte);
  margin: 0;
}
.tv-h1{ font-weight:var(--tv-peso-extra); font-size:var(--tv-txt-h1);
        line-height:1.04; letter-spacing:var(--tv-track-h1) }
.tv-h2{ font-weight:var(--tv-peso-extra); font-size:var(--tv-txt-h2);
        line-height:var(--tv-alto-apretado); letter-spacing:var(--tv-track-h2) }
.tv-h3{ font-weight:var(--tv-peso-fuerte); font-size:var(--tv-txt-h3);
        line-height:1.3; letter-spacing:var(--tv-track-h3) }

/* Entradilla: el párrafo grande que va bajo un titular */
.tv-lead{
  font-size: var(--tv-txt-lg);
  line-height:1.6;
  color: var(--tv-texto-suave);
  max-width: 60ch;
  margin:0;
}

/* Antetítulo: la etiqueta roja en mayúsculas sobre el titular */
.tv-eyebrow{
  display:flex; align-items:center; gap:var(--tv-e3);
  font-size:12px; font-weight:var(--tv-peso-fuerte);
  letter-spacing:var(--tv-track-etiqueta); text-transform:uppercase;
  color: var(--tv-acento-texto);
  margin:0 0 var(--tv-e5);
}
.tv-eyebrow::before{ content:""; width:28px; height:2px; background:currentColor; flex:none }

/* Palabra destacada dentro de un titular */
.tv-hl{ font-style:normal; color: var(--tv-acento-texto) }

/* Texto pequeño de apoyo y notas de fuente */
.tv-nota{ font-size:var(--tv-txt-xs); line-height:1.5; color:var(--tv-texto-suave); margin:0 }

.tv-enlace{
  color: var(--tv-acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--tv-rapido) var(--tv-ease);
}
.tv-enlace:hover{ color: var(--tv-rojo) }

/* ==========================================================================
   4. DISPOSICIÓN
   ========================================================================== */

.tv-contenedor{ width:100%; max-width:var(--tv-ancho); margin-inline:auto; padding-inline:var(--tv-margen) }
.tv-seccion{ padding-block: var(--tv-seccion) }

.tv-pila{ display:flex; flex-direction:column; gap:var(--tv-e4) }
.tv-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--tv-e3) }

.tv-grid{ display:grid; gap:var(--tv-e5) }
.tv-grid--2{ grid-template-columns:repeat(2,1fr) }
.tv-grid--3{ grid-template-columns:repeat(3,1fr) }
.tv-grid--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:920px){
  .tv-grid--3,.tv-grid--4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:620px){
  .tv-grid--2,.tv-grid--3,.tv-grid--4{ grid-template-columns:1fr }
}

/* ==========================================================================
   5. BOTONES
   Un solo botón primario por pantalla. El resto, secundarios.
   ========================================================================== */

.tv-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--tv-e3);
  font-family:var(--tv-fuente); font-weight:var(--tv-peso-fuerte);
  font-size:.93rem; line-height:1;
  padding:15px var(--tv-e8);
  border-radius:var(--tv-radio-full);
  border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-align:center;
  transition: background var(--tv-rapido) var(--tv-ease),
              border-color var(--tv-rapido) var(--tv-ease),
              color var(--tv-rapido) var(--tv-ease),
              transform var(--tv-rapido) var(--tv-ease),
              box-shadow var(--tv-rapido) var(--tv-ease);
}
.tv-btn svg{ width:16px; height:16px; flex:none; transition:transform var(--tv-normal) var(--tv-ease) }
.tv-btn:hover svg{ transform:translateX(4px) }
.tv-btn:active{ transform:scale(.97) }
.tv-btn[disabled],.tv-btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; pointer-events:none;
}

/* Primario: fondo rojo, texto BLANCO PURO (el hueso no alcanza el contraste) */
.tv-btn--primario{ background:var(--tv-rojo); color:#fff; border-color:var(--tv-rojo) }
.tv-btn--primario:hover{
  background:var(--tv-rojo-oscuro); border-color:var(--tv-rojo-oscuro);
  box-shadow:var(--tv-sombra-roja); transform:translateY(-2px);
}

/* Secundario: contorno. Sirve en superficie clara y oscura. */
.tv-btn--secundario{ background:transparent; color:var(--tv-texto-fuerte); border-color:var(--tv-borde) }
.tv-btn--secundario:hover{
  border-color:var(--tv-texto-fuerte); background:var(--tv-texto-fuerte);
  color:var(--tv-fondo); transform:translateY(-2px);
}

/* Fantasma: para fondos oscuros o sobre imagen */
.tv-btn--fantasma{ background:transparent; color:#fff; border-color:rgba(250,250,248,.3) }
.tv-btn--fantasma:hover{ border-color:#fff; background:rgba(250,250,248,.1); transform:translateY(-2px) }

/* Blanco: para fondos rojos o fotografías oscuras */
.tv-btn--blanco{ background:#fff; color:var(--tv-rojo-oscuro); border-color:#fff }
.tv-btn--blanco:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(0,0,0,.4) }

/* Sólo texto */
.tv-btn--texto{ background:transparent; color:var(--tv-acento-texto); border-color:transparent; padding-inline:var(--tv-e3) }
.tv-btn--texto:hover{ background:var(--tv-rojo-claro) }
.tv-oscuro .tv-btn--texto:hover{ background:rgba(226,35,26,.15) }

.tv-btn--sm{ padding:10px var(--tv-e5); font-size:.84rem }
.tv-btn--lg{ padding:18px var(--tv-e10); font-size:1rem }
.tv-btn--bloque{ display:flex; width:100% }

/* ==========================================================================
   6. FORMULARIOS
   ========================================================================== */

.tv-campo{ margin-bottom:var(--tv-e5) }

.tv-label{
  display:block;
  font-weight:var(--tv-peso-semi); font-size:.74rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--tv-texto-suave);
  margin-bottom:var(--tv-e2);
}
.tv-label .tv-req{ color:var(--tv-acento-texto); margin-left:2px }

.tv-input,.tv-select,.tv-textarea{
  width:100%;
  padding:13px var(--tv-e4);
  font-family:var(--tv-fuente); font-size:.96rem; color:var(--tv-texto-fuerte);
  background:var(--tv-fondo);
  border:1.5px solid var(--tv-borde);
  border-radius:var(--tv-radio-sm);
  transition:border-color var(--tv-rapido), background var(--tv-rapido), box-shadow var(--tv-rapido);
}
.tv-textarea{ resize:vertical; min-height:104px; line-height:1.5 }
.tv-input::placeholder,.tv-textarea::placeholder{ color:var(--tv-texto-suave); opacity:.7 }

.tv-input:focus,.tv-select:focus,.tv-textarea:focus{
  outline:none;
  border-color:var(--tv-rojo);
  background:var(--tv-fondo-elevado);
  box-shadow:0 0 0 4px rgba(226,35,26,.10);
}
.tv-input[disabled],.tv-select[disabled],.tv-textarea[disabled]{ opacity:.5; cursor:not-allowed }

/* Estado de error: color + icono + texto. Nunca sólo color. */
.tv-input[aria-invalid="true"],.tv-select[aria-invalid="true"],.tv-textarea[aria-invalid="true"]{
  border-color:var(--tv-error);
  box-shadow:0 0 0 4px rgba(168,25,19,.10);
}
.tv-ayuda{ display:block; font-size:var(--tv-txt-xs); color:var(--tv-texto-suave); margin-top:6px }
.tv-error-msg{
  display:flex; align-items:center; gap:6px;
  font-size:var(--tv-txt-xs); font-weight:var(--tv-peso-semi);
  color:var(--tv-error); margin-top:6px;
}
.tv-error-msg::before{ content:"!"; flex:none;
  width:14px; height:14px; border-radius:50%; background:var(--tv-error); color:#fff;
  font-size:10px; line-height:14px; text-align:center; font-weight:700 }

/* Casilla y radio */
.tv-check,.tv-radio{
  display:flex; align-items:flex-start; gap:var(--tv-e3);
  font-size:.94rem; cursor:pointer; margin-bottom:var(--tv-e3);
}
.tv-check input,.tv-radio input{
  appearance:none; -webkit-appearance:none;
  flex:none; width:20px; height:20px; margin:1px 0 0;
  border:1.5px solid var(--tv-borde); background:var(--tv-fondo-elevado);
  cursor:pointer; transition:all var(--tv-rapido) var(--tv-ease);
}
.tv-check input{ border-radius:5px }
.tv-radio input{ border-radius:50% }
.tv-check input:checked,.tv-radio input:checked{ background:var(--tv-rojo); border-color:var(--tv-rojo) }
.tv-check input:checked::after{
  content:""; display:block; width:5px; height:9px; margin:3px auto 0;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.tv-radio input:checked::after{
  content:""; display:block; width:7px; height:7px; margin:5px auto 0;
  border-radius:50%; background:#fff;
}

/* Interruptor */
.tv-switch{ display:flex; align-items:center; gap:var(--tv-e3); cursor:pointer; font-size:.94rem }
.tv-switch input{
  appearance:none; -webkit-appearance:none;
  flex:none; width:44px; height:24px; border-radius:var(--tv-radio-full);
  background:var(--tv-gris-deco); cursor:pointer; position:relative;
  transition:background var(--tv-rapido) var(--tv-ease);
}
.tv-switch input::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform var(--tv-rapido) var(--tv-ease);
}
.tv-switch input:checked{ background:var(--tv-rojo) }
.tv-switch input:checked::after{ transform:translateX(20px) }

/* ==========================================================================
   7. TARJETAS
   ========================================================================== */

.tv-card{
  background:var(--tv-fondo-elevado);
  border:1px solid var(--tv-borde);
  border-radius:var(--tv-radio-lg);
  padding:var(--tv-e8);
  transition:transform var(--tv-normal) var(--tv-ease),
             box-shadow var(--tv-normal) var(--tv-ease),
             border-color var(--tv-normal) var(--tv-ease);
}
.tv-card--hover:hover{ transform:translateY(-5px); box-shadow:var(--tv-sombra) }
.tv-card__ico{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--tv-tinta); color:#fff;
  margin-bottom:var(--tv-e5);
  transition:background var(--tv-normal) var(--tv-ease);
}
.tv-card--hover:hover .tv-card__ico{ background:var(--tv-rojo) }
.tv-card__ico svg{ width:22px; height:22px; stroke-width:1.8 }
.tv-card h3,.tv-card .tv-h3{ margin-bottom:var(--tv-e3) }
.tv-card p{ color:var(--tv-texto-suave); font-size:.95rem; margin:0 }

/* ==========================================================================
   8. ETIQUETAS Y PÍLDORAS
   ========================================================================== */

.tv-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:var(--tv-peso-fuerte);
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--tv-radio-full);
  border:1px solid transparent;
}
.tv-badge--rojo{ background:var(--tv-rojo-claro); color:var(--tv-rojo-oscuro) }
.tv-badge--contorno{ border-color:var(--tv-acento); color:var(--tv-acento-texto); background:transparent }
.tv-badge--neutro{ background:var(--tv-fondo); color:var(--tv-texto-suave); border-color:var(--tv-borde) }
.tv-badge--exito{ background:rgba(15,123,79,.12); color:var(--tv-exito) }
.tv-badge--aviso{ background:rgba(138,82,0,.12); color:var(--tv-aviso) }
.tv-badge--error{ background:rgba(168,25,19,.12); color:var(--tv-error) }

/* Píldora neutra para listar características */
.tv-tag{
  display:inline-block;
  font-size:.78rem; font-weight:var(--tv-peso-semi);
  color:var(--tv-texto);
  background:var(--tv-fondo);
  border:1px solid var(--tv-borde);
  padding:5px 12px; border-radius:var(--tv-radio-full);
}

/* ==========================================================================
   9. AVISOS
   Siempre con icono o título: el color solo no comunica.
   ========================================================================== */

.tv-aviso{
  display:flex; gap:var(--tv-e4);
  padding:var(--tv-e5) var(--tv-e6);
  border-radius:var(--tv-radio);
  border:1px solid var(--tv-borde);
  background:var(--tv-fondo-elevado);
  font-size:.94rem;
}
.tv-aviso__ico{ flex:none; width:22px; height:22px; margin-top:1px }
.tv-aviso strong{ display:block; font-weight:var(--tv-peso-fuerte); color:var(--tv-texto-fuerte); margin-bottom:2px }
.tv-aviso p{ margin:0; color:var(--tv-texto-suave) }
.tv-aviso--info{  border-left:3px solid var(--tv-info);  }
.tv-aviso--exito{ border-left:3px solid var(--tv-exito); }
.tv-aviso--alerta{border-left:3px solid var(--tv-aviso); }
.tv-aviso--error{ border-left:3px solid var(--tv-error); }
.tv-aviso--info  .tv-aviso__ico{ color:var(--tv-info) }
.tv-aviso--exito .tv-aviso__ico{ color:var(--tv-exito) }
.tv-aviso--alerta .tv-aviso__ico{ color:var(--tv-aviso) }
.tv-aviso--error .tv-aviso__ico{ color:var(--tv-error) }

/* ==========================================================================
   10. TABLAS
   ========================================================================== */

.tv-tabla{ width:100%; border-collapse:collapse; font-size:.94rem }
.tv-tabla th,.tv-tabla td{
  padding:14px var(--tv-e5); text-align:left;
  border-bottom:1px solid var(--tv-borde);
}
.tv-tabla th{
  font-weight:var(--tv-peso-fuerte); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tv-texto-fuerte);
}
.tv-tabla td{ color:var(--tv-texto-suave) }
.tv-tabla td:first-child{ color:var(--tv-texto-fuerte); font-weight:var(--tv-peso-semi) }
.tv-tabla tr:last-child td{ border-bottom:0 }

/* En móvil la tabla se apila. Cada celda necesita data-label. */
@media (max-width:700px){
  .tv-tabla--apila,.tv-tabla--apila tbody,.tv-tabla--apila tr,.tv-tabla--apila td{ display:block; width:100% }
  .tv-tabla--apila thead{ display:none }
  .tv-tabla--apila tr{ border-bottom:1px solid var(--tv-borde); padding:var(--tv-e3) 0 }
  .tv-tabla--apila td{ border:0; padding:5px var(--tv-e4) }
  .tv-tabla--apila td::before{ content:attr(data-label) ": "; color:var(--tv-texto-fuerte); font-weight:var(--tv-peso-semi) }
  .tv-tabla--apila td:first-child::before{ content:"" }
}

/* ==========================================================================
   11. MARCA
   ========================================================================== */

/* El logo nunca se estira ni se recolorea: use el SVG que corresponda.
   Tamaño mínimo legible: 90px de ancho. Aire libre alrededor: la altura
   del isotipo por cada lado. */
.tv-logo{ display:inline-block; height:34px; width:auto }
.tv-logo--lg{ height:46px }
.tv-logo--sm{ height:26px }
.tv-isotipo{ display:inline-block; height:40px; width:auto; border-radius:50% }

/* Marcas de producto: miPBX, miSMS, miAgente, miOmni, mi600, miConecta.
   Siempre "mi" en el color del texto y el resto en rojo, sin espacio. */
.tv-mi{
  font-family:var(--tv-fuente); font-weight:var(--tv-peso-extra);
  letter-spacing:-.03em; color:var(--tv-texto-fuerte);
}
.tv-mi b{ font-weight:var(--tv-peso-extra); color:var(--tv-acento-texto) }

/* Píldora de teléfono */
.tv-tel{
  display:inline-flex; align-items:center; gap:var(--tv-e3);
  padding:12px var(--tv-e6) 12px 12px;
  border-radius:var(--tv-radio-full);
  border:1px solid var(--tv-borde); background:var(--tv-fondo-elevado);
  transition:border-color var(--tv-normal) var(--tv-ease), transform var(--tv-normal) var(--tv-ease);
}
.tv-tel:hover{ border-color:var(--tv-rojo); transform:translateY(-2px) }
.tv-tel__ico{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--tv-rojo); color:#fff;
}
.tv-tel__ico svg{ width:17px; height:17px; stroke-width:2 }
.tv-tel__label{ display:block; font-size:.66rem; font-weight:var(--tv-peso-semi);
  letter-spacing:.14em; text-transform:uppercase; color:var(--tv-texto-suave) }
.tv-tel__num{ display:block; font-weight:var(--tv-peso-extra); font-size:1.2rem;
  letter-spacing:-.02em; color:var(--tv-texto-fuerte); white-space:nowrap; line-height:1.15 }

/* Cifra destacada */
.tv-kpi__n{
  font-weight:var(--tv-peso-extra); font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1; letter-spacing:-.035em; color:var(--tv-texto-fuerte);
}
.tv-kpi__n span{ color:var(--tv-acento) }
.tv-kpi__l{ margin-top:var(--tv-e2); font-size:.85rem; line-height:1.45; color:var(--tv-texto-suave) }

/* ==========================================================================
   12. NAVEGACIÓN
   ========================================================================== */

.tv-nav{ display:flex; align-items:center; gap:var(--tv-e8); height:76px }
.tv-nav__menu{ display:flex; align-items:center; gap:var(--tv-e6); margin-left:auto }
.tv-nav__menu a{
  position:relative; font-size:.9rem; font-weight:var(--tv-peso-medio);
  color:var(--tv-texto); text-decoration:none; padding-block:4px;
  transition:color var(--tv-rapido);
}
.tv-nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--tv-rojo); transition:width var(--tv-normal) var(--tv-ease);
}
.tv-nav__menu a:hover{ color:var(--tv-texto-fuerte) }
.tv-nav__menu a:hover::after{ width:100% }

/* ==========================================================================
   13. PESTAÑAS
   ========================================================================== */

.tv-tabs{
  display:flex; gap:var(--tv-e2);
  border-bottom:1px solid var(--tv-borde);
  /* Si no caben, se deslizan. Nunca empujan el ancho de la página. */
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tv-tabs::-webkit-scrollbar{ display:none }
.tv-tabs button{
  flex:none;
  font-family:var(--tv-fuente); font-weight:var(--tv-peso-semi); font-size:.92rem;
  color:var(--tv-texto-suave); background:none; border:0; cursor:pointer;
  padding:var(--tv-e3) var(--tv-e5); border-bottom:2px solid transparent;
  transition:color var(--tv-rapido), border-color var(--tv-rapido);
}
.tv-tabs button:hover{ color:var(--tv-texto-fuerte) }
.tv-tabs button[aria-selected="true"]{ color:var(--tv-texto-fuerte); border-bottom-color:var(--tv-rojo) }

/* ==========================================================================
   14. CARGA
   ========================================================================== */

.tv-spinner{
  display:inline-block; width:22px; height:22px; border-radius:50%;
  border:2.5px solid var(--tv-borde); border-top-color:var(--tv-rojo);
  animation:tv-girar .8s linear infinite;
}
@keyframes tv-girar{ to{ transform:rotate(360deg) } }

.tv-skeleton{
  border-radius:var(--tv-radio-sm);
  background:linear-gradient(90deg, var(--tv-borde) 25%, var(--tv-fondo) 50%, var(--tv-borde) 75%);
  background-size:200% 100%;
  animation:tv-brillo 1.4s ease-in-out infinite;
}
@keyframes tv-brillo{ to{ background-position:-200% 0 } }

/* Indicador de estado en vivo */
.tv-punto{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--tv-exito); flex:none;
  box-shadow:0 0 0 0 rgba(15,123,79,.55);
  animation:tv-latido 2.4s infinite;
}
@keyframes tv-latido{
  0%{ box-shadow:0 0 0 0 rgba(15,123,79,.5) }
  70%{ box-shadow:0 0 0 11px rgba(15,123,79,0) }
  100%{ box-shadow:0 0 0 0 rgba(15,123,79,0) }
}

/* ==========================================================================
   15. UTILIDADES
   ========================================================================== */

/* Oculto a la vista pero legible por lectores de pantalla */
.tv-solo-lectores{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Enlace para saltar al contenido: póngalo como primer elemento del body */
.tv-saltar{
  position:absolute; left:-9999px; top:0; z-index:var(--tv-z-aviso);
  background:var(--tv-rojo); color:#fff; padding:12px 22px;
  border-radius:0 0 var(--tv-radio-sm) 0;
  font-weight:var(--tv-peso-fuerte); font-size:.9rem; text-decoration:none;
}
.tv-saltar:focus{ left:0 }

.tv-centro{ text-align:center }
.tv-mt0{ margin-top:0 } .tv-mt2{ margin-top:var(--tv-e2) } .tv-mt4{ margin-top:var(--tv-e4) }
.tv-mt6{ margin-top:var(--tv-e6) } .tv-mt8{ margin-top:var(--tv-e8) } .tv-mt12{ margin-top:var(--tv-e12) }
.tv-mb0{ margin-bottom:0 } .tv-mb4{ margin-bottom:var(--tv-e4) } .tv-mb8{ margin-bottom:var(--tv-e8) }