/* ==========================================================================
   CONSTRUINMUNIZA ERP - COMPONENTES UNIFICADOS
   Sistema de diseno estandarizado
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE COLORES
   ========================================================================== */
:root {
    --ci-primary: #054f4c;
    --ci-primary-light: #0a6b67;
    --ci-success: #48c78e;
    --ci-success-light: #3bae7a;
    --ci-info: #2a8fc7;
    --ci-info-light: #4ba8d8;
    --ci-warning: #f0ad4e;
    --ci-warning-light: #e09b3d;
    --ci-danger: #e66767;
    --ci-danger-light: #d45555;
    --ci-purple: #6366f1;
    --ci-purple-light: #818cf8;
    --ci-teal: #054f4c;
    --ci-teal-light: #0a6b67;
    --ci-orange: #e09b3d;
    --ci-orange-light: #f0ad4e;
    --ci-brown: #92734e;
    --ci-brown-light: #b8956a;
    --ci-text: #2c3e50;
    --ci-text-muted: #7f8c8d;
    --ci-border: #dde2e8;
    --ci-bg: #f5f7fa;
    --ci-bg-card: #ffffff;
    --ci-radius: 8px;
    --ci-radius-sm: 6px;
    --ci-radius-lg: 10px;
    --ci-shadow: 0 4px 6px rgba(0,0,0,0.1);
    --ci-shadow-hover: 0 8px 15px rgba(0,0,0,0.2);
    --ci-transition: all 0.3s ease;
}

/* ==========================================================================
   2. KPI CARDS - Dashboard indicators
   Uso: .kpi-card dentro de .kpi-row > .kpi-col
   ========================================================================== */
.kpi-row {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -8px;
}

.kpi-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
}

.kpi-card {
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 15px;
    overflow: hidden;
    height: 100%;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ci-shadow-hover);
}

.kpi-header {
    padding: 14px 10px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    text-align: center;
}

.kpi-header .kpi-value,
.kpi-header .kpi-label,
.kpi-header .kpi-icon {
    color: #fff !important;
}

