/*
 * Ingemend Design System
 * Archivo maestro de variables y clases utilitarias compartidas por todo el ecosistema.
 */

:root {
    /* Paleta de Colores Principales */
    --inge-primary: #00ACAC;
    --inge-primary-hover: #008B8B;
    --inge-secondary: #000000;
    --inge-secondary-hover: #2d2d2d;
    --inge-danger: #ef4444;
    --inge-danger-hover: #dc2626;

    /* Fondos y Superficies */
    --inge-bg-main: #F8FAFC;
    --inge-bg-card: #FFFFFF;
    --inge-bg-toolbar: #FFFFFF;

    /* Textos */
    --inge-text-main: #0F172A;
    --inge-text-muted: #475569;
    --inge-text-inverse: #ffffff;

    /* Bordes y Geometría */
    --inge-border-light: #A6A7A2;
    --inge-border-radius-btn: 10px;
    --inge-border-radius-card: 16px;
    --inge-border-radius-input: 8px;

    /* Sombras (Glassmorphism & Soft UI) */
    --inge-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.04);
    --inge-shadow-hover: 0 15px 35px rgba(0, 172, 172, 0.12);
    --inge-shadow-btn: 0 8px 20px rgba(0, 172, 172, 0.3);

    /* Tipografía */
    --inge-font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Clases Utilitarias Universales */
.inge-font {
    font-family: var(--inge-font-main);
}

.inge-btn-primary {
    background: var(--inge-primary) !important;
    color: var(--inge-text-inverse) !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: var(--inge-border-radius-btn) !important;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.inge-btn-primary:hover {
    box-shadow: var(--inge-shadow-btn) !important;
    transform: translateY(-2px);
    color: var(--inge-text-inverse) !important;
}

.inge-card {
    background: var(--inge-bg-card);
    border-radius: var(--inge-border-radius-card);
    box-shadow: var(--inge-shadow-soft);
    border: 1px solid rgba(0,0,0,0.04);
    backdrop-filter: blur(10px);
}

.inge-input {
    border-radius: var(--inge-border-radius-input) !important;
    border: 1px solid var(--inge-border-light) !important;
    font-family: var(--inge-font-main);
    transition: all 0.2s;
}

.inge-input:focus {
    border-color: var(--inge-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

.inge-icon-svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Toggle Switch Estilo iOS / Moderno */
.inge-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    user-select: none;
}
.inge-toggle-input {
    display: none !important;
    appearance: none !important;
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}
.inge-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--inge-border-light);
    border-radius: 24px;
    transition: background 0.3s ease;
}
.inge-toggle-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.inge-toggle-input:checked + .inge-toggle-track {
    background: var(--inge-primary);
}
.inge-toggle-input:checked + .inge-toggle-track::before {
    transform: translateX(20px);
}
.inge-toggle-input:disabled + .inge-toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}
.inge-toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--inge-text-muted);
}
.inge-toggle-input:checked ~ .inge-toggle-label {
    color: var(--inge-primary);
}
.inge-toggle-input:checked.inge-toggle-danger + .inge-toggle-track {
    background: var(--inge-danger);
}
.inge-toggle-input:checked.inge-toggle-danger ~ .inge-toggle-label {
    color: var(--inge-danger);
}