/* ==========================================================================
   Utilidades — clases auxiliares para reemplazar `style="..."` inline.
   ==========================================================================
   Se usan con prefijo `u-` (validado por flora:check). Estas son las
   utilidades más frecuentes que aparecían inline en el proyecto. Si una
   no encaja, agregala acá en lugar de poner `style="..."`.

   Convención:
     • u-text-{tamano}  → tamaño tipográfico
     • u-text-{tono}    → color
     • u-flex / u-grid  → layout
     • u-gap-{n}        → spacing del flex/grid
     • u-mt-{n} u-mb-{n}→ márgenes top/bottom
     • u-hidden         → display:none
     • u-text-center    → text-align
   ========================================================================== */

/* ── Tipografía ─────────────────────────────────────────────────────── */
.u-text-xs    { font-size: var(--fl-texto-xs); }
.u-text-sm    { font-size: var(--fl-texto-sm); }
.u-text-base  { font-size: var(--fl-texto-base); }
.u-text-lg    { font-size: var(--fl-texto-lg); }
.u-text-xl    { font-size: var(--fl-texto-xl); }

.u-peso-medio     { font-weight: var(--fl-peso-medio); }
.u-peso-semibold  { font-weight: var(--fl-peso-semibold); }
.u-peso-bold      { font-weight: var(--fl-peso-bold); }

/* ── Color de texto ─────────────────────────────────────────────────── */
.u-texto         { color: var(--fl-texto); }
.u-texto-fuerte  { color: var(--fl-texto-fuerte); }
.u-texto-suave   { color: var(--fl-texto-suave); }
.u-texto-tenue   { color: var(--fl-texto-tenue); }
.u-texto-acento  { color: var(--fl-acento); }
.u-texto-error   { color: var(--fl-error); }
.u-texto-exito   { color: var(--fl-exito); }

/* ── Alineación ─────────────────────────────────────────────────────── */
.u-text-left    { text-align: left; }
.u-text-center  { text-align: center; }
.u-text-right   { text-align: right; }

/* ── Display / layout ───────────────────────────────────────────────── */
.u-hidden       { display: none !important; }
.u-block        { display: block; }
.u-inline       { display: inline; }
.u-inline-block { display: inline-block; }
.u-flex         { display: flex; }
.u-inline-flex  { display: inline-flex; }
.u-grid         { display: grid; }

.u-flex-center  { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.u-flex-col     { display: flex; flex-direction: column; }

.u-items-center { align-items: center; }
.u-items-start  { align-items: flex-start; }
.u-items-end    { align-items: flex-end; }

.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }

.u-flex-wrap   { flex-wrap: wrap; }
.u-flex-nowrap { flex-wrap: nowrap; }
.u-flex-1      { flex: 1 1 0%; min-width: 0; }
.u-grow        { flex-grow: 1; }
.u-shrink-0    { flex-shrink: 0; }

/* Grids responsive típicos del proyecto */
.u-grid-auto-180 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.u-grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.u-grid-auto-220 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.u-grid-auto-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.u-grid-auto-260 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.u-grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.u-grid-auto-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ── Gap (flex/grid) ─────────────────────────────────────────────────── */
.u-gap-1   { gap: var(--fl-sp-1); }
.u-gap-2   { gap: var(--fl-sp-2); }
.u-gap-3   { gap: var(--fl-sp-3); }
.u-gap-4   { gap: var(--fl-sp-4); }
.u-gap-5   { gap: var(--fl-sp-5); }
.u-gap-6   { gap: var(--fl-sp-6); }

/* ── Margen ──────────────────────────────────────────────────────────── */
.u-m-0    { margin: 0; }
.u-mt-0   { margin-top: 0; }
.u-mt-1   { margin-top: var(--fl-sp-1); }
.u-mt-2   { margin-top: var(--fl-sp-2); }
.u-mt-3   { margin-top: var(--fl-sp-3); }
.u-mt-4   { margin-top: var(--fl-sp-4); }
.u-mt-5   { margin-top: var(--fl-sp-5); }
.u-mt-6   { margin-top: var(--fl-sp-6); }
.u-mb-0   { margin-bottom: 0; }
.u-mb-1   { margin-bottom: var(--fl-sp-1); }
.u-mb-2   { margin-bottom: var(--fl-sp-2); }
.u-mb-3   { margin-bottom: var(--fl-sp-3); }
.u-mb-4   { margin-bottom: var(--fl-sp-4); }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-ml-auto { margin-left: auto; }
.u-mr-auto { margin-right: auto; }

/* ── Padding ─────────────────────────────────────────────────────────── */
.u-p-0   { padding: 0; }
.u-p-1   { padding: var(--fl-sp-1); }
.u-p-2   { padding: var(--fl-sp-2); }
.u-p-3   { padding: var(--fl-sp-3); }
.u-p-4   { padding: var(--fl-sp-4); }

