/* ============================================================
   tooltipTheme.css — Tema global de tooltips para financiApp
   Elemento: .app-tip  (lo crea y posiciona tooltipTheme.js)

   Se aplica solo: cualquier elemento con title="..." pasa a
   mostrar esta tarjeta en lugar del tooltip gris del navegador.
   ============================================================ */

/* El color sale del color de marca del sistema (--sgi-color-rgb,
   definido en style.css): la tarjeta es blanca con un velo de marca
   apenas perceptible, y el filo, la sombra y la línea de acento son
   ese mismo color. Si mañana la marca cambia, el tooltip cambia con
   ella. Lo único que NO se deriva son los estados (éxito/aviso/
   peligro), que deben leerse siempre igual. */
:root {
    --tip-marca:      rgb(var(--sgi-color-rgb, 10, 110, 209));
    /* Único mando del tono: 1 = blanco puro, 0 = color de marca puro.
       .90 deja un tinte suave de marca, el mismo aire que --sgi-color-soft. */
    --tip-velo:       rgba(255, 255, 255, .90);
    --tip-fondo:      linear-gradient(var(--tip-velo), var(--tip-velo)), var(--tip-marca);
    --tip-texto:      #26313f;
    --tip-texto-tenue:#5b6675;
    --tip-titulo:     var(--sgi-color-dark, #085bb0);
    --tip-borde:      rgba(var(--sgi-color-rgb, 10, 110, 209), .26);
    --tip-sombra:     0 12px 28px rgba(var(--sgi-color-rgb, 10, 110, 209), .16),
                      0 2px 6px rgba(15, 23, 42, .10);
    --tip-radio:      9px;
    --tip-ancho:      320px;
    --tip-acento:     var(--tip-marca);
}

/* ── Tarjeta ────────────────────────────────────────────────── */
.app-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100060;              /* por encima de modales, datepicker y SweetAlert */
    max-width: var(--tip-ancho);
    padding: 7px 11px 7px 12px;
    background: var(--tip-fondo);
    color: var(--tip-texto);
    border: 1px solid var(--tip-borde);
    border-left: 3px solid var(--tip-acento);   /* la línea de acento de marca */
    border-radius: var(--tip-radio);
    box-shadow: var(--tip-sombra);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;        /* respeta los saltos de línea del texto */
    word-wrap: break-word;
    pointer-events: none;         /* nunca estorba al cursor */
    opacity: 0;
    transform: translate3d(var(--tip-desliz-x, 0), var(--tip-desliz-y, 4px), 0) scale(.97);
    transition: opacity .13s ease, transform .13s cubic-bezier(.2, .8, .3, 1);
}

.app-tip--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Dirección de la animación según dónde quedó el tooltip */
.app-tip--arriba  { --tip-desliz-y:  4px; }
.app-tip--abajo   { --tip-desliz-y: -4px; }
.app-tip--izq     { --tip-desliz-x:  4px; --tip-desliz-y: 0; }
.app-tip--der     { --tip-desliz-x: -4px; --tip-desliz-y: 0; }

/* ── Flecha ─────────────────────────────────────────────────── */
.app-tip__flecha {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--tip-fondo);
    transform: rotate(45deg);
}
.app-tip--arriba .app-tip__flecha { bottom: -5px; border-right: 1px solid var(--tip-borde); border-bottom: 1px solid var(--tip-borde); }
.app-tip--abajo  .app-tip__flecha { top:    -5px; border-left:  1px solid var(--tip-borde); border-top:    1px solid var(--tip-borde); }
.app-tip--izq    .app-tip__flecha { right:  -5px; border-right: 1px solid var(--tip-borde); border-top:    1px solid var(--tip-borde); }
/* A la derecha el tooltip apoya su borde de acento: la flecha lo continúa */
.app-tip--der    .app-tip__flecha { left: -6px; border-left: 3px solid var(--tip-acento); border-bottom: 3px solid var(--tip-acento); }

/* ── Tooltip con título (data-tip-titulo) ───────────────────── */
.app-tip__titulo {
    display: block;
    margin-bottom: 1px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--tip-titulo);
}
.app-tip__cuerpo {
    display: block;
    font-weight: 400;
    color: var(--tip-texto-tenue);
}

/* ── Variantes (data-tip-variante) ──────────────────────────── */
/* Solo cambian el color de la línea de acento y el del título.
   "info" no aparece aquí: es el estilo por defecto (acento de marca). */
.app-tip--exito   { --tip-acento: #059669; }
.app-tip--aviso   { --tip-acento: #d97706; }
.app-tip--peligro { --tip-acento: #dc2626; }

.app-tip--exito   .app-tip__titulo { color: #047857; }
.app-tip--aviso   .app-tip__titulo { color: #b45309; }
.app-tip--peligro .app-tip__titulo { color: #b91c1c; }

/* ── Atajo visual: elementos con tooltip disponible ─────────── */
/* Texto con ayuda contextual: subrayado punteado discreto */
.tip-ayuda {
    border-bottom: 1px dotted rgba(var(--sgi-color-rgb, 10, 110, 209), .55);
    cursor: help;
}

/* ── Accesibilidad y salida ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .app-tip { transition: opacity .1s linear; transform: none; }
    .app-tip--visible { transform: none; }
}

@media print {
    .app-tip { display: none !important; }
}