/* ============================================================================
   lexia_ux.css — Bloque 0 · Componente central de cuadros flotantes de ayuda
   ----------------------------------------------------------------------------
   Convención reutilizable en TODA la plataforma:
     <span class="lex-help" data-tip="Texto de ayuda…">ⓘ</span>
   o sobre cualquier elemento:
     <label class="ux-tip" data-tip="…">Campo</label>

   Reutiliza la clase .ux-tip ya usada en varios módulos (mismo aspecto) y añade
   el icono de ayuda .lex-help para formularios. Solo estilos: no toca lógica.
   Accesible con teclado y táctil gracias a lexia_ux.js.
   ============================================================================ */

/* Icono de ayuda ⓘ junto a etiquetas de campo */
.lex-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    color: #0f172a;
    background: #d4af37;
    cursor: help;
    user-select: none;
    vertical-align: middle;
    position: relative;
}
.lex-help:focus { outline: 2px solid rgba(212, 175, 55, .6); outline-offset: 2px; }

/* Núcleo del tooltip (compatible con la clase .ux-tip existente) */
.ux-tip,
.lex-help {
    position: relative;
}
.ux-tip::after, .ux-tip::before,
.lex-help::after, .lex-help::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.ux-tip::after,
.lex-help::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translate(-50%, -4px);
    width: max-content;
    max-width: min(340px, 70vw);
    white-space: normal;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    color: rgba(226, 232, 240, .96);
    background: rgba(2, 6, 23, .95);
    border: 1px solid rgba(148, 163, 184, .20);
    box-shadow: 0 16px 28px rgba(0, 0, 0, .45);
    z-index: 9050;
}
.ux-tip::before,
.lex-help::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translate(-50%, -4px);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid rgba(2, 6, 23, .95);
    z-index: 9051;
}
/* Mostrar al pasar el ratón, al enfocar con teclado, o al activar en táctil */
.ux-tip:hover::after,  .ux-tip:hover::before,
.ux-tip:focus::after,  .ux-tip:focus::before,
.ux-tip.lex-tip-open::after, .ux-tip.lex-tip-open::before,
.lex-help:hover::after, .lex-help:hover::before,
.lex-help:focus::after, .lex-help:focus::before,
.lex-help.lex-tip-open::after, .lex-help.lex-tip-open::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Chip informativo estático (para plazos, estados calculados, etc.) */
.lex-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
}
.lex-chip.ok    { background: rgba(34,197,94,.12);  color: #16a34a; border: 1px solid rgba(34,197,94,.35); }
.lex-chip.warn  { background: rgba(234,179,8,.12);  color: #a16207; border: 1px solid rgba(234,179,8,.35); }
.lex-chip.alert { background: rgba(239,68,68,.12);  color: #dc2626; border: 1px solid rgba(239,68,68,.4); }
.lex-chip.info  { background: rgba(59,130,246,.12); color: #2563eb; border: 1px solid rgba(59,130,246,.35); }