/* ==========================================================================
   ACCIONES DE FILA — editar, borrar, ver
   --------------------------------------------------------------------------
   Un botón de acción dentro de una tabla no es un botón normal: hay uno o tres
   por fila, repetidos decenas de veces, y si cada uno trae su caja gris la
   tabla se convierte en un tablero de cuadraditos. Lo que se lee es el icono,
   así que el botón desaparece y el color hace el trabajo: azul para editar,
   rojo para borrar, gris para mirar.

   La referencia es la tabla de Standar Supplies. Acá se recoge ese estilo y se
   aplica a las quince clases distintas que el programa fue acumulando para lo
   mismo (ss-btn-icon, btn-mini-icon, hr-btn-editar, act-btn-eliminar...), en
   vez de renombrarlas una por una en cada módulo.

   El color se decide por el ICONO, no por la clase: un botón con fa-pen es
   azul aunque su clase no lo diga. Eso vale para el módulo que se escriba
   mañana sin mirar este archivo.

   Este archivo va en claro y en oscuro; tema-oscuro.css solo cambia los
   valores de color, no la forma.
   ========================================================================== */

:root {
    --accion-azul:  #2563eb;
    --accion-rojo:  #dc2626;
    --accion-gris:  #64748b;
    --accion-hover: rgba(100, 116, 139, .14);
}

/* En oscuro cambian los valores, no la forma */
.tema-oscuro {
    --accion-azul:  var(--to-accent);
    --accion-rojo:  var(--to-red);
    --accion-gris:  var(--to-text-3);
    --accion-hover: rgba(255, 255, 255, .10);
}

.btn-accion,
.to-icono-btn,
.ss-btn-icon, .se-btn-icon, .ma-btn-del,
.btn-icon, .btn-icon-mini, .btn-mini-icon,
.act-btn-editar, .act-btn-eliminar,
.hr-btn-editar, .hr-btn-eliminar,
.mnt-btn-icon,
.cc-btn-editar, .cc-btn-eliminar,
.btn-remove-item, .btn-quitar-item {
    /* !important en bloque: esto es una capa de estandarización, y compite
       con reglas de dashboard.css y del tema que ya lo llevan. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    /* min-width viene de modulos.css y el width solo no lo anula */
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--accion-gris) !important;
    font-size: 13px !important;
    line-height: 1;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

/* Varios seguidos, con aire entre ellos y sin saltos de línea */
.td-acciones, .ss-actions, .se-actions, .acciones-celda {
    display: flex;
    gap: 2px;
    justify-content: center;
    white-space: nowrap;
}

/* tema-oscuro.css le pone a `.btn-accion` un fondo gris con !important, y pesa
   una clase más que la regla base de arriba. Se neutraliza con su misma
   especificidad, y va ANTES de los colores por icono a propósito: entre reglas
   del mismo peso gana la última, así que el azul del lápiz sigue mandando.    */
.tema-oscuro .btn-accion {
    background: transparent !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: var(--accion-gris) !important;
}
.tema-oscuro .btn-accion:hover { background: var(--accion-hover) !important; }

/* ── Las variantes que ya existían ───────────────────────────────────────────
   `.btn-accion` con `.btn-ver`, `.btn-eliminar`, `.btn-adjuntar`... viene de
   js/icons.js y modulos.css, y traía caja: fondo de color y borde a juego. Se
   queda el nombre, que está en uso, y se va la caja: el color pasa al icono.  */
