.card-bobina-material {
    border-radius: 0.75rem;
    background: #ffffff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-bobina-material:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-bobina-header {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.card-bobina-body hr {
    margin: 0.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.text-label {
    font-size: 0.85rem;
    color: #555;
}

.text-value {
    font-weight: 500;
    font-size: 1rem;
}



/* Estilo principal de la tarjeta de totales */
.totales-card-material {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin-top: 20px;
    font-family: 'Roboto', sans-serif; /* Fuente Material Design */
}

/* Efecto de elevación al pasar el mouse */
.totales-card-material:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Contenedor de los items, usa flexbox para la distribución en línea */
.totales-body-material {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-between;
    gap: 16px; /* Espacio entre los items */
}

/* Estilo para cada métrica individual */
.totales-item-material {
    display: flex;
    flex-direction: column; /* Etiqueta arriba, valor abajo */
    align-items: center;
    flex-grow: 1; /* Permite que crezca para ocupar espacio */
    flex-basis: 120px; /* Ancho base mínimo para cada item */
}

/* Estilo de la etiqueta (nombre de la métrica) */
.totales-label-material {
    font-size: 0.75rem; /* Tamaño de fuente más pequeño */
    color: #616161; /* Gris oscuro para el texto */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
}

/* Estilo del valor de la métrica */
.totales-value-material {
    font-size: 1rem;
    color: #212121; /* Gris muy oscuro para el valor */
    font-weight: bold;
    margin-top: 4px; /* Espacio entre la etiqueta y el valor */
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 576px) {
    .totales-body-material {
        flex-direction: column; /* Apilar los elementos en móviles para mayor legibilidad */
        gap: 8px;
    }
    
    .totales-item-material {
        flex-direction: row; /* Volver a una fila para móviles */
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

.produccion-estimado__card {
    border-radius: 8px;
}

.produccion-estimado__item {
    min-width: 150px;
}

.produccion-estimado__icon {
    font-size: 1.2rem !important;
    line-height: 1;
}

/* Opcional: Estilos para cuando la tarjeta tiene datos */
.produccion-estimado__card.has-data {
    border-left: 4px solid #0d6efd; /* Borde de color para acentuar */
    transition: all 0.3s ease-in-out;
}


/* Estilo de la barra de progreso */
.progress-bar-container {
    width: 100%;
    height: 1rem;
    background-color: #e0e0e0;
    border-radius: 50rem; /* Para bordes redondeados */
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-bar {
    height: 100%;
    border-radius: 50rem;
    transition: width 0.4s ease;
    text-align: right;
    white-space: nowrap;
    line-height: 1rem;
}

/* Estilo de la barra de progreso */
.progress-bar-container {
    width: 100%;
    height: 1.25rem; /* Aumenta el alto para mejor visibilidad */
    background-color: #e0e0e0;
    border-radius: 50rem;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-bar {
    height: 100%;
    border-radius: 50rem;
    transition: width 0.4s ease;
    text-align: right;
    white-space: nowrap;
    line-height: 1.25rem;
}

/* Contenedor principal para la barra dual */
.progress-container-dual {
    width: 100%;
    height: 1.5rem;
    background-color: #81C784; /* Verde claro de Material (lo que falta) */
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
}

/* La barra que representa el material consumido */
.progress-bar.consumed {
    height: 100%;
    background-color: #E57373; /* Rojo suave de Material (lo consumido) */
    border-radius: 0.25rem;
    transition: width 0.4s ease; /* Animación de la barra */
    position: absolute;
    top: 0;
    left: 0;
}

/* Estilo del texto del porcentaje */
.progress-text-dual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 2px black;
    z-index: 2; /* Asegura que el texto esté por encima de las barras */
}

/* =========================================================================
   Tabla de bobinas — estilo limpio, compacto y moderno
   Usamos altura fija calc(100vh - X) en lugar de flex para evitar problemas
   al cambiar de tab (el flex se descalibra cuando un pane está oculto y
   recobra display: flex; las medidas no recalculan bien).
   ========================================================================= */
#bobinasContainer {
    margin-top: 0 !important;
    overflow: visible;
}

#bobinasContainer .bobinas-tabla-wrapper {
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: auto !important;
    /* max-height inicial razonable para SSR / antes de que JS recalcule.
       JS (ajustarAlturasTablas) sobreescribe con la altura real disponible
       basada en la posición del wrapper en el DOM. */
    max-height: calc(100vh - 265px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    background: #fff;
    border: 1px solid #eef0f3;
    border-bottom: 0;
    -webkit-overflow-scrolling: touch;
}

#bobinasContainer table {
    margin-bottom: 0 !important;
    font-size: 0.78rem;
}

#bobinasContainer thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    font-weight: 600;
    padding: 0.4rem 0.3rem !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    line-height: 1.1;
}

#bobinasContainer tbody td {
    padding: 0.3rem 0.35rem !important;
    vertical-align: middle;
    border-color: #f1f3f5 !important;
    line-height: 1.2;
}

