/**
 * awcfvideo.css — estilos del bloque de adjuntar video (superficie A).
 * Fases 4 completará con los estados visuales detallados.
 */

/* ------------------------------------------------------------------ */
/* Wrapper del bloque                                                   */
/* ------------------------------------------------------------------ */
#awcfvideo_block {
    /* Aire arriba y, sobre todo, abajo para separarlo del textarea "Mensaje" */
    margin: 18px 0 26px;
}

.awcfvideo-wrapper {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 18px 20px;
    background: #fafafa;
}

/* ------------------------------------------------------------------ */
/* Cabecera y texto informativo                                         */
/* ------------------------------------------------------------------ */
.awcfvideo-header {
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.awcfvideo-info {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------ */
/* Botón seleccionar (label sobre input[type=file])                    */
/* ------------------------------------------------------------------ */
.awcfvideo-select-btn {
    cursor: pointer;
    display: inline-block;
}

/* ------------------------------------------------------------------ */
/* Barra de progreso                                                    */
/* ------------------------------------------------------------------ */
.awcfvideo-progress {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 4px;
}

.awcfvideo-progress-bar {
    height: 100%;
    background: #007bff;
    transition: width 0.2s ease;
    width: 0%;
}

.awcfvideo-progress-pct {
    font-size: 12px;
    color: #555;
}

.awcfvideo-filename {
    display: block;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* ------------------------------------------------------------------ */
/* Estado: subido OK                                                    */
/* ------------------------------------------------------------------ */
.awcfvideo-state--done .awcfvideo-ok-icon {
    color: #28a745;
    font-size: 18px;
    margin-right: 6px;
}

.awcfvideo-filename-done {
    font-size: 13px;
    color: #333;
}

.awcfvideo-remove-btn {
    margin-left: 8px;
    font-size: 12px;
    color: #dc3545;
    padding: 0;
}

/* ------------------------------------------------------------------ */
/* Estado: error                                                        */
/* ------------------------------------------------------------------ */
.awcfvideo-state--error .awcfvideo-error-msg {
    display: block;
    color: #dc3545;
    font-size: 13px;
    margin-bottom: 6px;
}

.awcfvideo-retry-btn {
    font-size: 12px;
    padding: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive mobile                                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .awcfvideo-wrapper {
        padding: 10px 12px;
    }

    .awcfvideo-filename,
    .awcfvideo-filename-done {
        max-width: 100%;
    }
}