.btn-accion.btn-ver,     .btn-accion-ver,
.btn-accion.btn-adjuntar, .btn-accion-adjuntar,
.btn-accion.btn-descargar, .btn-accion-descargar {
    background: transparent !important;
    border: 0 !important;
    color: var(--accion-gris) !important;
}
.btn-accion.btn-editar,  .btn-accion-editar,
.btn-accion.btn-confirmar { color: var(--accion-azul) !important; background: transparent !important; border: 0 !important; }
.btn-accion.btn-eliminar, .btn-accion-eliminar,
.btn-accion.btn-cancelar { color: var(--accion-rojo) !important; background: transparent !important; border: 0 !important; }
.btn-accion.btn-adjuntar.tiene-archivo,
.btn-accion-adjuntar.tiene-archivo { color: #10b981 !important; background: transparent !important; }
.tema-oscuro .btn-accion.btn-adjuntar.tiene-archivo,
.tema-oscuro .btn-accion-adjuntar.tiene-archivo { color: var(--to-green) !important; }
/* Sin caja tampoco hay por qué crecer al pasar por encima */
.btn-accion:hover { transform: none !important; }

/* ── El color lo decide el icono ─────────────────────────────────────────── */
.btn-accion:has(.fa-pen), .btn-accion:has(.fa-edit),
.btn-accion:has(.fa-pencil), .btn-accion:has(.fa-pencil-alt),
.to-icono-btn:has(.fa-pen), .to-icono-btn:has(.fa-edit),
.ss-btn-icon.edit, .se-btn-icon.edit,
.btn-icon-mini:has(.fa-edit), .btn-mini-icon:has(.fa-pen),
.act-btn-editar, .hr-btn-editar, .cc-btn-editar,
.mnt-btn-icon:has(.fa-pen),
/* La llave corrige y la flecha circular reimputa: las dos modifican datos */
.btn-accion:has(.fa-wrench), .btn-accion:has(.fa-sync-alt),
.btn-accion:has(.fa-arrows-turn-to-dots),
.btn-accion:has(.fa-right-left) { color: var(--accion-azul) !important; }

.btn-accion:has(.fa-trash), .btn-accion:has(.fa-trash-alt),
.to-icono-btn:has(.fa-trash), .to-icono-btn:has(.fa-trash-alt),
.ss-btn-icon.del, .se-btn-icon.del, .ma-btn-del,
.btn-mini-icon:has(.fa-trash),
.act-btn-eliminar, .hr-btn-eliminar, .cc-btn-eliminar,
.mnt-btn-icon.mnt-del,
.btn-remove-item, .btn-quitar-item,
/* Archivar o retirar: no borra la fila, pero la saca de circulación */
.btn-accion:has(.fa-box-archive), .btn-accion:has(.fa-archive),
.btn-accion:has(.fa-ban) { color: var(--accion-rojo) !important; }

/* Quitar una fila o cancelar algo: la equis también es destructiva.
   Se excluyen las equis que solo cierran un modal, que no borran nada. */
.to-icono-btn:has(.fa-times):not(.modal-close):not(.btn-icon-close),
.btn-mini-icon:has(.fa-times),
.btn-icon-mini:has(.fa-times),
.btn-accion:has(.fa-times) { color: var(--accion-rojo) !important; }

/* ── Estados ─────────────────────────────────────────────────────────────── */
.btn-accion:hover, .to-icono-btn:hover,
.ss-btn-icon:hover, .se-btn-icon:hover, .ma-btn-del:hover,
.btn-icon:hover, .btn-icon-mini:hover, .btn-mini-icon:hover,
.act-btn-editar:hover, .act-btn-eliminar:hover,
.hr-btn-editar:hover, .hr-btn-eliminar:hover,
.mnt-btn-icon:hover,
.cc-btn-editar:hover, .cc-btn-eliminar:hover,
.btn-remove-item:hover, .btn-quitar-item:hover {
    background: var(--accion-hover) !important;
}

.btn-accion:disabled, .to-icono-btn:disabled,
.ss-btn-icon:disabled, .se-btn-icon:disabled,
.btn-icon:disabled, .btn-icon-mini:disabled, .btn-mini-icon:disabled {
    opacity: .35;
    cursor: default;
    background: transparent !important;
}

/* ── Convivencia con el tema oscuro ──────────────────────────────────────────
   Los módulos ya migrados escriben `to-btn to-icono-btn sm`, y tema-oscuro.css
   le da a `.to-btn` un fondo gris con !important — el cuadradito que sobra en
   las tablas. Se neutraliza acá, con la misma arma y una clase más de peso.
   El tamaño también se unifica: `.sm` dejaba el icono en 10px, ilegible.      */
.tema-oscuro .to-btn.to-icono-btn,
.tema-oscuro .to-btn.to-icono-btn.sm {
    background: transparent !important;
    width: 26px; height: 26px; font-size: 13px !important;
}
.tema-oscuro .to-btn.to-icono-btn:hover,
.tema-oscuro .to-btn.to-icono-btn.sm:hover { background: var(--accion-hover) !important; }
.tema-oscuro .to-btn.to-icono-btn.peligro { color: var(--accion-rojo) !important; }
.tema-oscuro .to-btn.to-icono-btn:disabled { background: transparent !important; }

/* Guardar una edición en línea: el visto va en verde, como en el resto del
   sistema. Estos botones traían el verde en un style= con fondo sólido. */
.btn-icon-mini:has(.fa-check), .btn-mini-icon:has(.fa-check),
.to-icono-btn:has(.fa-check), .btn-accion:has(.fa-check) {
    color: #16a34a !important;
    background: transparent !important;
}
.tema-oscuro .btn-icon-mini:has(.fa-check),
.tema-oscuro .btn-mini-icon:has(.fa-check),
.tema-oscuro .to-icono-btn:has(.fa-check),
.tema-oscuro .btn-accion:has(.fa-check) { color: var(--to-green) !important; }

/* Database Health traía sus botones con caja y texto. El texto se fue del
   markup; la caja se quita acá, que su regla es más específica que la base. */
.btn-accion.aud-btn-ver, .btn-accion.aud-btn-fix {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.btn-accion.aud-btn-ver:hover, .btn-accion.aud-btn-fix:hover { background: var(--accion-hover) !important; }
.btn-accion.aud-btn-ver { color: var(--accion-gris) !important; }
.btn-accion.aud-btn-fix { color: var(--accion-azul) !important; }

/* El icono no captura el clic: así el botón entero es el objetivo */
.btn-accion > i, .to-icono-btn > i,
.ss-btn-icon > i, .se-btn-icon > i, .ma-btn-del > i,
.btn-icon > i, .btn-icon-mini > i, .btn-mini-icon > i {
    pointer-events: none;
}