/* ── Cursor ──────────────────────────────────────────────────────────── */
.u-cursor-pointer { cursor: pointer; }

/* ── Decoración ──────────────────────────────────────────────────────── */
.u-no-underline    { text-decoration: none; }
.u-link-acento     { color: var(--fl-acento-texto); text-decoration: underline; }
.u-link-acento:hover { text-decoration: none; }
.u-link-acento--limpio { color: var(--fl-acento-texto); text-decoration: none; }

/* ── Tarjetas / contenedores ────────────────────────────────────────── */
.u-borde         { border: 1px solid var(--fl-borde); }
.u-borde-sutil   { border: 1px solid var(--fl-borde-sutil); }
.u-radio-md      { border-radius: var(--fl-r-md); }
.u-radio-lg      { border-radius: var(--fl-r-lg); }
.u-radio-full    { border-radius: 9999px; }
.u-fondo-sutil   { background: var(--fl-fondo-sutil); }
.u-superficie    { background: var(--fl-superficie); }

/* ── Patrón "ícono dentro de cuadrado coloreado" (común en cards) ───── */
.u-icono-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--fl-r-md);
    background: var(--fl-acento-suave);
    color: var(--fl-acento-texto);
    flex-shrink: 0;
}
.u-icono-tile--lg {
    width: 56px;
    height: 56px;
}

/* ── Word-break para textos largos ───────────────────────────────────── */
.u-break-words { overflow-wrap: anywhere; word-break: break-word; }

/* ── Bulk actions en tablas (app-tabla-bulk.js) ──────────────────────── */
.app-bulk-col {
    width: 36px;
    text-align: center;
    padding: var(--fl-sp-1) var(--fl-sp-2) !important;
}
.app-bulk-col input[type="checkbox"] {
    cursor: pointer;
    width: 18px; height: 18px;
    accent-color: var(--fl-acento, #2B4A38);
}

.app-bulk-barra {
    position: fixed;
    bottom: var(--fl-sp-5);
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 30px));
    z-index: 95;
    background: var(--fl-acento-900, #1A2E22);
    color: #F4EFE6;
    padding: var(--fl-sp-2) var(--fl-sp-4);
    border-radius: var(--fl-r-full, 999px);
    box-shadow: 0 16px 40px -10px rgb(0 0 0 / 0.5);
    display: flex;
    align-items: center;
    gap: var(--fl-sp-4);
    transition: transform 220ms cubic-bezier(.16,1,.3,1), opacity 220ms;
    opacity: 0;
}
.app-bulk-barra.activa {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.app-bulk-conteo {
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-medio);
}
.app-bulk-conteo strong {
    color: #C88A0A;
    font-weight: var(--fl-peso-bold);
}
.app-bulk-acciones {
    display: flex;
    gap: var(--fl-sp-2);
}
@media (prefers-reduced-motion: reduce) {
    .app-bulk-barra { transition: opacity 100ms; }
}
@media print {
    .app-bulk-barra { display: none !important; }
}

/* ── ID badge — chip discreto con el ID de BD (#123) ──────────────────
   Aparece en tablas, headers de show, breadcrumbs de edit, etc. para
   identificar el registro inequívocamente. Pequeño, monoespaciado, color
   tenue — nunca compite con el contenido principal pero siempre presente.
   ──────────────────────────────────────────────────────────────────── */
.app-id-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: var(--fl-fondo-sutil);
    border: 1px solid var(--fl-borde-sutil);
    border-radius: var(--fl-r-sm, 4px);
    font-family: var(--fl-fuente-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: var(--fl-texto-2xs, 10px);
    font-weight: var(--fl-peso-medio);
    color: var(--fl-texto-tenue);
    line-height: 1.4;
    letter-spacing: 0.02em;
    cursor: help;
    user-select: all; /* permite copy-paste rápido */
    white-space: nowrap;
    vertical-align: middle;
    margin-left: var(--fl-sp-2);
}
.app-id-badge:hover {
    background: var(--fl-fondo-sutil);
    color: var(--fl-texto-suave);
    border-color: var(--fl-borde);
}
.app-id-badge--sm {
    font-size: 9px;
    padding: 0 5px;
}
.app-id-badge--lg {
    font-size: var(--fl-texto-xs);
    padding: 2px 8px;
}
.app-id-badge--inline {
    margin: 0;
}

/* En print, el badge se muestra plano */
@media print {
    .app-id-badge {
        background: transparent;
        border: 0;
        color: #888 !important;
        padding: 0;
    }
}

/* La versión vieja `app-tabla-id` se aliasea para no romper nada existente */
.app-tabla-id { /* legacy alias — equivalente a app-id-badge en contexto de tabla */
    color: var(--fl-texto-tenue);
    font-family: var(--fl-fuente-mono, ui-monospace, monospace);
    font-size: var(--fl-texto-2xs, 10px);
    user-select: all;
}

