/*
 * WÖRTH Selection · tokens de diseño
 *
 * Única fuente de colores, tipografías y medidas para las páginas nuevas
 * (login y Mi panel). Antes había cinco valores distintos de "verde WÖRTH"
 * repartidos en varias hojas; aquí queda uno solo por rol.
 */

:root {
    /* Color */
    --ws-forest: #0F3B2E;        /* verde de marca: títulos, botones, barras */
    --ws-forest-deep: #08271E;   /* texto fuerte y pie */
    --ws-forest-soft: #E6EFEB;   /* fondos suaves verdes */
    --ws-sand: #C9A775;          /* acento: checks, medidores, subrayados */
    --ws-sand-deep: #9C7A45;     /* acento sobre fondos claros (contraste AA) */
    --ws-ivory: #F7F5EF;         /* fondo de página del panel */
    --ws-paper: #FFFFFF;
    --ws-ink: #1E2B27;           /* texto principal */
    --ws-muted: #5F6F69;         /* texto secundario */
    --ws-line: #D9E3DE;          /* bordes */
    --ws-field: #8A9893;         /* borde de campos */
    --ws-danger: #B42318;
    --ws-danger-soft: #FEF3F2;
    --ws-ok: #087443;

    /* Tipografía */
    --ws-display: "Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
    --ws-sans: Barlow,"Helvetica Neue",Arial,sans-serif;

    /* Medidas */
    --ws-radius-pill: 999px;
    --ws-radius: 4px;
    --ws-focus: 0 0 0 3px rgba(201, 167, 117, .55);
    --ws-content: 1120px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Barlow,"Helvetica Neue",Arial,sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ws-ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ws-forest);
}

:focus-visible {
    outline: none;
    box-shadow: var(--ws-focus);
}

.ws-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Botones */

.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    border: 1.5px solid transparent;
    border-radius: var(--ws-radius-pill);
    font: 600 15px/1 var(--ws-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ws-btn--primary {
    background: var(--ws-forest);
    color: #fff;
}

.ws-btn--primary:hover {
    background: var(--ws-forest-deep);
}

.ws-btn--sand {
    background: var(--ws-sand);
    color: var(--ws-forest-deep);
}

.ws-btn--sand:hover {
    background: #D6B88B;
}

.ws-btn--ghost {
    background: transparent;
    border-color: var(--ws-forest);
    color: var(--ws-forest);
}

.ws-btn--ghost:hover {
    background: var(--ws-forest-soft);
}

.ws-btn--block {
    width: 100%;
}

.ws-btn[disabled],
.ws-btn[aria-busy="true"] {
    opacity: .7;
    cursor: progress;
}

/* Campos */

.ws-field {
    margin-bottom: 22px;
}

.ws-field label,
.ws-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ws-forest-deep);
}

.ws-input,
.ws-select {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1.5px solid var(--ws-field);
    border-radius: var(--ws-radius);
    background: #fff;
    font: 400 15px/1.3 var(--ws-sans);
    color: var(--ws-ink);
}

.ws-input:focus,
.ws-select:focus {
    border-color: var(--ws-forest);
    box-shadow: var(--ws-focus);
    outline: none;
}

.ws-input[aria-invalid="true"] {
    border-color: var(--ws-danger);
}

.ws-check {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ws-ink);
    cursor: pointer;
}

.ws-check input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--ws-forest);
    cursor: pointer;
}

.ws-alert {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--ws-danger);
    background: var(--ws-danger-soft);
    color: var(--ws-danger);
    font-size: 14px;
}

.ws-alert[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}