/* ============================================================================
   Distribución de Excedentes / Retorno Cooperativo — estilos globales del módulo
   Opción B (CLAUDE.md): CSS compartido no aislado, referenciado desde App.razor.
   Aplica solo a las pantallas del módulo (que NO definen .razor.css propio).
   100% tokens --rg-* → soporta tema claro/oscuro.
   ============================================================================ */

/* ── Contenedor / header ─────────────────────────────────────────────────── */
.div-container { padding: 1.25rem; max-width: 100%; animation: divSlideUp .3s ease-out; }
@keyframes divSlideUp { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:translateY(0);} }
.div-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:.75rem; }
.div-header-left { display:flex; align-items:center; gap:.75rem; }
.div-header-icon { font-size:1.75rem; color:var(--rg-accent,#4f46e5); }
.div-title { font-size:1.25rem; font-weight:700; color:var(--rg-text-primary,#1e293b); margin:0; }
.div-subtitle { font-size:.75rem; color:var(--rg-text-muted,#94a3b8); }
.div-header-actions { display:flex; gap:.5rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn-crud { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:none; border-radius:.5rem; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .15s; }
.btn-crud:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:var(--rg-accent,#4f46e5); color:#fff; }
.btn-primary:hover:not(:disabled) { filter:brightness(1.1); }
.btn-outline { background:transparent; color:var(--rg-text-secondary,#475569); border:1px solid var(--rg-border,#e2e8f0); }
.btn-outline:hover:not(:disabled) { background:var(--rg-bg-hover,#f1f5f9); }
.btn-success { background:#16a34a; color:#fff; }
.btn-success:hover:not(:disabled) { filter:brightness(1.1); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover:not(:disabled) { filter:brightness(1.1); }
.btn-sm { padding:.35rem .6rem; font-size:.72rem; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border:none; border-radius:.375rem; cursor:pointer; transition:all .15s; background:transparent; color:var(--rg-text-secondary,#475569); font-size:1rem; }
.btn-icon:hover { background:var(--rg-bg-hover,#f1f5f9); color:var(--rg-text-primary,#1e293b); }
.btn-icon.btn-edit { color:var(--rg-accent,#4f46e5); }
.btn-icon.btn-edit:hover { background:rgba(79,70,229,.12); }
.btn-icon.btn-delete { color:#ef4444; }
.btn-icon.btn-delete:hover { background:rgba(239,68,68,.14); color:#ef4444; }
.btn-icon:disabled { opacity:.4; cursor:not-allowed; }
[data-mode="dark"] .btn-icon { color:var(--rg-text-secondary,#94a3b8); }
[data-mode="dark"] .btn-icon.btn-delete { color:#f87171; }

.btn-help { background:rgba(37,99,235,.08); color:var(--rg-accent,#2563eb); border:1px solid rgba(37,99,235,.25); padding:.45rem .65rem; border-radius:.5rem; font-size:.9rem; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; }
.btn-help:hover { background:rgba(37,99,235,.16); border-color:rgba(37,99,235,.5); }
[data-mode="dark"] .btn-help { background:rgba(37,99,235,.15); color:#93c5fd; border-color:rgba(37,99,235,.35); }

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.div-alert { display:flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:.5rem; margin-bottom:.75rem; font-size:.8rem; font-weight:500; }
.div-alert.success { background:rgba(22,163,74,.12); color:#166534; border:1px solid rgba(22,163,74,.3); }
.div-alert.error { background:rgba(220,38,38,.1); color:#991b1b; border:1px solid rgba(220,38,38,.25); }
.div-alert.warn { background:rgba(217,119,6,.1); color:#92400e; border:1px solid rgba(217,119,6,.3); }
.div-alert-close { margin-left:auto; background:none; border:none; cursor:pointer; color:inherit; opacity:.6; }
[data-mode="dark"] .div-alert.success { color:#86efac; }
[data-mode="dark"] .div-alert.error { color:#fca5a5; }
[data-mode="dark"] .div-alert.warn { color:#fdba74; }

/* ── Secciones tipo tarjeta ──────────────────────────────────────────────── */
.div-section { background:var(--rg-bg-card,#fff); border:1px solid var(--rg-border,#e2e8f0); border-radius:.75rem; padding:1rem 1.25rem; margin-bottom:1rem; }
.div-section-title { display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:700; color:var(--rg-text-primary,#1e293b); margin-bottom:.75rem; }
.div-section-title i { color:var(--rg-accent,#4f46e5); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.div-form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-bottom:.5rem; }
.div-form-group { display:flex; flex-direction:column; gap:.15rem; }
.div-form-group label { font-size:.68rem; font-weight:600; color:var(--rg-text-secondary,#475569); text-transform:uppercase; letter-spacing:.03em; }
.div-form-group input, .div-form-group select { padding:.4rem .55rem; border:1px solid var(--rg-border,#e2e8f0); border-radius:.375rem; font-size:.8rem; color:var(--rg-text-primary,#1e293b); background:var(--rg-bg-input,#fff); outline:none; }
.div-form-group input:focus, .div-form-group select:focus { border-color:var(--rg-accent,#4f46e5); box-shadow:0 0 0 2px rgba(79,70,229,.15); }
.div-check { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.82rem; color:var(--rg-text-primary,#1e293b); }
.div-check input[type=checkbox] { width:1rem; height:1rem; accent-color:var(--rg-accent,#4f46e5); }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.div-table-wrap { border:1px solid var(--rg-border,#e2e8f0); border-radius:.5rem; overflow:auto; background:var(--rg-bg-card,#fff); }
.div-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.div-table th { background:var(--rg-bg-subtle,#f8fafc); color:var(--rg-text-secondary,#475569); font-weight:600; text-align:left; padding:.55rem .7rem; border-bottom:2px solid var(--rg-border,#e2e8f0); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.div-table td { padding:.5rem .7rem; border-bottom:1px solid var(--rg-border,#f1f5f9); color:var(--rg-text-primary,#1e293b); vertical-align:middle; }
.div-table tbody tr:hover { background:var(--rg-bg-hover,#f8fafc); }
.div-table input, .div-table select { width:100%; padding:.3rem .45rem; border:1px solid var(--rg-border,#e2e8f0); border-radius:.35rem; font-size:.76rem; background:var(--rg-bg-input,#fff); color:var(--rg-text-primary,#1e293b); }
.div-table .num { text-align:right; font-family:'Cascadia Code','Fira Code',monospace; }
[data-mode="dark"] .div-table th { background:rgba(255,255,255,.04); }

.font-mono { font-family:'Cascadia Code','Fira Code',monospace; font-size:.76rem; }
.text-center { text-align:center; } .text-right { text-align:right; }
.div-table .text-muted, .text-muted { color:var(--rg-text-muted,#94a3b8); font-size:.72rem; }

/* ── Badges de estado del ciclo ──────────────────────────────────────────── */
.div-badge { display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .55rem; border-radius:1rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.div-badge.borrador     { background:rgba(100,116,139,.15); color:#475569; }
.div-badge.calculado    { background:rgba(37,99,235,.12);  color:#1d4ed8; }
.div-badge.aprobado     { background:rgba(217,119,6,.12);  color:#92400e; }
.div-badge.contabilizado{ background:rgba(124,58,237,.12); color:#6d28d9; }
.div-badge.pagado       { background:rgba(22,163,74,.14);  color:#166534; }
.div-badge.descartado   { background:rgba(220,38,38,.1);   color:#991b1b; }
[data-mode="dark"] .div-badge.calculado { color:#93c5fd; }
[data-mode="dark"] .div-badge.aprobado { color:#fdba74; }
[data-mode="dark"] .div-badge.contabilizado { color:#c4b5fd; }
[data-mode="dark"] .div-badge.pagado { color:#86efac; }
[data-mode="dark"] .div-badge.descartado { color:#fca5a5; }

/* ── Wizard de acciones (pipeline de estados) ────────────────────────────── */
.div-pipeline { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.div-pipe-step { display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:var(--rg-text-muted,#94a3b8); }
.div-pipe-step.done { color:#16a34a; font-weight:600; }
.div-pipe-step.current { color:var(--rg-accent,#4f46e5); font-weight:700; }
.div-pipe-arrow { color:var(--rg-text-muted,#cbd5e1); }

/* KPIs */
.div-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; margin:.5rem 0 1rem; }
.div-kpi { background:var(--rg-bg-subtle,#f8fafc); border:1px solid var(--rg-border,#e2e8f0); border-radius:.5rem; padding:.6rem .8rem; }
.div-kpi-label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--rg-text-muted,#94a3b8); }
.div-kpi-value { font-size:1.05rem; font-weight:700; color:var(--rg-text-primary,#1e293b); font-family:'Cascadia Code','Fira Code',monospace; }
[data-mode="dark"] .div-kpi { background:rgba(255,255,255,.03); }

/* ── Estados loading / vacío ─────────────────────────────────────────────── */
.div-loading, .div-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem; gap:.75rem; color:var(--rg-text-muted,#94a3b8); }
.div-empty i { font-size:2rem; }
.div-spinner { width:2rem; height:2rem; border:3px solid var(--rg-border,#e2e8f0); border-top-color:var(--rg-accent,#4f46e5); border-radius:50%; animation:divSpin .6s linear infinite; }
@keyframes divSpin { to { transform:rotate(360deg); } }
.spin { animation:divSpin .8s linear infinite; }

/* ── Modales ─────────────────────────────────────────────────────────────── */
.div-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); z-index:1000; }
.div-modal-container { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1001; pointer-events:none; padding:1rem; }
.div-modal { pointer-events:auto; background:var(--rg-bg-card,#fff); border-radius:.75rem; width:100%; max-width:640px; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.div-modal.lg { max-width:820px; }
.div-modal.sm { max-width:420px; }
.div-modal-header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1.25rem; border-bottom:1px solid var(--rg-border,#e2e8f0); flex-shrink:0; }
.div-modal-header h2 { margin:0; font-size:1rem; font-weight:700; color:var(--rg-text-primary,#1e293b); display:flex; align-items:center; gap:.5rem; }
.div-modal-close { background:none; border:none; cursor:pointer; color:var(--rg-text-muted,#94a3b8); font-size:1rem; padding:.25rem; border-radius:.25rem; }
.div-modal-close:hover { color:var(--rg-text-primary,#1e293b); background:var(--rg-bg-hover,#f1f5f9); }
.div-modal-body { padding:1rem 1.25rem; overflow-y:auto; flex:1; }
.div-modal-footer { display:flex; justify-content:flex-end; gap:.5rem; padding:.625rem 1.25rem; border-top:1px solid var(--rg-border,#e2e8f0); flex-shrink:0; }

/* ── Contenido de la ayuda ───────────────────────────────────────────────── */
.help-body { display:flex; flex-direction:column; gap:0; padding:0; }
.help-section { padding:1rem 1.25rem; border-bottom:1px solid var(--rg-border,#e2e8f0); }
.help-section:last-child { border-bottom:none; }
.help-section p { font-size:.85rem; color:var(--rg-text-secondary,#475569); margin-bottom:.4rem; }
.help-section ul { padding-left:1.25rem; margin-bottom:0; }
.help-section li { font-size:.85rem; color:var(--rg-text-secondary,#475569); margin-bottom:.2rem; }
.help-section-title { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:700; color:var(--rg-text-primary,#1e293b); margin-bottom:.65rem; }
.help-section-title i { color:var(--rg-accent,#2563eb); }
.help-tip { display:flex; gap:.6rem; align-items:flex-start; background:rgba(37,99,235,.07); border-left:4px solid var(--rg-accent,#2563eb); border-radius:0 .4rem .4rem 0; padding:.65rem .8rem; margin-top:.5rem; font-size:.82rem; color:var(--rg-text-secondary,#475569); }
.help-tip i { color:var(--rg-accent,#2563eb); font-size:1rem; flex-shrink:0; margin-top:.05rem; }
[data-mode="dark"] .help-tip { background:rgba(37,99,235,.12); }

@media (max-width:768px) {
    .div-form-row { grid-template-columns:1fr; }
    .div-container { padding:.75rem; }
    .btn-text { display:none; }
}