/* ── CUIL segmentado: prefijo - DNI (auto) - verif ──────────────────── */
.app-cuil-wrap {
    display: flex;
    align-items: stretch;
    gap: var(--fl-sp-1);
    width: 100%;
    max-width: 360px;
}
.app-cuil-prefijo,
.app-cuil-verif {
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.app-cuil-prefijo { width: 56px; }
.app-cuil-verif   { width: 44px; }

.app-cuil-dni {
    flex: 1 1 0%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--fl-sp-3);
    background: var(--fl-fondo-sutil);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-md);
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-medio);
    color: var(--fl-texto-fuerte);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    user-select: none;
}
.app-cuil-dni:empty::before,
.app-cuil-dni[data-vacio="1"] {
    color: var(--fl-texto-tenue);
}

.app-cuil-sep {
    display: inline-flex;
    align-items: center;
    color: var(--fl-texto-tenue);
    font-size: var(--fl-texto-base);
    padding: 0 2px;
    user-select: none;
}

/* ── Validación inline (app-validacion-inline.js) ────────────────────── */
.app-campo-invalido {
    border-color: var(--fl-error, #ef4444) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-error, #ef4444) 18%, transparent) !important;
}
.app-campo-error-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--fl-sp-1);
    margin-top: var(--fl-sp-1-5);
    padding: var(--fl-sp-1-5) var(--fl-sp-2-5);
    font-size: var(--fl-texto-xs);
    font-weight: var(--fl-peso-medio);
    color: #991b1b;
    /* Fondo SÓLIDO rojo claro (no transparente) — funciona bien sobre
       cualquier color de página. */
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-left: 3px solid #dc2626;
    border-radius: var(--fl-r-sm, 4px);
    line-height: 1.4;
}
/* Pequeño triangulo de "alerta" antes del mensaje */
.app-campo-error-inline::before {
    content: "⚠";
    font-size: 0.95em;
    line-height: 1.3;
    flex-shrink: 0;
}

/* ── Anchos máximos típicos ─────────────────────────────────────────── */
.u-max-w-prose { max-width: 65ch; }
.u-max-w-sm    { max-width: 380px; }
.u-max-w-md    { max-width: 540px; }
.u-max-w-lg    { max-width: 720px; }

/* ── Focus visible global (a11y) ──────────────────────────────────────
   Asegura que TODO elemento interactivo navegable por teclado tenga un
   anillo de foco visible y consistente. Usa :focus-visible (no :focus)
   para no mostrar el anillo cuando el usuario hace click con mouse.
   ──────────────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--fl-acento, #C88A0A);
    outline-offset: 2px;
    border-radius: var(--fl-r-sm, 4px);
}

/* Para elementos que ya tienen su propio :focus-visible (botones Flora,
   campos, modal cerrar, etc), NO doblar — Flora ya los maneja. Acá
   solo cubrimos los huérfanos: links sin clase, botones crudos, etc. */
.fl-boton:focus-visible,
.fl-campo-entrada:focus-visible,
.fl-modal-cerrar:focus-visible,
.fl-tabla-pag-btn:focus-visible {
    outline: none; /* Flora aplica su propio shadow/borde */
}

/* ── Skip-to-content link (a11y) ─────────────────────────────────────
   Invisible hasta que recibe foco por teclado. Permite a usuarios de
   screen reader / Tab saltearse la navegación e ir directo al main.
   ──────────────────────────────────────────────────────────────────── */
.es-skip-link {
    position: fixed;
    top: -100px;
    left: var(--fl-sp-3);
    z-index: 99999;
    padding: var(--fl-sp-3) var(--fl-sp-5);
    background: var(--fl-acento, #2B4A38);
    color: white;
    border-radius: var(--fl-r-md);
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-bold);
    text-decoration: none;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
    transition: top 180ms cubic-bezier(.16,1,.3,1);
}
.es-skip-link:focus,
.es-skip-link:focus-visible {
    top: var(--fl-sp-3);
    outline: 2px solid #C88A0A;
    outline-offset: 2px;
}
[id="es-main"]:focus { outline: none; }

/* ── Botón flotante "Volver arriba" ───────────────────────────────── */
.es-volver-arriba {
    position: fixed;
    bottom: var(--fl-sp-5);
    right: var(--fl-sp-5);
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(200, 138, 10, .35);
    background: var(--fl-acento, #2B4A38);
    color: #F4EFE6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease, background 150ms;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
}
.es-volver-arriba.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.es-volver-arriba:hover {
    background: #C88A0A;
    color: #1A2E22;
}
.es-volver-arriba:focus-visible {
    outline: 2px solid #C88A0A;
    outline-offset: 3px;
}
.es-volver-arriba svg {
    width: 20px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .es-volver-arriba { transition: opacity 100ms; }
}

@media print {
    .es-volver-arriba { display: none !important; }
}