#bobinasContainer tbody tr {
    transition: background-color 0.12s ease;
}

#bobinasContainer tbody tr:hover {
    background-color: #f6f9ff !important;
}

#bobinasContainer tbody tr.fila-seleccionada {
    background-color: #e0f2fe !important;
}

/* Numeritos tabulares para que las columnas numéricas alineen bien */
#bobinasContainer tbody td:nth-child(n+5):nth-child(-n+13),
#bobinasContainer tbody td:nth-child(14) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Fila de TOTALES más distinguida */
#bobinasContainer tbody tr.fw-bold.bg-light {
    background-color: #fff8e1 !important;
    border-top: 2px solid #f0c674 !important;
    font-variant-numeric: tabular-nums;
}

/* Columna de Bobina — un poco más prominente */
#bobinasContainer tbody td:nth-child(2) {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: #1f2937;
    white-space: nowrap;
}

/* Columna SIZE — sin wraps gratuitos */
#bobinasContainer tbody td:nth-child(3) {
    font-size: 0.72rem;
    line-height: 1.15;
}

/* =========================================================================
   Paginador — pegado a la tabla, sin huecos
   ========================================================================= */
#bobinasPagerContainer {
    background: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.35rem 0.7rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    border: 1px solid #eef0f3;
    border-top: 0;
    margin-top: -1px;
    margin-bottom: 0.5rem;
}

#bobinasPagerContainer .pagination .page-link {
    border: 1px solid transparent;
    color: #475569;
    padding: 0.2rem 0.55rem;
    font-size: 0.76rem;
    margin: 0 1px;
    border-radius: 0.3rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

#bobinasPagerContainer .pagination .page-link:hover {
    background-color: #eef2ff;
    color: #1d4ed8;
    border-color: #c7d2fe;
}

#bobinasPagerContainer .pagination .page-item.active .page-link {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

#bobinasPagerContainer .pagination .page-item.disabled .page-link {
    color: #cbd5e1;
    background: transparent;
}

/* =========================================================================
   Offcanvas de filtros del Análisis — replica del estilo de #offcanvasFiltros
   (definido en filtro_produccion.css). Lo replicamos acá scoped al
   #offcanvasFiltrosAnalisis para no tocar reglas compartidas.
   ========================================================================= */
#offcanvasFiltrosAnalisis {
    max-width: 90vw;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.12);
    border-radius: 8px 0 0 8px;
    top: 70px;                  /* deja espacio para el navbar fijo */
    height: calc(100% - 75px);  /* altura restante de pantalla */
    display: flex;
    flex-direction: column;
}
#offcanvasFiltrosAnalisis .offcanvas-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.75rem;
}
#offcanvasFiltrosAnalisis .offcanvas-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: #424242;
}
#offcanvasFiltrosAnalisis .btn-close {
    filter: brightness(0.4);
    transition: filter 0.2s ease;
}
#offcanvasFiltrosAnalisis .btn-close:hover {
    filter: brightness(0.7);
}
#offcanvasFiltrosAnalisis .offcanvas-body {
    padding-top: 1rem;
    padding-bottom: 0.8rem;
    font-size: 0.85rem;
    color: #424242;
    flex: 1 1 auto;
    overflow-y: auto;
}
#offcanvasFiltrosAnalisis label.form-label {
    color: #424242;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
/* Footer fijo al fondo del offcanvas (no scrollea con el formulario) */
#offcanvasFiltrosAnalisis .offcanvas-footer {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   Tab "Análisis Excedente / Remanente"
   ========================================================================= */
.analisis-toolbar .form-label {
    color: #475569;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.analisis-toolbar .form-control,
.analisis-toolbar .form-select {
    font-size: 0.82rem;
}

/* Análisis — altura inicial razonable. JS (ajustarAlturasTablas) la
   sobreescribe dinámicamente según la posición real del wrapper. */
#tab-analisis #analisisTablaContainer.analisis-flex-grow {
    max-height: calc(100vh - 285px);
    overflow: auto;
}

