/* ==========================================================================
   StockPro · v9.18.0 — Pantalla "Costos y rentabilidad"

   POR QUÉ ES UN ARCHIVO APARTE
   styles.css pasa de 360 KB y ux-v9170.css es la capa del rediseño Obsidian.
   Esta pantalla es nueva y no reescribe nada de las otras dos, así que vive
   sola: se lee de un golpe y se puede quitar sin tocar lo demás.

   ORDEN DE CARGA: después de ux-v9170.css. Usa los mismos tokens de ahí
   (--ux-azul, --ux-esmeralda, --ux-coral, --ux-ambar, --font-mono) para que
   se vea como el resto del sistema y no como un parche.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIRA DE INDICADORES
   -------------------------------------------------------------------------- */
.costos-kpis-grid-v9180 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.costos-kpi-v9180 {
    background: var(--bg-secondary);
    border: 1px solid var(--ux-borde, var(--border-color));
    border-radius: var(--radius-lg, 12px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.costos-kpi-v9180 > span {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
}

.costos-kpi-v9180 > strong {
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    line-height: 1.1;
    color: var(--text-primary);
}

/* El <small> de adentro es el denominador ("3 / 12"): no debe competir. */
.costos-kpi-v9180 > strong small {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.costos-kpi-v9180 > strong.ok { color: var(--ux-esmeralda, #10B981); }
.costos-kpi-v9180 > strong.warning { color: var(--ux-ambar, #F59E0B); }

.costos-kpi-v9180 > small {
    font-size: .78rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   2. DOS COLUMNAS: "TU DINERO" Y LAS ALERTAS
   -------------------------------------------------------------------------- */
.costos-layout-v9180 {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

@media (max-width: 1080px) {
    .costos-layout-v9180 { grid-template-columns: 1fr; }
}

.costos-dinero-card-v9180,
.costos-alertas-card-v9180,
.costos-tabla-card-v9180 { padding: 20px; }

/* --------------------------------------------------------------------------
   3. CAPTURA DE GASTOS FIJOS (antes había que ir hasta Configuración)
   -------------------------------------------------------------------------- */
.costos-gastos-form-v9180 {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ux-borde, var(--border-color));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.costos-gastos-form-v9180 > label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.costos-gastos-row-v9180 {
    display: flex;
    gap: 8px;
    align-items: center;
}

.costos-gastos-row-v9180 .input-field {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
}

.costos-gastos-row-v9180 .btn { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   4. ALERTAS
   -------------------------------------------------------------------------- */
.costos-alerta-grupo-v9180 {
    border: 1px solid var(--ux-borde, var(--border-color));
    border-radius: var(--radius-lg, 12px);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, .02);
}

.costos-alerta-grupo-v9180:last-child { margin-bottom: 0; }

.costos-alerta-grupo-v9180 > strong {
    display: block;
    font-size: .9rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.costos-alerta-grupo-v9180 > small {
    display: block;
    margin-top: 8px;
    font-size: .78rem;
    color: var(--text-secondary);
}

.costos-alerta-grupo-v9180.es-perdida { border-left: 3px solid var(--ux-coral, #EF4444); }
.costos-alerta-grupo-v9180.es-baja { border-left: 3px solid var(--ux-ambar, #F59E0B); }
.costos-alerta-grupo-v9180.es-falta { border-left: 3px solid var(--ux-azul, #3B82F6); }
.costos-alerta-grupo-v9180.es-ok { border-left: 3px solid var(--ux-esmeralda, #10B981); }

.costos-alerta-fila-v9180 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ux-borde, var(--border-color));
}

.costos-alerta-fila-v9180:last-of-type { border-bottom: 0; }

.costos-alerta-fila-v9180 strong {
    display: block;
    font-size: .88rem;
    color: var(--text-primary);
}

.costos-alerta-fila-v9180 small {
    display: block;
    font-size: .76rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5. BARRA DE FILTROS DE LA TABLA
   -------------------------------------------------------------------------- */
.costos-toolbar-v9180 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 12px;
}

.costos-chips-v9180 { display: flex; gap: 6px; flex-wrap: wrap; }

.costos-chip-v9180 {
    border: 1px solid var(--ux-borde, var(--border-color));
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-full, 9999px);
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast, all .15s ease);
}

.costos-chip-v9180:hover { color: var(--text-primary); border-color: var(--ux-azul, #3B82F6); }

.costos-chip-v9180.activo {
    background: var(--ux-azul-suave, rgba(59, 130, 246, .12));
    border-color: var(--ux-azul, #3B82F6);
    color: var(--ux-azul, #3B82F6);
}

.costos-buscar-input-v9180 { max-width: 260px; }

.costos-aviso-v9180 {
    margin: 0 0 12px;
    font-size: .8rem;
    color: var(--text-secondary);
    background: var(--ux-azul-suave, rgba(59, 130, 246, .12));
    border-radius: var(--radius-md, 8px);
    padding: 8px 12px;
}

/* --------------------------------------------------------------------------
   6. TABLA PLATILLO POR PLATILLO

   Es una rejilla, no un <table>: en el teléfono la última columna (el botón
   de receta) se baja sola sin partir el renglón.
   -------------------------------------------------------------------------- */
.costos-fila-v9180 {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ux-borde, var(--border-color));
    border-radius: var(--radius-md, 8px);
}

.costos-fila-v9180:hover:not(.es-encabezado) { background: rgba(255, 255, 255, .025); }

.costos-fila-v9180.es-encabezado {
    border-bottom: 1px solid var(--ux-borde, var(--border-color));
    padding-bottom: 8px;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.costos-th-v9180 {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    transition: var(--transition-fast, all .15s ease);
}

.costos-th-v9180:hover { color: var(--text-primary); }
.costos-th-v9180.activo { color: var(--ux-azul, #3B82F6); }
.costos-th-v9180.activo::after { content: ' ↓'; }

.costos-nombre-v9180 {
    text-align: left;
    font-size: .9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.costos-num-v9180 {
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: .86rem;
    color: var(--text-secondary);
}

/* El dinero que se queda el negocio va en verde: es el número que importa. */
.costos-fila-v9180:not(.es-encabezado) .costos-margen-v9180,
.costos-fila-v9180:not(.es-encabezado) .costos-pct-v9180 { color: var(--ux-esmeralda, #10B981); }

.costos-fila-v9180.es-baja .costos-margen-v9180,
.costos-fila-v9180.es-baja .costos-pct-v9180 { color: var(--ux-ambar, #F59E0B); }

.costos-fila-v9180.es-perdida .costos-margen-v9180,
.costos-fila-v9180.es-perdida .costos-pct-v9180 { color: var(--ux-coral, #EF4444); }

/* Sin costo no hay ganancia que pintar: el guion va en gris, no en verde. */
.costos-fila-v9180.es-falta .costos-margen-v9180,
.costos-fila-v9180.es-falta .costos-pct-v9180 { color: var(--text-secondary); }

.costos-fila-v9180.es-falta { opacity: .72; }
.costos-fila-v9180.es-falta .costos-nombre-v9180::after {
    content: ' · falta su costo';
    font-size: .72rem;
    color: var(--ux-azul, #3B82F6);
}

.costos-receta-v9180 { text-align: right; font-size: .72rem; color: var(--text-secondary); }
.costos-receta-v9180 .btn { white-space: nowrap; }
.costos-sin-receta-v9180 { opacity: .6; }

.costos-tabla-v9180 { max-height: 62vh; overflow-y: auto; }

/* En teléfono la rejilla de 6 columnas no cabe: cada renglón se vuelve una
   ficha de dos columnas con etiquetas. */
@media (max-width: 880px) {
    .costos-fila-v9180 {
        grid-template-columns: 1fr auto;
        gap: 2px 10px;
        border: 1px solid var(--ux-borde, var(--border-color));
        margin-bottom: 8px;
    }
    .costos-fila-v9180.es-encabezado { display: none; }
    .costos-nombre-v9180 { grid-column: 1 / -1; font-weight: 600; white-space: normal; }
    .costos-num-v9180 { text-align: left; }
    .costos-num-v9180::before {
        content: attr(data-etiqueta) ' ';
        font-family: var(--font-primary, inherit);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-secondary);
    }
    .costos-receta-v9180 { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
    .costos-buscar-input-v9180 { max-width: none; width: 100%; }
}

/* --------------------------------------------------------------------------
   7. EL RECUADRO QUE QUEDÓ EN VENTAS INTELIGENTES (solo lleva a esta pantalla)
   -------------------------------------------------------------------------- */
.analisis-rest-resumen-v9180 { margin: 0 0 6px; color: var(--text-primary); }
.analisis-rest-alerta-v9180 { margin: 0 0 12px; font-size: .85rem; color: var(--ux-ambar, #F59E0B); }