.kpi-icon {
    font-size: 26px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.kpi-value {
    font-size: 17px;
    font-weight: bold;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-label {
    font-size: 11px;
    opacity: 0.95;
    font-weight: 500;
    white-space: nowrap;
}

/* KPI grandes (panel de control) */
.kpi-header.kpi-lg {
    padding: 25px;
}

.kpi-header.kpi-lg .kpi-icon { font-size: 52px; margin-bottom: 12px; }
.kpi-header.kpi-lg .kpi-value { font-size: 36px; margin: 8px 0; }
.kpi-header.kpi-lg .kpi-label { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* KPI compactos (inline en paneles) */
.kpi-card.kpi-compact { margin-bottom: 10px; }
.kpi-card.kpi-compact .kpi-value { font-size: 18px; }
.kpi-card.kpi-compact .kpi-icon { font-size: 22px; opacity: 0.3; float: right; margin-top: -3px; }
.kpi-card.kpi-compact .kpi-label { font-size: 11px; color: #777; text-transform: uppercase; margin: 3px 0 0; }

/* Colores KPI */
.kpi-blue   { --color1: #00a0df; --color2: #57889c; }
.kpi-green  { --color1: #26c281; --color2: #56d89a; }
.kpi-orange { --color1: #f39c12; --color2: #e67e22; }
.kpi-red    { --color1: #e74c3c; --color2: #c0392b; }
.kpi-purple { --color1: #8e44ad; --color2: #9b59b6; }
.kpi-teal   { --color1: #1abc9c; --color2: #16a085; }
.kpi-brown  { --color1: #d1b993; --color2: #c89968; }
.kpi-dark   { --color1: #2c3e50; --color2: #34495e; }
.kpi-navy   { --color1: #394a59; --color2: #4a5d6e; }

/* Panel de control */
.kpi-proceso    { --color1: #57889c; --color2: #00a0df; }
.kpi-reservado  { --color1: #d1b993; --color2: #c89968; }
.kpi-despachos  { --color1: #054f4c; --color2: #26c281; }
.kpi-inventario { --color1: #26c281; --color2: #56d89a; }

/* KPI colores para texto (compactos sin gradient) */
.kpi-card.kpi-compact.kpi-blue .kpi-value   { color: #1a6fa0; }
.kpi-card.kpi-compact.kpi-green .kpi-value  { color: #054f4c; }
.kpi-card.kpi-compact.kpi-orange .kpi-value { color: #c07b1a; }
.kpi-card.kpi-compact.kpi-red .kpi-value    { color: #b83c3c; }
.kpi-card.kpi-compact.kpi-purple .kpi-value { color: #4338ca; }
.kpi-card.kpi-compact.kpi-teal .kpi-value   { color: #033c3a; }
.kpi-card.kpi-compact.kpi-dark .kpi-value   { color: #141e2b; }
.kpi-card.kpi-compact.kpi-brown .kpi-value  { color: #6b5534; }

.kpi-card.kpi-compact.kpi-blue .kpi-icon   { color: #1a6fa0; }
.kpi-card.kpi-compact.kpi-green .kpi-icon  { color: #054f4c; }
.kpi-card.kpi-compact.kpi-orange .kpi-icon { color: #c07b1a; }
.kpi-card.kpi-compact.kpi-red .kpi-icon    { color: #b83c3c; }
.kpi-card.kpi-compact.kpi-purple .kpi-icon { color: #4338ca; }
.kpi-card.kpi-compact.kpi-teal .kpi-icon   { color: #033c3a; }
.kpi-card.kpi-compact.kpi-dark .kpi-icon   { color: #141e2b; }
.kpi-card.kpi-compact.kpi-brown .kpi-icon  { color: #6b5534; }

/* KPI responsive */
@media (max-width: 992px) {
    .kpi-row { flex-wrap: wrap; }
    .kpi-col { flex: 0 0 33.33%; max-width: 33.33%; }
}

@media (max-width: 767px) {
    .kpi-col { flex: 0 0 100% !important; max-width: 100% !important; }
    .kpi-card { margin-bottom: 8px; }
    .kpi-value { white-space: normal !important; }
    .kpi-label { white-space: normal !important; }

    /* KPI cards: contenido apilado verticalmente y centrado al 100% del panel */
    .kpi-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 8px !important;
        width: 100% !important;
    }
    .kpi-header .kpi-icon {
        font-size: 22px !important;
        margin: 0 0 4px 0 !important;
        float: none !important;
        display: block !important;
    }
    .kpi-header .kpi-value {
        font-size: 20px !important;
        margin: 2px 0 !important;
        word-break: break-word !important;
        width: 100% !important;
    }
    .kpi-header .kpi-label {
        font-size: 11px !important;
        margin: 2px 0 0 0 !important;
        word-break: break-word !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   3. BOTONES ESTANDAR POR ACCION
   ========================================================================== */

/* Primario: guardar, confirmar, enviar */
.btn-primary  { background: var(--ci-primary) !important; border-color: var(--ci-primary) !important; }
.btn-primary:hover { background: var(--ci-primary-light) !important; }

/* Exito: aprobar, completar */
.btn-success  { background: var(--ci-success) !important; border-color: var(--ci-success) !important; }
.btn-success:hover { background: var(--ci-success-light) !important; }

/* Info: buscar, consultar, ver detalle */
.btn-info     { background: var(--ci-info) !important; border-color: var(--ci-info) !important; }
.btn-info:hover { background: var(--ci-info-light) !important; }

/* Advertencia: editar, modificar */
.btn-warning  { background: var(--ci-warning) !important; border-color: var(--ci-warning) !important; }
.btn-warning:hover { background: var(--ci-warning-light) !important; }

/* Peligro: eliminar, rechazar, anular */
.btn-danger   { background: var(--ci-danger) !important; border-color: var(--ci-danger) !important; }
.btn-danger:hover { background: var(--ci-danger-light) !important; }

/* ==========================================================================
   4. BADGES / ESTADOS
   ========================================================================== */
.badge-est,
.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-est.est-verde,
.badge-green  { background: rgba(38, 194, 129, 0.12); color: #059669; }
.badge-est.est-amarillo,
.badge-orange { background: rgba(243, 156, 18, 0.12); color: #d97706; }
.badge-est.est-rojo,
.badge-red    { background: rgba(231, 76, 60, 0.12); color: #e74c3c; }
.badge-est.est-azul,
.badge-blue   { background: rgba(0, 160, 223, 0.12); color: #0284c7; }
.badge-est.est-morado,
.badge-purple { background: rgba(142, 68, 173, 0.12); color: #8e44ad; }

/* ==========================================================================
   5. FILTROS DE BUSQUEDA
   ========================================================================== */
.filtros-panel .form-group { margin-bottom: 10px; }
.filtros-panel label { font-weight: 600; font-size: 12px; }
.filtros-panel .form-control { height: auto !important; min-height: 34px; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 10px 0;
}

.filter-bar .fc { flex: 1; min-width: 120px; }
.filter-bar input,
.filter-bar select {
    border: 1.5px solid var(--ci-border);
    border-radius: var(--ci-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    width: 100%;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 3px rgba(5, 79, 76, 0.1);
    outline: none;
}

/* ==========================================================================
   6. TABLAS ESTANDAR
   ========================================================================== */
.ci-table { font-size: 12px; }
.ci-table th {
    background: #f5f5f5;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.ci-table td { vertical-align: middle !important; }
.ci-table tbody tr:hover { background: #f0f7ff; }

/* Ranking en tablas */
.ranking-pos {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
}

.ranking-pos-1, .ranking-1 { background: #FFD700; }
.ranking-pos-2, .ranking-2 { background: #C0C0C0; }
.ranking-pos-3, .ranking-3 { background: #CD7F32; }
.ranking-pos-n, .ranking-other { background: #bdc3c7; }

/* Tabla sortable */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { background: #e8f4fd; }
.sortable::after { content: ' \f0dc'; font-family: FontAwesome; font-size: 10px; color: #bbb; margin-left: 4px; }
.sortable.asc::after { content: ' \f0de'; color: var(--ci-primary); }
.sortable.desc::after { content: ' \f0dd'; color: var(--ci-primary); }

/* ==========================================================================
   7. GRAFICAS Y CHARTS
   ========================================================================== */
.chart-container { min-height: 280px; padding: 10px; }
.chart-container-sm { min-height: 200px; padding: 10px; }
.morris-hover { z-index: 100; }

/* Toggle chart/table */
.toggle-chart-table {
    color: #999;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color 0.2s;
}
.toggle-chart-table:hover { color: var(--ci-info); text-decoration: none; }

.table-toggle-view { padding: 0; }
.table-toggle-view .table { font-size: 11px; margin: 0; }
.table-toggle-view .table th { background: #f5f5f5; font-size: 11px; text-transform: uppercase; }

/* ==========================================================================
   8. BARRAS DE PROGRESO
   ========================================================================== */
.bar-container { margin-bottom: 10px; }
.bar-label { font-size: 12px; font-weight: 600; margin-bottom: 3px; display: flex; justify-content: space-between; }
.bar-track { background: #ecf0f1; border-radius: 4px; height: 22px; overflow: hidden; }
.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
    display: flex;
    align-items: center;
    padding-left: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 30px;
}

/* ==========================================================================
   9. AUTOCOMPLETE / BUSCADOR
   ========================================================================== */
.ui-autocomplete,
.autocomplete-list,
.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 var(--ci-radius-sm) var(--ci-radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.autocomplete-list .ac-item,
.ac-dropdown .ac-item,
.ui-menu-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.autocomplete-list .ac-item:last-child,
.ac-dropdown .ac-item:last-child { border-bottom: none; }

.autocomplete-list .ac-item:hover,
.autocomplete-list .ac-item.ac-active,
.ac-dropdown .ac-item:hover,
.ac-dropdown .ac-item.ac-active {
    background: #e8f4fd;
}

/* ==========================================================================
   10. UPLOAD / CARGA ARCHIVOS
   ========================================================================== */
.upload-zone {
    background: #f9f9f9;
    border: 2px dashed #ccc;
    border-radius: var(--ci-radius);
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--ci-transition);
}
.upload-zone:hover { border-color: var(--ci-info); background: #f0f7ff; }
.upload-zone.dragover { border-color: var(--ci-success); background: #e8f8f0; }
.upload-zone i { font-size: 40px; color: #aaa; margin-bottom: 10px; display: block; }
.upload-zone p { color: #777; font-size: 13px; margin: 0; }

/* ==========================================================================
   11. TABS ESTANDAR
   ========================================================================== */
.ci-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 0;
}

.ci-tabs .ci-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ci-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--ci-transition);
}

.ci-tabs .ci-tab:hover { color: var(--ci-primary); }
.ci-tabs .ci-tab.active {
    color: var(--ci-primary);
    border-bottom-color: var(--ci-primary);
    font-weight: 600;
}

.ci-tabs .ci-tab .badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* Dashboard toggle tabs (botones redondeados) */
.dashboard-tabs { margin-bottom: 20px; text-align: center; }
.dashboard-tabs .btn { margin: 3px 2px; font-size: 12px; border-radius: 20px; padding: 7px 16px; }
.dashboard-tabs .btn.active { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* ==========================================================================
   12. CARDS GENERICAS
   ========================================================================== */
.ci-card {
    background: var(--ci-bg-card);
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow);
    padding: 16px;
    margin-bottom: 15px;
    transition: var(--ci-transition);
}

.ci-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ci-shadow-hover);
}

.ci-card-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--ci-text);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f3f4f6;
}

/* ==========================================================================
   13. PROCESO INDICATORS (Panel de control)
   ========================================================================== */
.proceso-indicator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--ci-radius-lg);
    background: #fff;
    border-left: 4px solid var(--pi-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.proceso-indicator:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.proceso-indicator .pi-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
    background: linear-gradient(135deg, var(--pi-color), var(--pi-color-light));
    flex-shrink: 0; position: relative;
}

.proceso-indicator .pi-icon .pi-badge {
    position: absolute; top: -5px; right: -5px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.pi-badge-sitio     { background: #059669; color: #fff; }
.pi-badge-pendiente { background: #d97706; color: #fff; }
.pi-badge-proceso   { background: #0284c7; color: #fff; }

.proceso-indicator .pi-info    { flex: 1; line-height: 1.3; }
.proceso-indicator .pi-nombre  { font-size: 13px; font-weight: 700; color: #1f2937; }
.proceso-indicator .pi-estado  { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; }
.proceso-indicator .pi-datos   { text-align: right; line-height: 1.3; }
.proceso-indicator .pi-m3      { font-size: 20px; font-weight: 800; color: var(--pi-color); }
.proceso-indicator .pi-m3 small { font-size: 12px; font-weight: 500; opacity: 0.7; }
.proceso-indicator .pi-burros  { font-size: 11px; color: #9ca3af; }

.pi-patio      { --pi-color: #059669; --pi-color-light: #34d399; }
.pi-secado     { --pi-color: #d97706; --pi-color-light: #fbbf24; }
.pi-inmunizado { --pi-color: #7c3aed; --pi-color-light: #a78bfa; }
.pi-cilindrado { --pi-color: #0284c7; --pi-color-light: #38bdf8; }
.pi-cepillado  { --pi-color: #0d9488; --pi-color-light: #5eead4; }
.pi-otro       { --pi-color: #6b7280; --pi-color-light: #9ca3af; }

.proceso-indicators-title {
    font-size: 16px; font-weight: 700; color: #1f2937;
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #f3f4f6;
}
.proceso-indicators-title i { margin-right: 6px; }
.proceso-indicators-title .fa-cubes { color: #059669; }
.proceso-indicators-title .fa-fire { color: #d97706; }
.proceso-indicators-title .fa-truck { color: #0284c7; }

.proceso-total-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: var(--ci-radius); margin-top: 6px; font-size: 13px; font-weight: 600; color: #374151;
}
.proceso-total-bar .total-m3 { font-size: 18px; font-weight: 800; color: var(--ci-primary); }

/* ==========================================================================
   14. DESPACHO ESTADOS
   ========================================================================== */
.despacho-estado {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
}

.despacho-estado.estado-pendiente  { background: rgba(243,156,18,0.12); color: #d97706; }
.despacho-estado.estado-cargado    { background: rgba(0,160,223,0.12); color: #0284c7; }
.despacho-estado.estado-encamino   { background: rgba(38,194,129,0.12); color: #059669; }
.despacho-estado.estado-entregado  { background: rgba(5,79,76,0.15); color: var(--ci-primary); }

/* ==========================================================================
   15. LEYENDAS DE GRAFICAS
   ========================================================================== */
.line-legend {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 18px; padding: 10px 12px 4px;
    border-top: 1px solid #eee; margin-top: 8px;
}
.line-legend-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.line-legend-line {
    width: 24px; height: 3px; border-radius: 2px; position: relative;
}
.line-legend-line::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: inherit; border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.line-legend-label { font-size: 12px; font-weight: 600; color: #2c3e50; }
.line-legend-value { font-size: 11px; color: #7f8c8d; }

/* Donut chart legends */
.donut-chart-sm { min-height: 220px; padding: 10px; }
.donut-legend { padding: 8px 12px; max-height: 260px; overflow-y: auto; }
.donut-legend .legend-item { display: flex; align-items: center; padding: 6px 8px; border-radius: 6px; margin-bottom: 3px; transition: background 0.2s; }
.donut-legend .legend-item:hover { background: #f0f7ff; }
.donut-legend .legend-color { width: 16px; height: 16px; border-radius: 4px; margin-right: 10px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.donut-legend .legend-text { flex: 1; min-width: 0; }
.donut-legend .legend-label { font-size: 12px; font-weight: 600; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.donut-legend .legend-detail { font-size: 11px; color: #7f8c8d; margin-top: 1px; }
.donut-legend .legend-pct { font-weight: 700; font-size: 12px; margin-left: 8px; white-space: nowrap; padding: 2px 8px; border-radius: 10px; color: #fff; min-width: 48px; text-align: center; }

/* ==========================================================================
   16. LAYOUT HELPERS
   ========================================================================== */
.row-flex-panel { display: flex; flex-wrap: wrap; }
.col-flex-panel { display: flex; flex-direction: column; }

.section-loading { text-align: center; padding: 60px 20px; color: #999; }
.section-loading i { font-size: 28px; }

.periodo-badge { display: inline-block; padding: 4px 12px; background: var(--ci-info); color: #fff; border-radius: 15px; font-size: 12px; font-weight: 600; }

.diff-pos { color: var(--ci-success); font-weight: 600; }
.diff-neg { color: var(--ci-danger); font-weight: 600; }

.mini-kpi { text-align: center; padding: 15px 10px; border-radius: var(--ci-radius-sm); background: #f8f9fa; margin-bottom: 10px; }
.mini-kpi .mini-kpi-value { font-size: 20px; font-weight: bold; }
.mini-kpi .mini-kpi-label { font-size: 11px; color: #666; margin-top: 3px; }

/* Tags */
.cliente-tag { display: inline-block; background: #e8f4fd; border: 1px solid #bee5eb; border-radius: 3px; padding: 2px 6px; font-size: 11px; margin: 2px 2px 2px 0; }
.cliente-tag .remove-tag { cursor: pointer; margin-left: 4px; color: var(--ci-danger); font-weight: bold; }

/* ==========================================================================
   17. FOTOS / IMAGENES
   ========================================================================== */
.foto-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-grid img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--ci-radius-sm); cursor: pointer; transition: var(--ci-transition); border: 2px solid var(--ci-border); }
.foto-grid img:hover { transform: scale(1.05); border-color: var(--ci-info); }

/* ==========================================================================
   18. PRINT
   ========================================================================== */
@media print {
    body * { visibility: hidden; }
    .modal-body, .modal-body * { visibility: visible; }
    .modal-body { position: absolute; left: 0; top: 0; width: 100%; }
    #imprimir, #botonesModal, .modal-backdrop, .modal-header .close,
    .btn, .no-print { display: none !important; }
    aside, .header, .toggle-nav, .nav-tabs, .breadcrumb { display: none !important; }
    #main-content { margin: 0 !important; }
    .panel { break-inside: avoid; border: 1px solid #ddd !important; }
    .table { min-width: auto !important; }
}

/* ==========================================================================
   19. MOBILE - BOTONES SOLO ICONO
   ========================================================================== */
@media (max-width: 767px) {
    /* Botones al lado de inputs (buscar): solo icono */
    div[style*="flex"] > .btn > span,
    .input-group-btn .btn > span,
    .input-group .btn > span {
        display: none !important;
    }

    /* hidden-xs de Bootstrap ya oculta spans con esa clase */

    /* Botones en celdas de tablas: solo icono */
    table td .btn,
    .table td .btn,
    .divScrollList td .btn {
        font-size: 0 !important;
        padding: 8px 10px !important;
    }

    table td .btn > i,
    .table td .btn > i,
    .divScrollList td .btn > i {
        font-size: 14px !important;
    }

    /* Botones en celdas sin icono: texto pequeño */
    table td .btn:not(:has(i)),
    .table td .btn:not(:has(i)) {
        font-size: 11px !important;
    }

    /* Proceso indicators compactos */
    .proceso-indicator { padding: 10px; gap: 8px; margin-bottom: 8px; }
    .proceso-indicator .pi-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; }
    .proceso-indicator .pi-nombre { font-size: 12px; }
    .proceso-indicator .pi-m3 { font-size: 16px; }
    .proceso-indicators-title { font-size: 14px; }

    /* KPI row wrap */
    .kpi-row { flex-wrap: wrap !important; }
    .kpi-col { flex: 1 1 auto !important; min-width: 140px !important; }

    /* Row flex panel */
    .row-flex-panel { display: block; }
    .col-flex-panel { display: block; }

    /* Charts mas pequenos */
    .chart-container { min-height: 200px !important; }

    /* Upload zone compacta */
    .upload-zone { padding: 15px; }
    .upload-zone i { font-size: 30px; }
}