.dashboard {
        display: flex;
        flex-direction: column;
        gap: 20px;
        font-family: Arial, sans-serif;
    }

    /* TABLA: Dispositivos por Estado */
    .dashboard-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .dashboard-table th {
        background: #34495e;
        color: white;
        padding: 12px;
        text-align: left;
    }

    .dashboard-table td {
        padding: 12px;
        border-bottom: 1px solid #eee;
    }

    .dashboard-table tr:nth-child(even) {
        background: #f9f9f9;
    }

    /* TARJETAS: Dispositivos por Categoría */   
    /* 🎯 CARD Dispositivos por Estado + Stock de Items */
    .card-state {
        background: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
    }
    .card-state:hover {
        transform: translateY(-3px);
    }
    .card-body-state {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    /* 🎯 CARD Dispositivos por Categoría */
    .card-category {
        background: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
    }
    .card-category:hover {
        transform: translateY(-3px);
    }
    .card-body-category {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 2 card por fila */
        gap: 20px; /* espacio entre filas y columnas */
        text-align: left;    
        font-size: 13px;    
    }

    .card-item-category {
        background: #f9f9f9;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);       
        transition: transform 0.2s ease; 
    }

    .card-item-category:hover{
        transform: translateY(-3px);
    }


    /* Badges */
    .badge {
        background: #ccc;
        color: white;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: bold;
    }

    .card-body {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
        gap: 15px; /* espacio entre items */
        text-align: left; /* alinear contenido a la izquierda */
    }

    .card-item {
        background: #f9f9f9;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }


    /* Badges por estado */
    .badge-green {
        background: #00ab45;
    }
    .badge-red {
        background: #bf4040;
    }

    .dashboard-grid{
        display: grid;
        grid-template-columns: 1fr 2fr; /* dos columnas, la primera más grande */
        gap: 20px; /* espacio entre tarjetas */
    }

    hr{
        margin: 1rem 0;
        border-top: 0.1rem solid #d5d5d5;
    }
/* ---------------- Dashboard mobile ---------------- */
@media (max-width: 900px) {
    .devices.index.content {
        padding: 12px;
    }

    .devices.index.content h1 {
        font-size: 2.4rem;
        margin-bottom: 10px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card-state,
    .card-category {
        padding: 12px;
        border-radius: 12px;
    }

    .card-body-category {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .card-item-category {
        padding: 10px;
    }

    .row-item {
        gap: 8px;
        flex-wrap: wrap;
    }

    .badge {
        font-size: 12px;
        padding: 3px 8px;
    }

    .dashboard-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-main-table {
        min-width: 560px;
        white-space: nowrap;
    }

    .dashboard-main-table th,
    .dashboard-main-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}