/* KPI cards */
.kpi-card {
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    border: 1px solid #eef0f3;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.kpi-card .kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}
.kpi-card .kpi-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-sub {
    margin-top: 0.15rem;
    font-size: 0.72rem;
}

/* Tabla del análisis */
#analisisTablaContainer {
    border-radius: 0.5rem;
    overflow: auto;
    background: #fff;
    border: 1px solid #eef0f3;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
#analisisTablaContainer thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    padding: 0.45rem 0.4rem !important;
    line-height: 1.15;
}
#analisisTablaContainer tbody td {
    padding: 0.35rem 0.45rem !important;
    font-size: 0.78rem;
    line-height: 1.2;
}
#analisisTablaContainer tbody tr {
    transition: background-color 0.12s ease;
}
#analisisTablaContainer tbody tr:hover {
    background-color: #eef6ff !important;
}
#analisisTablaContainer .ver-historial-icon:hover {
    background: #e0e7ff;
    color: #1d4ed8;
}

/* Fila expandida en el ranking */
#analisisTablaContainer tr.ranking-row-expanded {
    background-color: #eef6ff !important;
    box-shadow: inset 3px 0 0 #2563eb;
}
#analisisTablaContainer tr.ranking-row-expanded > td {
    font-weight: 600;
}
#analisisTablaContainer .chevron-toggle {
    color: #2563eb;
    font-size: 0.85rem;
}

/* Panel inline (ranking analysis) */
.ranking-detail-content {
    background: #f8fafc;
}

/* Mini-KPI dentro del panel */
.ra-mini-kpi {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    height: 100%;
}
.ra-mini-kpi .ra-kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    font-weight: 600;
}
.ra-mini-kpi .ra-kpi-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.ra-mini-kpi .ra-kpi-sub {
    font-size: 0.65rem;
    color: #6b7280;
    margin-top: 0.1rem;
}

/* Cards de agregación */
.ra-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.45rem;
    padding: 0.65rem 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    height: 100%;
}
.ra-card .ra-card-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1f2937;
    font-weight: 700;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #f1f5f9;
}
.ra-card table {
    font-size: 0.75rem;
}
.ra-card table thead th {
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.25rem 0.4rem !important;
}
.ra-card table tbody td {
    padding: 0.3rem 0.4rem !important;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

/* Barra de progreso fina dentro de las celdas */
.ra-bar {
    height: 6px;
    background: #eef2f7;
    border-radius: 50rem;
    overflow: hidden;
}
.ra-bar-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 50rem;
    transition: width 0.3s ease;
}

/* =========================================================================
   Tabla "Detalle de Producción" dentro del panel de análisis
   ========================================================================= */
.ra-detalle-wrapper {
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    overflow: auto;
}
.ra-detalle-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1f2937 !important;       /* gris oscuro */
    color: #ffffff !important;            /* texto blanco SIEMPRE */
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.4rem 0.5rem !important;
    border-bottom: 2px solid #111827 !important;
    white-space: nowrap;
}
.ra-detalle-table tbody td {
    padding: 0.3rem 0.5rem !important;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.ra-detalle-table tbody tr:hover {
    background: #f8fafc;
}

/* =========================================================================
   Celda de Peso/Unidad — comparación PRODUCTO vs CALCULADO
   ========================================================================= */
.ra-peso-cell {
    display: inline-block;
    text-align: right;
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    transition: background 0.15s ease;
    min-width: 150px;
}
.ra-peso-cell--aviso {
    background: #fffbeb;
    border-color: #fde68a;
}
.ra-peso-cell--grave {
    background: #fef2f2;
    border-color: #fca5a5;
    box-shadow: 0 0 0 1px #ef4444 inset;
}

.ra-peso-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    line-height: 1.15;
}

