/* ==========================================================
   EduTec Manager — Casos Especiales (Financieros)
   Archivo: assets/css/c-fin-especiales.css
   Autocontenido: duplica el botón outline por si esta página no
   carga junto con c-fin-conceptos.css / c-fin-terminal.css
   ========================================================== */

.etm-fin-especiales-toolbar {
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* ----------------------------------------------------------
   Botón outline con color primario del plantel (compartido
   con el resto del paquete Financieros)
---------------------------------------------------------- */
.etm-fin-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--etm-radius, 8px) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease !important;
    white-space: nowrap !important;
}

.etm-fin-btn-outline-primary {
    border: 1.5px solid var(--etm-p-primario) !important;
    color: var(--etm-p-primario) !important;
}

.etm-fin-btn-outline-primary:hover:not(:disabled) {
    background: var(--etm-p-primario) !important;
    color: #ffffff !important;
}

.etm-fin-btn-outline:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

.etm-fin-btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}

/* ----------------------------------------------------------
   Asterisco de campo requerido (mismo estándar que Conceptos)
---------------------------------------------------------- */
.etm-fc-required {
    color: var(--etm-danger, #dc2626) !important;
}

/* ----------------------------------------------------------
   Formulario: fila con dos campos lado a lado
---------------------------------------------------------- */
.etm-fe-fila-doble {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.etm-fe-fila-doble .etm-field {
    flex: 1 !important;
    min-width: 200px !important;
}

/* ----------------------------------------------------------
   Tabla
---------------------------------------------------------- */
.etm-fe-table {
    width: 100% !important;
}

.etm-fe-descripcion {
    max-width: 260px !important;
    color: var(--etm-gray-600, #475569) !important;
    font-size: 13px !important;
}

.etm-fe-acciones {
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    .etm-fe-table thead {
        display: none !important;
    }
    .etm-fe-table, .etm-fe-table tbody, .etm-fe-table tr, .etm-fe-table td {
        display: block !important;
        width: 100% !important;
    }
    .etm-fe-table tr {
        border: 1px solid var(--etm-gray-200, #e2e8f0) !important;
        border-radius: var(--etm-radius, 8px) !important;
        margin-bottom: 12px !important;
        padding: 8px 12px !important;
    }
    .etm-fe-table td {
        border: none !important;
        padding: 6px 0 !important;
    }
    .etm-fe-descripcion {
        max-width: none !important;
    }
}