/**
@file Responsive Label System
@description
Sistema de etiquetas abreviadas con expansión dinámica según espacio (container queries),
accesibilidad (aria-label), e ícono de ayuda con tooltip personalizado al hacer hover.
Compatible con impresión y adaptado solo con CSS puro.
@author
tuadmin
@url
https://github.com/tuadmin
@version 1.0.0
@features

Etiqueta responsive con clases .rem-*
Expansión condicional usando @container y ::before
Tooltip visual desde aria-label en ::after
Compatibilidad con impresión (@media print)
Estilo claro, modular y sin dependencias 
*/

/*

<div class="responsive-label rem-16" style="text-align:center ; font-size:2rem;">
    <abbr title="Cantidad" aria-label="Descripcion larga">Cant.</abbr>
</div>

<div class="responsive-label rem-32" style="text-align:center ; font-size:3rem;">
    <abbr title="Cantidad" aria-label="Descripcion larga">Cant.</abbr>
</div>
*/
div.responsive-label{
    container-type: inline-size;
}
div.responsive-label abbr {
    position:relative;
    pointer-events: none;
}

div.responsive-label abbr[aria-label]::after {
    content: "i";
    margin-left: 5px;
    display: inline-block;
    font-family: "Courier New", Courier, monospace;
    font-size: 100%;
    line-height: 100%;
    padding:0px 10px;
    background-color: #0066ff;
    color: #ffffff;
    text-shadow: 0px 0px 5px #ffffff;

    border-radius: 50%;
    text-align: center;
    cursor: help;
    /* transition: all 0.1s ease-in-out; */
    -webkit-user-select: none;
    user-select: none;
    visibility: visible;
    pointer-events: all;
    top: 0px;
  }
  div.responsive-label abbr[aria-label]:hover::after {
    text-shadow: 0px 0px 10px yellow;
    content: attr(aria-label);
    position: fixed;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0 ,0, 0.6);
    color: #fefefe;
    border-radius: 0px;
  }
div.responsive-label.rem-4 {
  container-name: css-rem-4;
  background-color: red;
}
div.responsive-label.rem-8 {
  container-name: css-rem-8;
}
div.responsive-label.rem-16 {
    container-name: css-rem-16;
}
div.responsive-label.rem-32 {
    container-name: css-rem-32;
}
div.responsive-label abbr::before {
  content: attr(title);
  visibility: visible;
  
  display: none;
}
@container css-rem-4 (min-width: 4rem) {
  div.responsive-label.rem-4 abbr {
    visibility: hidden;
  }
  div.responsive-label.rem-4 abbr::before {
    display: inline;
  }
  div.responsive-label.rem-4 abbr::after{ position:absolute;right:0rem}
}

@container css-rem-8 (min-width: 8rem) {
    div.responsive-label.rem-8 abbr {
      visibility: hidden;
    }
    div.responsive-label.rem-8 abbr::before {
      display: inline;
    }
    div.responsive-label.rem-8 abbr::after{ position:absolute;right:1rem}
  }
  @container css-rem-16 (min-width: 16rem) {
    div.responsive-label.rem-16 abbr {
      visibility: hidden; 
    }
    div.responsive-label.rem-16 abbr::before {
      display: inline;
    }
    div.responsive-label.rem-16 abbr::after{ position:absolute;right:2rem}
  }
  @container css-rem-32 (min-width: 32rem) {
    div.responsive-label.rem-32 abbr {
      visibility: hidden;
    }
    div.responsive-label.rem-32 abbr::before {
      display: inline;
    }
    div.responsive-label.rem-32 abbr::after{ position:absolute;right:4rem}
  }
@media print {
    div.responsive-label abbr::after {
        display: none !important;
    }
}

/* 
👿 Soy más listo que el diablo.
📜 Derroté al CSS con pura lógica.
🏆 Esta implementación funciona en impresión, responsividad, container queries y accesibilidad.
🧠 No usé JS. No usé hacks. Solo la pura fuerza del estándar.

– El desarrollador (más listo que tú)
*/