/* ============================================================
   SISTEMA DE BOTONES IAPOL  (propuesta B + A + C)
   ------------------------------------------------------------
   - .btn-accion            → acciones en tablas y listados (variante TINTE, por defecto)
   - .btn-accion.var-solido → variante SÓLIDA  (para el botón principal de una pantalla)
   - .btn-accion.var-contorno → variante CONTORNO (secundarios, "volver", filtros)
   - .btn-principal         → botón principal de pantalla (sólido pulido, sobre .btn de Bootstrap)

   Mapa de color fijo para toda la app:
     Ver / Editar / Abrir ....... azul institucional  (#1e3a8a)
     Duplicar / Descargar / ZIP . neutro
     Activar / Publicar ......... verde
     Roles / Gestionar ......... ámbar
     Borrar / Baja / Revocar ... rojo   (único color "fuerte" de la fila)

   Se genera desde el helper C#  Html.BotonAccion(...)  →  IAPOLBDV/Helpers/BotonAccionHtmlExtensions.cs
   ============================================================ */

:root {
    --iapol-surface: #ffffff;               /* base sobre la que se calculan los tintes */
    --iapol-navy:    #1e3a8a;
    --iapol-neutral: #475569;
    --iapol-ok:      #147a52;
    --iapol-warn:    #b45309;
    --iapol-bad:     #c0392b;
    --iapol-focus:   #2563eb;
}

/* ---- Pulido global mínimo (afecta a todos los .btn de Bootstrap) ---- */
.btn { font-weight: 600; }
.btn:focus-visible {
    outline: 2px solid var(--iapol-focus);
    outline-offset: 2px;
}

/* ---- Botón principal de pantalla (variante A, sólido pulido) ---- */
.btn-principal {
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(20, 28, 44, .12);
    transition: box-shadow .15s ease, transform .1s ease, filter .15s ease;
}
.btn-principal:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 28, 44, .16);
}
.btn-principal:active { transform: translateY(0); }

/* ============================================================
   .btn-accion  —  base
   ============================================================ */
.btn-accion {
    --c: var(--iapol-navy);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    padding: .4rem .62rem;
    border-radius: .45rem;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-accion i { font-size: .95em; line-height: 0; }
.btn-accion:focus-visible {
    outline: 2px solid var(--iapol-focus);
    outline-offset: 2px;
}

/* tamaño "normal" (fuera de tablas) */
.btn-accion.btn-accion-md {
    font-size: .9rem;
    padding: .5rem .9rem;
    border-radius: .5rem;
    gap: .45rem;
}

/* ---- mapa de color semántico ---- */
.btn-accion.acc-ver,
.btn-accion.acc-editar,
.btn-accion.acc-abrir      { --c: var(--iapol-navy); }
.btn-accion.acc-duplicar,
.btn-accion.acc-descargar,
.btn-accion.acc-neutro     { --c: var(--iapol-neutral); }
.btn-accion.acc-activar    { --c: var(--iapol-ok); }
.btn-accion.acc-roles,
.btn-accion.acc-aviso      { --c: var(--iapol-warn); }
.btn-accion.acc-borrar     { --c: var(--iapol-bad); }

/* ============================================================
   Variante B — TINTE  (por defecto)
   ============================================================ */
.btn-accion,
.btn-accion.var-tinte {
    background-color: color-mix(in srgb, var(--c) 13%, var(--iapol-surface));
    color: var(--c);
}
.btn-accion:hover,
.btn-accion.var-tinte:hover {
    background-color: color-mix(in srgb, var(--c) 24%, var(--iapol-surface));
    color: var(--c);
}
.btn-accion:active,
.btn-accion.var-tinte:active {
    background-color: color-mix(in srgb, var(--c) 32%, var(--iapol-surface));
}

/* ============================================================
   Variante A — SÓLIDO
   ============================================================ */
.btn-accion.var-solido {
    background-color: var(--c);
    color: #fff;
    box-shadow: 0 1px 2px rgba(20, 28, 44, .12);
}
.btn-accion.var-solido:hover {
    color: #fff;
    filter: brightness(1.06) saturate(1.05);
    box-shadow: 0 4px 12px rgba(20, 28, 44, .18);
}

/* ============================================================
   Variante C — CONTORNO
   ============================================================ */
.btn-accion.var-contorno {
    background-color: transparent;
    color: var(--c);
    border-color: color-mix(in srgb, var(--c) 42%, #cbd5e1);
}
.btn-accion.var-contorno:hover {
    background-color: color-mix(in srgb, var(--c) 10%, var(--iapol-surface));
    border-color: var(--c);
    color: var(--c);
}

/* ---- estado desactivado (todas las variantes) ---- */
.btn-accion:disabled,
.btn-accion.disabled,
.btn-accion[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
    box-shadow: none;
    filter: none;
}

/* ---- grupos de acciones en fila de tabla ---- */
.acciones-fila {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

/* ============================================================
   Compatibilidad — marcado antiguo .btn.btn-action aún sin migrar
   (se puede retirar cuando no queden .btn-action en las vistas)
   ============================================================ */
.btn.btn-action {
    --c: var(--iapol-navy);
    font-weight: 600;
    border-color: transparent !important;
}
.btn.btn-action.btn-primary   { --c: var(--iapol-navy); }
.btn.btn-action.btn-success   { --c: var(--iapol-ok); }
.btn.btn-action.btn-warning   { --c: var(--iapol-warn); }
.btn.btn-action.btn-danger    { --c: var(--iapol-bad); }
.btn.btn-action.btn-secondary { --c: var(--iapol-neutral); }
.btn.btn-action.btn-info      { --c: var(--iapol-neutral); }
.btn.btn-action:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--c) 13%, var(--iapol-surface)) !important;
    color: var(--c) !important;
}
.btn.btn-action:not(.disabled):not(:disabled):hover {
    background-color: color-mix(in srgb, var(--c) 24%, var(--iapol-surface)) !important;
    color: var(--c) !important;
}

/* ============================================================
   Ajuste para SO en modo oscuro (algunas pantallas ya lo tocan)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root { --iapol-surface: #2d2d2d; }
}