/*
 * Secciones numeradas del formulario de producto
 * (alta, edición y alta rápida).
 *
 * La numeración se resuelve con contadores CSS: los elementos ocultos
 * (display:none) no incrementan el contador, así que las secciones
 * condicionales se renumeran solas al mostrarse u ocultarse.
 */
.pf-sections {
    counter-reset: pf-step;
}

.pf-section {
    counter-increment: pf-step;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    padding: 18px 20px 4px 20px;
    margin-bottom: 18px;
}

.pf-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pf-step-badge {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4454c3;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
}

.pf-step-badge::before {
    content: counter(pf-step);
}

.pf-section-title {
    font: 400 19px/1.2 'Inter', sans-serif;
    color: #717579;
    letter-spacing: 0;
    margin: 0;
}

.pf-section-tool {
    margin-left: auto;
    padding-left: 10px;
}

/* Sub-tarjetas dentro de una sección (ej: Costo de compra / Precio de venta) */
.pf-subsection {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px 2px 16px;
    height: 100%;
}

.pf-subsection-title {
    font: 400 16px/1.2 'Inter', sans-serif;
    color: #717579;
    letter-spacing: 0;
    margin: 0 0 14px 0;
    padding: 0;
    width: 100%;
}

/* Fila de checkboxes de una sección */
.pf-check-row {
    align-items: center;
    margin-top: 8px;
}

.pf-check-row .form-group {
    margin-bottom: 10px;
}

.pf-check-row .form-group > label {
    margin-bottom: 0;
    padding-right: 8px;
}

/* Checkbox/toggle + tooltip en una misma línea, centrados verticalmente entre sí
   (usado por not_for_selling, visible_on_api, is_ecommerce, is_production, enable_stock) */
.pf-toggle-group {
    display: flex;
    align-items: center;
}

/* Checkbox con el diseño de iCheck (cuadrado redondeado, borde de color sin marcar,
   tilde blanco marcado) pero en el azul de marca de Don Gestión (#4454c3). El skin
   de iCheck es un sprite PNG con un celeste fijo que no se puede recolorear, así que
   esto lo recrea en CSS puro para poder tener el color correcto en cualquier parte. */
.pf-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    border: 2px solid #4454c3;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
    transition: background-color .15s, border-color .15s;
}

.pf-checkbox:checked {
    background-color: #4454c3;
    border-color: #4454c3;
}

.pf-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pf-checkbox:disabled {
    opacity: .5;
    cursor: default;
}

/* Separación entre filas de la tabla de stock inicial por sucursal
   (la tabla quita el padding de las celdas, así que el aire va en el input) */
#quick_product_opening_stock_table .purchase_quantity {
    margin: 4px 0;
}

/* Separación entre columnas de ancho automático (col-auto) dentro de una misma fila,
   para que un control quede pegado al anterior en vez de saltar al límite de una columna fija */
.pf-inline-gap {
    margin-left: 32px;
}

@media (max-width: 767px) {
    .pf-inline-gap {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* Input angosto (ej: límite de stock para alertar) para que no ocupe todo el ancho de la columna */
.pf-input-sm {
    max-width: 160px;
}

.pf-notes-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.pf-section .form-group {
    margin-bottom: 14px;
}

/* Dentro del modal de alta rápida el espacio es menor */
.modal .pf-section {
    padding: 14px 14px 2px 14px;
    margin-bottom: 14px;
    box-shadow: none;
}

@media (max-width: 767px) {
    .pf-section {
        padding: 14px 14px 2px 14px;
    }

    .pf-subsection {
        margin-bottom: 14px;
    }

    .pf-section-tool {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
        margin-top: 8px;
    }
}