/* =============================================================
   Emprendapp · UI v3 — FASE 2
   Tooltips de costos, modales/menús animados, skeletons,
   etiquetas flotantes + validación visual, repaso mobile.
   Se carga DESPUÉS de ui-v3.css.
   ============================================================= */

/* ---------- 1. Tooltips explicativos ---------- */
.tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
    font-size: 11px; font-weight: 700; line-height: 1; cursor: help;
    color: var(--acento); background: var(--acento-tenue);
    border: 1px solid var(--panel-borde); position: relative; vertical-align: middle;
}
.tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    width: max-content; max-width: 260px; padding: 10px 12px;
    font-size: var(--fs-sm); font-weight: 400; line-height: 1.45; text-align: left;
    color: var(--texto); background: var(--panel-solido);
    border: 1px solid var(--panel-borde); border-radius: var(--radio-md);
    box-shadow: var(--glass-sombra); z-index: 50; pointer-events: none;
    opacity: 0; transform: translate(-50%, 6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tip:hover::after, .tip:focus-visible::after, .tip.is-visible::after {
    opacity: 1; transform: translate(-50%, 0);
}
@media (max-width: 600px) {
    .tip::after { left: auto; right: -8px; transform: translate(0, 6px); max-width: 220px; }
    .tip:hover::after, .tip:focus-visible::after, .tip.is-visible::after { transform: translate(0, 0); }
}

/* ---------- 2. Modales animados (abrir y cerrar) ---------- */
@keyframes overlayEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalEntra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes overlaySale { to { opacity: 0; } }
@keyframes modalSale { to { opacity: 0; transform: translateY(12px) scale(.98); } }

.modal-overlay:not([hidden]) { animation: overlayEntra .22s var(--ease) both; }
.modal-overlay:not([hidden]) .modal { animation: modalEntra .28s var(--ease) both; }
.modal-overlay.is-cerrando { animation: overlaySale .18s var(--ease) both; }
.modal-overlay.is-cerrando .modal { animation: modalSale .18s var(--ease) both; }

/* Menú lateral en celular: deslizamiento + fundido del fondo */
.sidebar { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sidebar-overlay:not([hidden]) { animation: overlayEntra .25s var(--ease) both; }
.sidebar-overlay.is-cerrando { animation: overlaySale .2s var(--ease) both; }

/* Resultados que aparecen con suavidad */
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.readout:not([hidden]) { animation: aparece .3s var(--ease) both; }
.readout__lineas li { animation: aparece .3s var(--ease) both; }
.readout__lineas li:nth-child(2) { animation-delay: .04s; }
.readout__lineas li:nth-child(3) { animation-delay: .08s; }
.readout__lineas li:nth-child(4) { animation-delay: .12s; }
.readout__lineas li:nth-child(5) { animation-delay: .16s; }
.readout__lineas li:nth-child(n+6) { animation-delay: .2s; }

/* ---------- 3. Skeletons de carga ---------- */
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton {
    display: block; border-radius: var(--radio-sm); min-height: 14px;
    background: linear-gradient(90deg, var(--panel-borde) 25%, var(--acento-tenue) 50%, var(--panel-borde) 75%);
    background-size: 200% 100%; animation: brillo 1.3s linear infinite;
}
.skeleton-lista { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.skeleton-fila { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.skeleton-fila .skeleton { height: 16px; }
.skeleton--titulo { height: 22px; width: 55%; }
.skeleton--total { height: 34px; width: 70%; margin-top: 8px; }
.is-cargando > .tabla, .is-cargando > table, .is-cargando > .grilla-disenos { display: none; }

/* ---------- 4. Etiquetas flotantes ---------- */
.campo--flotante { position: relative; }
.campo--flotante > label {
    position: absolute; left: 12px; top: 22px; transform: translateY(-50%);
    margin: 0; padding: 0 6px; pointer-events: none; z-index: 1;
    color: var(--texto-tenue); background: transparent; border-radius: 4px;
    max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: top var(--dur) var(--ease), font-size var(--dur) var(--ease),
                color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.campo--flotante > input { padding-top: 14px; }
.campo--flotante > input::placeholder { color: transparent; transition: color var(--dur); }
.campo--flotante:focus-within > input::placeholder { color: var(--texto-tenue); }
.campo--flotante:focus-within > label,
.campo--flotante.is-lleno > label {
    top: 0; font-size: var(--fs-xs); font-weight: 600;
    color: var(--acento); background: var(--panel-solido);
}
.campo--flotante.is-lleno:not(:focus-within) > label { color: var(--texto-tenue); }

/* ---------- 5. Validación visual ---------- */
.campo input.is-invalido, .campo select.is-invalido { border-color: var(--error) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent) !important; }
.campo input.is-valido { border-color: var(--exito); }
.campo--flotante:has(.is-invalido) > label { color: var(--error) !important; }
.campo__error {
    display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--error);
    animation: aparece .2s var(--ease) both;
}
@keyframes sacudir { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.is-sacudir { animation: sacudir .25s var(--ease) 2; }

/* ---------- 6. Repaso para celular ---------- */
@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    .campo input, .campo select, .campo textarea { font-size: 16px; } /* evita zoom en iPhone */
    .panel, .auth-card { padding: var(--esp-4); }
    .campo--doble { grid-template-columns: 1fr !important; }
    .abm__header { flex-direction: column; align-items: stretch; gap: var(--esp-3); }
    .abm__header .boton { width: 100%; }
    .tabla-wrap, .abm table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal {
        width: 100%; max-width: none; max-height: 92vh; overflow-y: auto;
        border-radius: var(--radio-lg) var(--radio-lg) 0 0;
        padding-bottom: calc(var(--esp-5) + env(safe-area-inset-bottom));
    }
    @keyframes modalEntra { from { transform: translateY(100%); } to { transform: none; } }
    @keyframes modalSale { to { transform: translateY(100%); } }
    .readout__lineas li { flex-wrap: wrap; gap: 4px; }
    .readout__total span:last-child { font-size: var(--fs-lg); }
    .sidebar.is-abierto { box-shadow: 0 0 40px rgba(0,0,0,.4); }
    form .boton--primario[type="submit"] { width: 100%; }
}
@media (max-width: 380px) {
    .skeleton-fila { grid-template-columns: 1fr 1fr; }
    .skeleton-fila .skeleton:last-child { display: none; }
}

/* =================================================================
   AJUSTE FINAL: tamaño de logos y encabezado en celular
   (la regla genérica "height:auto" de los logos los agrandaba a
   todo el ancho; acá se fija la altura de cada uno)
   ================================================================= */
img.landing-nav__logo   { height: 34px !important; width: auto !important; max-width: 200px; flex-shrink: 0; }
img.landing-footer__logo{ height: 30px !important; width: auto !important; max-width: 180px; }
img.sidebar__logo       { height: 26px !important; width: auto !important; max-width: 160px; }
img.auth-card__brand    { height: 36px !important; width: auto !important; max-width: 200px; margin: 0 auto; }
img.splash__brand       { height: 48px !important; width: auto !important; max-width: 70vw; }

.landing-nav__inner { gap: 12px; }
.landing-nav__acciones { flex-shrink: 0; flex-wrap: nowrap; }
.landing-nav__acciones .boton { width: auto !important; white-space: nowrap; text-decoration: none; }

@media (max-width: 860px) {
    .landing-nav__acciones .boton--secundario { display: inline-flex; }
}
@media (max-width: 600px) {
    .landing-nav__inner { padding: 0 14px; gap: 8px; }
    img.landing-nav__logo { height: 26px !important; max-width: 130px; }
    .landing-nav__acciones { gap: 6px; }
    .landing-nav__acciones .boton { padding: 8px 10px !important; font-size: 13px; min-height: 0; }
    .boton-tema { width: 34px; height: 34px; font-size: 15px; flex-shrink: 0; }
}
@media (max-width: 380px) {
    img.landing-nav__logo { height: 22px !important; max-width: 104px; }
    .landing-nav__acciones .boton { padding: 7px 8px !important; font-size: 12px; }
}