/* =========================================================================
   Suplemento de modernización de contenido.

   La capa principal vive en public/css/app.css (scope
   .app-content:not(.app-content--plain)) y cubre tablas, DataTables, cards,
   recuadros, formularios, badges, alertas, paginación, etc.

   Este archivo SOLO agrega lo que a esa capa le falta:
     1) .ui-card  -> contenedor blanco para tablas planas (no DataTable).
     2) .act      -> sistema unificado de botones de acción de fila.

   Todo scopeado bajo .app-content:not(.app-content--plain) para no tocar
   login, páginas públicas ni formularios/landings (no tienen .app-content),
   y respetar el opt-out .app-content--plain.
   ========================================================================= */

.app-content:not(.app-content--plain) {
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-border: rgba(15, 23, 42, 0.08);
    --ui-card-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* ----------------------------------------------------------------------- */
/* Contenedor blanco para tablas planas y bloques sueltos                  */
/* ----------------------------------------------------------------------- */
.app-content:not(.app-content--plain) .ui-card {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 1rem;
    box-shadow: var(--ui-card-shadow);
    padding: 1.1rem 1.25rem 1.25rem;
}
.app-content:not(.app-content--plain) .ui-card > .table:last-child,
.app-content:not(.app-content--plain) .ui-card > .table-responsive:last-child > .table {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------- */
/* Botones de acción de fila (.act) — usado en audiencias, listados,       */
/* formularios, emails, redirects, galerías, etc. Colores clásicos por     */
/* acción con look compacto tipo btn-sm.                                    */
/* ----------------------------------------------------------------------- */
.app-content:not(.app-content--plain) .act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    min-width: 2.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: #6c757d;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.app-content:not(.app-content--plain) .act + .act {
    margin-left: 0.25rem;
}
.app-content:not(.app-content--plain) .act:hover {
    color: #fff;
    filter: brightness(0.92);
}
.app-content:not(.app-content--plain) .act:active {
    transform: translateY(1px);
}
.app-content:not(.app-content--plain) .act:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}
.app-content:not(.app-content--plain) .act i {
    pointer-events: none;
}
.app-content:not(.app-content--plain) .act[disabled],
.app-content:not(.app-content--plain) .act:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Variantes por acción */
.app-content:not(.app-content--plain) .act--open,
.app-content:not(.app-content--plain) .act--stats,
.app-content:not(.app-content--plain) .act--view {
    background: #0d6efd;
}
.app-content:not(.app-content--plain) .act--edit {
    background: #6c757d;
}
.app-content:not(.app-content--plain) .act--copy {
    background: #0dcaf0;
    color: #055160;
}
.app-content:not(.app-content--plain) .act--copy:hover {
    color: #055160;
}
.app-content:not(.app-content--plain) .act--export {
    background: #198754;
}
.app-content:not(.app-content--plain) .act--toggle {
    background: #ffc107;
    color: #533f03;
}
.app-content:not(.app-content--plain) .act--toggle:hover {
    color: #533f03;
}
.app-content:not(.app-content--plain) .act--toggle.is-off {
    background: #6c757d;
    color: #fff;
}
.app-content:not(.app-content--plain) .act--delete {
    background: #dc3545;
}

/* -----------------------------------------------------------------------
   Botones de acción que todavía usan Bootstrap (.btn-map y el menú
   hamburguesa .hamburger-btn): alinean su caja con el sistema .act para
   que no se vean distintos al quedar uno al lado del otro en la misma
   fila (mismo alto, ancho mínimo y radio de borde).
   ----------------------------------------------------------------------- */
.app-content:not(.app-content--plain) .btn-map,
.app-content:not(.app-content--plain) .hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    line-height: 1.4;
    vertical-align: middle;
}