/* ═══════════════════════════════════════════════════════════════════
* Coronel Sur — componentes reusables
*
* Sistema unificado para reemplazar inline styles dispersos en
* templates. Cada componente esta scoped con prefijo `.cs-` para
* coexistir con CSS legado sin colisiones.
*
* Variables CSS heredadas de admin-design-tokens.css. Si falta el
* token (template legado sin tokens cargados), cada regla usa
* fallback hardcoded para no romper.
*
* Uso: agregar `Comprar
* Activo
* ...
* ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
* Dark mode support
*
* Activacion en cascada:
* 1. `[data-theme="dark"]` en o — explicito (toggle)
* 2. `@media (prefers-color-scheme: dark)` cuando no hay data-theme
* — usuario del SO en modo oscuro y la pagina respeta
* 3. `[data-theme="light"]` fuerza light incluso si SO es dark
*
* Templates light-only (tienda_publica, mayorista) NO necesitan optar
* in — los componentes .cs-* siguen viendose bien en dark si el
* cliente tiene el SO en dark mode (.cs-card cambia el fondo a oscuro,
* los textos a claro, los inputs no quedan blanco brillante quemando
* la retina).
*
* Para optar OUT (forzar light siempre): .
* ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface: #161b22;
--surface-2: #22272e;
--border: #30363d;
--border-2: #444c56;
--ink: #e6edf3;
--ink-2: #b1bac4;
--ink-3: #6e7681;
--bg-soft: #0d1117;
}
}
[data-theme="dark"] {
--surface: #161b22;
--surface-2: #22272e;
--border: #30363d;
--border-2: #444c56;
--ink: #e6edf3;
--ink-2: #b1bac4;
--ink-3: #6e7681;
--bg-soft: #0d1117;
}
/* Toggle: . */
.cs-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border, #e5e7eb);
background: var(--surface, #fff);
color: var(--ink-2, #475569);
cursor: pointer;
transition: background .12s, color .12s, transform .12s;
}
.cs-theme-toggle:hover {
background: var(--surface-2, #f3f4f6);
color: var(--ink, #111827);
}
.cs-theme-toggle .cs-theme-toggle__moon { display: inline; }
.cs-theme-toggle .cs-theme-toggle__sun { display: none; }
[data-theme="dark"] .cs-theme-toggle .cs-theme-toggle__moon { display: none; }
[data-theme="dark"] .cs-theme-toggle .cs-theme-toggle__sun { display: inline; }
/* ─── Iconos (sprite SVG cargado 1 vez desde /static/cs-icons.svg) ──
* Uso:
* Saltar al contenido ` */
.cs-skip-link {
position: absolute;
top: -100px;
left: 8px;
background: var(--accent, #f5b51d);
color: var(--accent-ink, #0c0c0e);
padding: 10px 16px;
border-radius: 6px;
font-weight: 700;
z-index: 99999;
text-decoration: none;
transition: top 0.15s;
}
.cs-skip-link:focus {
top: 8px;
}
/* Screen reader only — texto que NO se ve pero el screen reader lo lee.
Uso: `Editar producto
*
*
*
×
*
Titulo
*
Contenido
*
*
*
Pedido guardado
`
* JS: csToast("texto", "ok|err|warn|info", duracion_ms)
*
* **Tooltip** — info al hover sin tomar espacio
* `i `
*
* **Tabs** — switching de paneles en una pagina
* `A
* B
`
* ═══════════════════════════════════════════════════════════════════ */
/* ─── Toast ──────────────────────────────────────────────────────── */
.cs-toast-stack {
position: fixed;
top: 20px;
right: 20px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.cs-toast {
background: var(--ink, #111827);
color: #fff;
padding: 12px 16px;
border-radius: 8px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
min-width: 240px;
max-width: 380px;
pointer-events: auto;
animation: cs-toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-toast--ok { background: #166534; }
.cs-toast--err { background: #991b1b; }
.cs-toast--warn { background: #92400e; }
.cs-toast--info { background: #1e40af; }
.cs-toast.cs-toast--out {
animation: cs-toast-out 200ms ease-in forwards;
}
@keyframes cs-toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes cs-toast-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
/* ─── Tooltip ─────────────────────────────────────────────────────── */
.cs-tooltip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
font-size: 11px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--surface-2, #f3f4f6);
color: var(--ink-3, #6b7280);
font-weight: 700;
}
.cs-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--ink, #111827);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
max-width: 240px;
white-space: normal;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.cs-tooltip:hover::after,
.cs-tooltip:focus::after {
opacity: 1;
}
/* ─── Tabs ────────────────────────────────────────────────────────── */
.cs-tabs {
display: flex;
border-bottom: 1px solid var(--border, #e5e7eb);
gap: 4px;
overflow-x: auto;
}
.cs-tab {
background: transparent;
border: 0;
padding: 10px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-3, #94a3b8);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.12s, border-color 0.12s;
white-space: nowrap;
}
.cs-tab:hover {
color: var(--ink, #111827);
}
.cs-tab--active {
color: var(--accent, #f5b51d);
border-bottom-color: var(--accent, #f5b51d);
}
.cs-tab-panel {
display: none;
padding: 20px 0;
}
.cs-tab-panel--active {
display: block;
}