/* Estilos compartidos de las pantallas api-ui (cascarón Blade + módulos ES). */

/* Carga: atenúa el contenido y bloquea clics mientras llega la respuesta. */
[data-api-page].api-loading [data-list-body],
[data-api-page].api-loading [data-pagination] {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* Columnas ordenables (th[data-sort]). */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]::after { content: '\2195'; margin-left: .35rem; opacity: .3; font-size: .8em; }
th.api-sorted[data-order="asc"]::after { content: '\25B2'; opacity: .8; }
th.api-sorted[data-order="desc"]::after { content: '\25BC'; opacity: .8; }

/* Filtros generados desde `applicable_filters`: sus campos participan en la grilla del padre. */
[data-api-page] [data-filters] { display: contents; }

/* Chips de filtros activos. */
.api-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; font-size: .8rem; }
.api-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 1rem; background: rgba(62, 129, 184, .12); color: var(--tenant-primary, #3e81b8); }
.api-chip-x { border: 0; background: none; padding: 0 .1rem; line-height: 1; color: inherit; cursor: pointer; }

/* Errores de formulario por campo. */
[data-error-for] { display: none; }
.is-invalid ~ [data-error-for], [data-error-for].d-block { display: block; }

/* Texto con saltos de línea (notas). */
.pre-wrap { white-space: pre-wrap; word-break: break-word; }

/* ── Kit de listado estándar (hero · KPIs · filtros · tabla) ───────────────── */
[data-api-page] {
    --api-ink: #1e293b;
    --api-muted: #64748b;
    --api-line: #e3e8f0;
    --api-radius: 14px;
}

/* Hero */
.api-hero {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding: 1.75rem 2rem; border-radius: 20px; color: #fff;
    background: linear-gradient(135deg, #1d3d68, color-mix(in srgb, var(--tenant-primary, #3e81b8) 55%, #0b1e3a));
}
.api-hero-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.api-hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.api-hero-title { margin: .35rem 0 .25rem; font-size: 2rem; font-weight: 700; color: #fff; }
.api-hero-sub { margin: 0; opacity: .85; }
.api-hero-stats { display: flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; background: rgba(255, 255, 255, .06); }
.api-hero-stats > div { min-width: 110px; padding: .9rem 1.4rem; text-align: center; }
.api-hero-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .25); }
.api-hero-stats .n { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.api-hero-stats .l { font-size: .75rem; opacity: .8; }

/* KPIs */
.api-kpi {
    --tone: #2563eb;
    display: flex; justify-content: space-between; align-items: flex-start; height: 100%;
    padding: 1.1rem 1.4rem; background: #fff; border: 1px solid var(--tone); border-radius: var(--api-radius);
}
.api-kpi-primary { --tone: #2563eb; }
.api-kpi-success { --tone: #16a34a; }
.api-kpi-warning { --tone: #ca8a04; }
.api-kpi-danger  { --tone: #dc2626; }
.api-kpi-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
.api-kpi-value { margin-top: .25rem; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--api-ink); }
.api-kpi-icon {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
    font-size: 1.15rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, #fff);
}

/* Cards (filtros y tabla) */
[data-api-page] .card { border: 1px solid var(--api-line); border-radius: var(--api-radius); box-shadow: none; }
[data-api-page] .card-header, [data-api-page] .card-footer { background: #fff; border-color: var(--api-line); padding: .9rem 1.25rem; }
[data-api-page] .card-header { border-radius: var(--api-radius) var(--api-radius) 0 0; }
[data-api-page] .card-footer { border-radius: 0 0 var(--api-radius) var(--api-radius); }
.api-filters label.form-label { margin-bottom: .25rem; font-size: .75rem; font-weight: 600; color: var(--api-ink); }
/* Filtros: [data-filters] es display:contents, así que sus hijos no heredan el gutter de .row → espaciado propio.
   Todos los controles y botones de la barra comparten la misma altura. */
.api-filters [data-filters] > * { padding-inline: .3rem; }
.api-filters .form-control, .api-filters .form-select, .api-filters .input-group-text, .api-filters .btn {
    height: 38px; font-size: .8125rem; line-height: 1.25;
}
.api-filters .form-control, .api-filters .form-select { padding-top: 0; padding-bottom: 0; }
.api-filters .input-group-text { padding-top: 0; padding-bottom: 0; }
.api-btn-icon { width: 40px; padding: 0; }
.api-filters [data-action="filter"] { width: 40px; padding: 0; }
.api-per-page { width: 72px; }

/* Tabla */
.api-table { margin: 0; }
.api-table thead th {
    padding: .85rem 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #334155; background: #f6f8fb; border-bottom: 1px solid var(--api-line); white-space: nowrap;
}
.api-table tbody td { padding: .85rem 1rem; border-color: #eef1f6; color: var(--api-ink); }
.api-pill { display: inline-block; padding: .2rem .55rem; border-radius: 6px; font-size: .8rem; background: #eef1f6; color: #475569; }
.api-actions .btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Columna de acciones de la tabla (Ver / Editar / Eliminar) y utilidad para textos con ellipsis dentro de flex. */
.api-col-actions { width: 150px; text-align: center; }
.min-w-0 { min-width: 0; }

/* Acceso de soporte del owner: barra fija y visible en toda pantalla del tenant */
.impersonation-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem 1rem; font-size: .8rem; color: #fff; background: #b91c1c; }
.impersonation-bar form { margin: 0; }
body:has(.impersonation-bar) { padding-top: 38px; }
body:has(.impersonation-bar) .app-header { top: 38px; }
body:has(.impersonation-bar) .app-sidebar,
body:has(.impersonation-bar) .app-sidebar-bg { top: 38px; }

/* Modales con formulario: el <form> envuelve cuerpo y pie, así que hay que pasarle el flex para que el cuerpo haga scroll (modal-dialog-scrollable). */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }

/* ModulePicker: módulos con casilla y nivel (planes, extras de un cliente) */
.module-picks { display: grid; gap: .4rem; }
.module-pick { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .5rem .75rem; border: 1px solid var(--api-line, #e3e8f0); border-radius: 8px; cursor: pointer; }
.module-pick-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.module-pick-level { width: 150px; flex: 0 0 auto; }

/* Botones de fila con contador (adjuntos): el globo flota en la esquina y el ícono queda centrado */
.api-actions .btn { position: relative; }
.api-actions .btn > .badge { position: absolute; top: -5px; right: -5px; margin: 0 !important; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; line-height: 1; z-index: 2; }