/*
 * EduTec Manager — CSS Redis
 * Archivo: assets/css/c-redis.css
 * Versión: 1.0.3
 */


/* Badges */
.etm-redis-badges-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    margin-top: 8px;
}

.etm-redis-badge {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        10px 14px;
    border-radius:  var(--etm-radius-lg);
    cursor:         pointer;
    min-width:      110px;
    position:       relative;
    transition:     transform .15s, box-shadow .15s;
    color:          #4A4A4A !important;
}

.etm-redis-badge:hover {
    transform:  translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.etm-redis-badge-nom {
    font-size:   13px !important;
    font-weight: 700 !important;
    color:       #4A4A4A !important;
    text-align:  center;
}

.etm-redis-badge-sub {
    font-size:  11px !important;
    color:      #4A4A4A !important;
    opacity:    .75;
    text-align: center;
}

.etm-redis-badge-cnt {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #00502E;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Instrucciones */
.etm-redis-instrucciones {
    background:    var(--etm-gray-50);
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
    padding:       14px 16px;
    margin-bottom: 14px;
    font-size:     13px;
}

.etm-redis-instrucciones-titulo {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     14px;
    margin-bottom: 10px;
    color:         var(--etm-gray-700);
}

.etm-redis-instrucciones-titulo i { color: var(--etm-blue); }

.etm-redis-instrucciones-lista {
    margin:       0;
    padding-left: 20px;
    color:        var(--etm-gray-700);
    line-height:  1.8;
}

.etm-redis-instrucciones-lista kbd {
    background:    var(--etm-gray-200);
    border:        1px solid var(--etm-gray-300);
    border-radius: 3px;
    padding:       1px 5px;
    font-size:     11px;
    font-family:   var(--etm-font-mono);
}

/* Área de paste */
.etm-redis-paste-area {
    min-height:      90px;
    border:          2px dashed var(--etm-gray-300);
    border-radius:   var(--etm-radius-lg);
    padding:         20px;
    cursor:          text;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--etm-gray-50);
    transition:      border-color .15s, background .15s;
    outline:         none;
    overflow:        hidden;
}

.etm-redis-paste-area:focus {
    border-color: var(--etm-blue);
    background:   var(--etm-blue-light);
}

.etm-redis-paste-hint {
    display:        flex;
    align-items:    center;
    gap:            10px;
    color:          var(--etm-gray-400);
    font-size:      14px;
    pointer-events: none;
    user-select:    none;
}

.etm-redis-paste-hint i { font-size: 22px; }

/* Tabla */
.etm-redis-tabla-wrap {
    overflow-x:    auto;
    border:        1px solid var(--etm-gray-200);
    border-radius: var(--etm-radius);
}

.etm-redis-tabla {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--etm-p-texto-familia, sans-serif);
    font-size:       12px !important;
    color:           #333333 !important;
    min-width:       640px;
}

.etm-redis-tabla th {
    padding:       7px 10px;
    background:    var(--etm-gray-100);
    border-bottom: 2px solid var(--etm-gray-200);
    font-size:     11px !important;
    font-weight:   600 !important;
    color:         #333333 !important;
    white-space:   nowrap;
    font-family:   var(--etm-p-texto-familia, sans-serif) !important;
}

.etm-redis-tabla td {
    padding:       7px 10px;
    border-bottom: 1px solid var(--etm-gray-100);
    font-size:     12px !important;
    color:         #333333 !important;
    font-family:   var(--etm-p-texto-familia, sans-serif) !important;
    vertical-align: middle;
}

.etm-redis-tabla tr:last-child td { border-bottom: none; }
.etm-redis-tabla tr:hover td { background: var(--etm-gray-50); }