.ra-peso-num {
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
.ra-peso-num--off {
    font-weight: 400;
    color: #9ca3af;
}

/* Tags PRODUCTO / CALCULADO */
.ra-peso-tag {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.3;
    min-width: 64px;
    text-align: center;
}
/* Activo (esta es la fuente que se usó para calcular el peso total) */
.ra-peso-tag--produsa {
    background: #1e40af;
    color: #fff;
    box-shadow: 0 0 0 1px #1e40af;
}
.ra-peso-tag--calcusa {
    background: #166534;
    color: #fff;
    box-shadow: 0 0 0 1px #166534;
}
/* Inactivo (la otra fuente, solo informativa) */
.ra-peso-tag--prodoff {
    background: #e0e7ff;
    color: #1e40af;
    border: 1px solid #c7d2fe;
}
.ra-peso-tag--calcoff {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Línea de diagnóstico (Coinciden / Difiere / etc.) */
.ra-peso-diff {
    margin-top: 0.2rem;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    text-align: center;
}
.ra-peso-diff--ok    { background: #dcfce7; color: #166534; }
.ra-peso-diff--aviso { background: #fef3c7; color: #92400e; }
.ra-peso-diff--grave { background: #fee2e2; color: #991b1b; }

/* =========================================================================
   Eventos Montaje / Desmontaje — TABLA COMPACTA (1 fila por ciclo)
   ========================================================================= */
.ra-events-table {
    font-size: 0.74rem;
}
.ra-events-table thead th {
    padding: 0.3rem 0.45rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.65rem;
    background: #1f2937;          /* gris oscuro corporativo */
    color: #ffffff !important;    /* texto blanco siempre legible */
    border-bottom: 2px solid #111827;
    vertical-align: middle;
    white-space: nowrap;
}
.ra-events-table tbody td {
    padding: 0.35rem 0.5rem !important;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}
.ra-events-table tbody tr:hover {
    background: #f6f9ff !important;
}

/* Celda Notas — texto completo con wrap, no truncate */
.ra-events-table td.ra-event-notas {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    min-width: 220px;
    max-width: 380px;
    line-height: 1.3;
    color: #78350f;
}
.ra-events-table td.ra-event-notas .fst-italic {
    color: #78350f;
}

/* Subhead — fondo claro y texto oscuro para los th sin clase de grupo */
.ra-events-table .ra-events-subhead th {
    font-weight: 600;
    color: #334155 !important;       /* gris oscuro legible */
    background: #f1f5f9;             /* gris muy claro */
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.62rem;
    border-bottom: 2px solid #cbd5e1;
}

/* Tint por GRUPO — solo los headers tienen color fuerte; las celdas casi
   blancas con un borde lateral fino para diferenciar los grupos sin lavar
   el texto. */
.ra-events-table th.ra-th-mont {
    background: #16a34a !important;
    color: #fff !important;
    font-weight: 800;
}
.ra-events-table th.ra-th-desm {
    background: #2563eb !important;
    color: #fff !important;
    font-weight: 800;
}
/* Subhead del grupo */
.ra-events-table .ra-events-subhead th.ra-th-mont {
    background: #f0fdf4 !important;
    color: #065f46 !important;
    font-weight: 700;
    border-bottom: 2px solid #16a34a !important;
}
.ra-events-table .ra-events-subhead th.ra-th-desm {
    background: #eff6ff !important;
    color: #1e3a8a !important;
    font-weight: 700;
    border-bottom: 2px solid #2563eb !important;
}

/* Celdas: fondo casi blanco con leve tinte; texto negro para máxima lectura */
.ra-events-table td.ra-cell-mont {
    background: #fafffd;
    color: #111827;
    border-left: 1px solid #f0fdf4;
}
.ra-events-table td.ra-cell-desm {
    background: #fbfdff;
    color: #111827;
    border-left: 1px solid #eff6ff;
}
/* La primera celda del grupo tiene borde lateral más visible */
.ra-events-table td.ra-cell-mont:first-of-type,
.ra-events-table td.ra-cell-desm:first-of-type {
    border-left: 3px solid;
}
.ra-events-table td.ra-cell-mont:first-of-type { border-left-color: #16a34a; }
.ra-events-table td.ra-cell-desm:first-of-type { border-left-color: #2563eb; }

.ra-events-table tbody tr:hover td.ra-cell-mont { background: #f0fdf4 !important; }
.ra-events-table tbody tr:hover td.ra-cell-desm { background: #eff6ff !important; }

/* Badges legibles (fix contraste de bg-*-subtle con text-* del mismo color) */
.ra-events-table .badge,
.ranking-detail-content .badge {
    font-weight: 600;
}
.ra-events-table .badge.bg-warning-subtle,
.ranking-detail-content .badge.bg-warning-subtle {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}
.ra-events-table .badge.bg-success-subtle,
.ranking-detail-content .badge.bg-success-subtle {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}
.ra-events-table .badge.bg-info-subtle,
.ranking-detail-content .badge.bg-info-subtle {
    background: #e0f2fe !important;
    color: #075985 !important;
    border-color: #bae6fd !important;
}
.ra-events-table .badge.bg-primary-subtle,
.ranking-detail-content .badge.bg-primary-subtle {
    background: #dbeafe !important;
    color: #1e3a8a !important;
    border-color: #bfdbfe !important;
}
.ra-events-table .badge.bg-danger-subtle,
.ranking-detail-content .badge.bg-danger-subtle {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

/* =========================================================================
   Acciones — íconos un pelín más visibles
   ========================================================================= */
#bobinasContainer .registro-icon,
#bobinasContainer .ver-imagen-icon,
#bobinasContainer .productos-icon,
#bobinasContainer .finalizar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.35rem;
    color: #475569;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

#bobinasContainer .registro-icon:hover {
    background: #e0e7ff;
    color: #1d4ed8;
    transform: translateY(-1px);
}

#bobinasContainer .ver-imagen-icon:hover {
    background: #fee2e2;
    color: #b91c1c;
}

#bobinasContainer .finalizar-icon:hover {
    background: #dcfce7;
    color: #166534;
}