/* ============================================================================
   CoopControl — Capa de estilo moderno (marca Selva Yasuní / Lerion)
   Usa las variables --brand-* inyectadas por App\Support\Tema::cssVars().
   Aditiva y de bajo riesgo: profundidad, foco de marca, hover e interacción.
   ========================================================================== */

:root {
    --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    --brand-ring: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --ui-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --ui-shadow-md: 0 6px 16px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.05);
    --ui-shadow-lg: 0 16px 40px rgba(16,24,40,.12);
    --ui-radius: 14px;
}

/* ---- Fondo general más sobrio (cool) ---- */
body.bg-surface { background: #F4F7FA; }

/* ---- Tipografía / encabezados ---- */
h1, h2, h3 { letter-spacing: -.01em; }

/* ---- Tarjetas: profundidad y bordes suaves ---- */
main .bg-white.rounded-xl,
main .bg-white.rounded-2xl,
main .bg-white.rounded-lg {
    box-shadow: var(--ui-shadow-sm);
    border-color: #eef1f5 !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
/* Tarjetas "clicables" (enlaces) → elevación al pasar el mouse */
main a.bg-white.rounded-xl:hover,
main a.bg-white.rounded-2xl:hover {
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
    border-color: var(--brand-primary-soft) !important;
}

/* ---- KPI / tarjetas con borde superior de acento (se activa con .kpi) ---- */
.kpi { position: relative; overflow: hidden; }
.kpi::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-light));
}
.kpi.kpi-green::before { background: var(--brand-accent-2); }
.kpi.kpi-gold::before  { background: var(--brand-accent); }
.kpi.kpi-red::before   { background: #ef4444; }

/* ---- Botones: transición, hover e interacción ---- */
button, a, [role="button"] { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease, filter .15s ease; }
[style*="linear-gradient"][style*="var(--brand-primary)"],
.gold-gradient {
    box-shadow: 0 2px 8px var(--brand-primary-soft);
    border-radius: 12px;
}
[style*="linear-gradient"][style*="var(--brand-primary)"]:hover,
.gold-gradient:hover { filter: brightness(1.06); box-shadow: var(--ui-shadow-md); }
button:active, .gold-gradient:active,
[style*="linear-gradient"][style*="var(--brand-primary)"]:active { transform: translateY(1px); }

/* Sustituir negros sólidos por AZUL PROFUNDO de marca (botones secundarios, etc.) */
.bg-\[\#111111\] { background-color: var(--brand-primary-deep) !important; }
.hover\:bg-\[\#1C1C1C\]:hover { background-color: var(--brand-primary-dark) !important; }
.bg-\[\#111111\]:hover { filter: brightness(1.12); }

/* ---- Inputs / selects / textarea: foco de marca consistente ---- */
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
main select, main textarea {
    transition: border-color .15s ease, box-shadow .15s ease;
}
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
main select:focus, main textarea:focus {
    outline: none;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* ---- Tablas: encabezados modernos + hover de fila ---- */
main table thead th {
    text-transform: uppercase;
    letter-spacing: .045em;
    font-size: 11px;
    color: #64748b;
    background: #f8fafc;
}
main table tbody tr { transition: background-color .12s ease; }
main table tbody tr:hover { background: #f7fafc; }

/* ---- Sidebar: ítems con interacción suave y barra de acento ---- */
aside nav a, aside nav button { transition: background-color .15s ease, color .15s ease, padding-left .15s ease; }
aside nav a:hover { padding-left: 1.15rem; }

/* ---- Scrollbar moderno ---- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* ---- Badges/píldoras: leve realce ---- */
.rounded-full.text-xs { font-weight: 600; letter-spacing: .01em; }

/* ---- Modales: aparición suave ---- */
[x-show] { transition: opacity .15s ease; }

/* ---- Foco accesible para teclado ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand-primary); outline-offset: 1px;
}