/*
 * UiMetadata.Elements — Switch + ActionButton + simple inputs + Badge
 *
 * Self-contained: every rule falls back to a literal default via
 * var(--token, default) so this stylesheet works even if UiMetadata.Grid's
 * own token sheet isn't loaded. Uses the same --grid-* token names as
 * grid.css on purpose, for backward compatibility with any consumer that
 * already overrides them.
 */

/* ── Boolean switch ─────────────────────────────────────────────────────── */
.switch-wrapper { display: flex; align-items: center; gap: var(--grid-gap-sm, 0.5rem); }

.switch {
    position: relative;
    display : inline-block;
    width   : var(--grid-switch-width, 44px);
    height  : var(--grid-switch-height, 24px);
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position        : absolute;
    cursor          : pointer;
    inset           : 0;
    background-color: var(--grid-switch-off, #d1d5db);
    border-radius   : var(--grid-switch-height, 24px);
    transition      : background-color .3s;
}

.slider::before {
    content      : "";
    position     : absolute;
    height       : var(--grid-switch-thumb-size, 18px);
    width        : var(--grid-switch-thumb-size, 18px);
    left         : 3px;
    bottom       : 3px;
    background   : var(--grid-switch-thumb, #ffffff);
    border-radius: 50%;
    transition   : transform .3s;
}

input:checked + .slider          { background-color: var(--grid-switch-on, #2563eb); }
input:checked + .slider::before  { transform: translateX(20px); }

.toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--grid-font-size-md, 0.92rem);
    color: var(--grid-text-main, #111827);
    cursor: pointer;
    padding: 0.5rem 0.9rem;
}

.toggle-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary, #2563eb);
    cursor: pointer;
}

/* ── Action buttons (icon + onclick) ────────────────────────────────────── */
.btn-action {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 6px 12px;
    border-radius  : var(--grid-radius-sm, 6px);
    font-size      : var(--grid-font-size-md, 14px);
    font-weight    : 500;
    text-decoration: none;
    cursor         : pointer;
    transition     : background-color .2s, transform .1s;
}

.btn-action:hover { transform: translateY(-1px); }

/* SVG de UiIcons (ver ActionButtonModel) en vez del emoji/texto de antes —
   display:block evita el hueco de line-height que un <svg> inline deja
   debajo por defecto (mismo motivo que cualquier ícono inline). */
.btn-action svg { display: block; flex-shrink: 0; }

.btn-add {
    font-size  : 18px;
    font-weight: 900;
    padding    : 0 5px;
    margin     : 0;
}

.btn-add:hover {
    background: var(--grid-btn-primary-bg, linear-gradient(135deg,#60a5fa,#2563eb));
    color     : var(--grid-text-on-btn, #ffffff);
}

.btn-delete {
    font-size: 18px;
    padding  : 0 5px;
}

.btn-delete:hover { background: var(--grid-btn-danger-bg-full, linear-gradient(135deg,#ff4d4d,#d32f2f)); }

.btn-clone {
    font-size: 18px;
    padding  : 0 5px;
}

.btn-clone:hover {
    background: var(--grid-btn-secondary-bg-hover, #9ca3af);
    color     : var(--grid-text-on-btn, #ffffff);
}

/* ── Número con símbolo de moneda (opt-in vía [CurrencyField]) ───────────── */
/* Prefijo puramente visual dentro del input — el símbolo no forma parte de
   Model.Value ni de lo que viaja en el submit (ver _NumberInput.cshtml).
   Especificidad alta a propósito en el padding-left: la regla genérica de
   inputs de texto del modal consumidor (ej. ".ui-modal-content
   input[type=text]" en grid.css) ya trae su propio padding por shorthand, y
   con la misma especificidad el orden de carga de hojas de estilo decidiría
   quién gana — acá no puede depender de eso. */
.ui-number-input-wrapper {
    position: relative;
    width: 100%;
}

.ui-number-input-wrapper input.ui-number-input[type="text"] {
    padding-left: 2rem;
}

.ui-number-input-currency {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grid-text-muted, #6b7280);
    pointer-events: none;
    font-size: 16px;
}

/* ── Badge (pill coloreado por valor) ───────────────────────────────────── */
.table-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--grid-radius-sm, 6px);
    font-size: 0.75rem; /* sin token — no hay --grid-font-size-xs definido; ver docs/css-theming-audit.md */
    font-weight: 600;
    text-transform: capitalize;
    background-color: transparent;
    border: var(--grid-table-border-badge, 1px solid #6b7280);
    color: var(--grid-text-on-btn, #fff);
}

/* ── Bool icon (_BoolIcon.cshtml — check/cruz en celdas booleanas) ──────── */
.bool-icon {
    width         : var(--grid-bool-icon-size, 34px);
    height        : var(--grid-bool-icon-size, 34px);
    display       : inline-block;
    vertical-align: middle;
    filter        : var(--grid-table-cell-icon-shadow, none);
}

/* El SVG usa fill="currentColor", así que estos tokens ahora sí pintan el
   círculo — antes grid.css los aplicaba vía `stroke` sobre un fill
   hardcodeado en hex y no tenían ningún efecto. */
.bool-icon.true  { color: var(--grid-icon-true, #16a34a); }
.bool-icon.false { color: var(--grid-icon-false, #dc2626); }

/* ── Sign indicator (▲/▼ para importes positivos/negativos) ─────────────── */
.sign-indicator {
    width         : 0.7rem;
    height        : 0.7rem;
    display       : inline-block;
    vertical-align: middle;
    margin-right  : 0.35rem;
    margin-bottom : 0.1rem;
}

.sign-indicator.positive { color: var(--grid-icon-true, #16a34a); }
.sign-indicator.negative { color: var(--grid-icon-false, #dc2626); }

/* ── Slider / range input ───────────────────────────────────────────────── */
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: var(--grid-gap-sm, 0.5rem);
}

.slider-wrapper input[type="range"] {
    flex: 1;
    accent-color: var(--grid-switch-on, #2563eb);
    cursor: pointer;
}

.slider-wrapper .slider-value {
    min-width: 2.5rem;
    text-align: right;
    font-size: var(--grid-font-size-sm, 0.875rem);
    color: var(--grid-text-main, #111827);
}

/* ── StatusCard (kicker + h2 + p + acciones) ────────────────────────────────
   Movido desde EcoTrack/wwwroot/css/auth.css — 5 implementaciones idénticas
   (ConfirmEmail, RegisterConfirmation, ForgotPasswordConfirmation,
   ResetPasswordConfirmation, Profile/ConfirmEmailChange), ver
   docs/reusability-audit.md. Los tokens --color-*/--text-* son del tema de
   la app consumidora (theme-dark.css/theme-light.css), no --grid-* — mismo
   criterio que charts.css: sin capa :root propia, fallback en el punto de
   uso para no arriesgar pisar el valor real por orden de carga. La clase
   .auth-panel-kicker (compartida con el resto del shell de Auth, todavía no
   extraído) NO se movió acá — sigue en auth.css. */
.ui-status-card {
    display: grid;
    gap: 1rem;
}

.ui-status-card h2 {
    margin: 0;
    color: var(--text-main-strong, #e2e0ff);
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.ui-status-card p {
    margin: 0;
    color: var(--text-soft, #c0c0e0);
    line-height: 1.6;
}

.ui-status-card.is-success {
    border-left: 4px solid var(--color-success, #00e396);
    padding-left: 1rem;
}

.ui-status-card.is-danger {
    border-left: 4px solid var(--color-danger, #ff4560);
    padding-left: 1rem;
}

.ui-status-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── SettingsCard (kicker + h2 + p + contenido) ─────────────────────────────
   Movido desde EcoTrack/wwwroot/css/shared/common.css — 4 implementaciones
   en Profile/Index.cshtml. Varias de estas reglas vivían combinadas por
   selector (ej. ".profile-header-card, .profile-card { ... }") con clases
   de Profile que NO se extraen todavía (.profile-header-card, .profile-eyebrow,
   .profile-stat-card) — se separaron sin cambiar ningún valor, no se duplicó
   ninguna regla entre este archivo y common.css. */
.ui-settings-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.9rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: var(--glass-bg-soft, rgba(255, 255, 255, 0.03));
    box-shadow: var(--chart-card-shadow, 0 12px 30px rgba(0, 0, 0, 0.28));
    padding: 1.7rem;
}

.ui-settings-card::before {
    content: "";
    position: absolute;
    inset: auto -8% -22% auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: var(--interactive-accent-glow, linear-gradient(135deg, rgba(123, 47, 247, 0.34), rgba(111, 124, 255, 0.22)));
    filter: blur(28px);
    opacity: 0.7;
    pointer-events: none;
}

.ui-settings-card-header {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.35rem;
}

.ui-settings-card-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: var(--interactive-accent-contrast, rgba(123, 47, 247, 0.18));
    color: var(--color-primary-light, #9b8ff7);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-settings-card-kicker--danger {
    background: rgba(239, 68, 68, .12);
    color: var(--color-danger, #f87171);
}

.ui-settings-card.is-danger {
    border-color: var(--error-border, rgba(220, 38, 38, 0.25)) !important;
}

.ui-settings-card-header h2 {
    margin: 0;
    color: var(--text-main-strong, #e2e0ff);
    letter-spacing: -0.04em;
}

.ui-settings-card-header p {
    margin: 0;
    color: var(--text-soft, #c0c0e0);
    line-height: 1.6;
}

/* ── Date input (flatpickr) ──────────────────────────────────────────────
   Tema oscuro del calendario que abre .ui-date-input (ver _DateInput.cshtml
   e initDateInputs en elements.js). El input CERRADO (el recuadro con la
   fecha) ya se tematiza solo vía las reglas normales de input de texto del
   consumidor (ej. ".ui-modal-content input[type=text]" en grid.css) — esto
   es solo el POPUP del calendario, que flatpickr inyecta como hijo directo
   de <body>, fuera de cualquier contenedor con su propio tema. Antes vivía
   duplicado en EcoTrack/wwwroot/css/dashboard.css (así fue como se llegó a
   probar la combinación de colores) — movido acá para que cualquier
   consumidor de UiMetadata.Elements lo tenga gratis, no solo el dashboard. */
.flatpickr-calendar {
    background     : var(--grid-modal-surface, #ffffff);
    border         : 1px solid var(--grid-border-input, #d1d5db);
    border-radius  : var(--grid-radius-md, 8px);
    box-shadow     : var(--grid-modal-shadow, 0 8px 25px rgba(0,0,0,.15));
    padding-bottom : 4px;
}

/* La "flechita" que flatpickr dibuja apuntando al input (arrowTop/arrowBottom/
   arrowLeft/arrowRight según dónde se abra el calendario) queda descolgada y
   mal ubicada cuando el picker se ancla con appendTo/positionElement a un
   contenedor propio (ver dashboard.js, el rango del dashboard) en vez de
   flotar pegado al input real — se ve como una mancha/rombo suelto encima de
   un día cualquiera. Antes solo se ocultaba la variante "arrowTop"; con
   :before/:after sin condicionar a una clase puntual se cubren las 4. */
.flatpickr-calendar:before,
.flatpickr-calendar:after { display: none; }

/* Header (mes/año + flechas) con el mismo degradé que ya usan los botones
   primarios del resto de la app — antes era un gris plano casi indistinguible
   del fondo del calendario, sin ninguna jerarquía visual. */
.flatpickr-month {
    background     : var(--grid-btn-primary-bg, linear-gradient(135deg,#60a5fa,#2563eb));
    border-radius  : var(--grid-radius-md, 8px) var(--grid-radius-md, 8px) 0 0;
    height         : 44px;
}

/* "span.cur-month" (no ".cur-month" solo) a propósito: el CSS de fábrica de
   flatpickr trae ".flatpickr-current-month span.cur-month { color: #3f4458 }"
   con esa misma especificidad extra (clase + tipo + clase) — con menos
   specificidad acá, esa regla oscura ganaba pase lo que pase por el orden de
   carga (flatpickr.min.css se linkea antes que este archivo, pero eso no
   importa si el otro selector es más específico), y el mes quedaba en negro
   sobre el degradé violeta del header en vez de blanco.

   No hay ningún <select> nativo acá (monthSelectorType:"static", ver
   initDateInputs/dashboard.js) — se probó el dropdown nativo por defecto
   para tener salto rápido de mes, pero su POPUP ABIERTO es chrome del
   sistema operativo: en Chrome/Windows ni background-color en <option> lo
   tematiza (Firefox es la excepción, no la regla) — quedaba blanco pase lo
   que pase por CSS, limitación real del control nativo. La navegación
   rápida ahora la da un dropdown PROPIO (attachCustomMonthDropdown,
   elements.js) — mismo look que el resto del calendario, sin control nativo
   de por medio. */
.flatpickr-current-month span.cur-month,
.flatpickr-current-month .cur-year,
.flatpickr-current-month input.cur-year {
    color      : var(--grid-text-on-btn, #ffffff) !important;
    font-weight: 600;
}

.flatpickr-current-month span.cur-month { cursor: pointer; }

/* Mes/año centrado en el header. flatpickr lo deja en position:absolute con
   left:12.5%/width:75% (calculado para un layout de flechas más anchas) —
   un position:relative que había puesto antes lo corría a la derecha. El
   menú propio de mes ya no cuelga de acá (va en calendarContainer), no hace
   falta ningún ancla. */
.flatpickr-current-month {
    left : 0 !important;
    width: 100% !important;
}

/* Dropdown de mes propio — ver attachCustomMonthDropdown/toggleCustomMonthDropdown
   en elements.js. Mismo look que el resto del popup del calendario
   (.flatpickr-calendar), position:relative ya lo trae de fábrica
   .flatpickr-current-month (flatpickr.min.css), así que ancla bien acá. */
.flatpickr-custom-month-menu {
    position     : absolute;
    top          : 100%;
    left         : 0;
    z-index      : 10;
    width         : 140px;
    max-height   : 220px;
    overflow-y   : auto;
    background   : var(--grid-modal-surface, #ffffff);
    border       : 1px solid var(--grid-border-input, #d1d5db);
    border-radius: var(--grid-radius-md, 8px);
    box-shadow   : var(--grid-modal-shadow, 0 8px 25px rgba(0,0,0,.15));
    padding      : 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--grid-border-input, #d1d5db) transparent;
    /* Al llegar al tope/fondo de la lista, la rueda no se le pasa al modal/página
       de atrás (scroll chaining) — sin esto, scrollear la lista movía todo el
       calendario junto con el fondo. */
    overscroll-behavior: contain;
}

.flatpickr-custom-year-menu { width: 90px; }

.flatpickr-current-month input.cur-year { cursor: pointer; }

.flatpickr-custom-month-item {
    display      : block;
    width        : 100%;
    padding      : 6px 10px;
    background   : transparent;
    border       : none;
    border-radius: var(--grid-radius-sm, 6px);
    color        : var(--grid-text-main, #111827);
    font-size    : 0.85rem;
    text-align   : left;
    cursor       : pointer;
}

.flatpickr-custom-month-item:hover {
    background: var(--grid-table-row-hover, #e0f2fe);
}

.flatpickr-custom-month-item.active {
    background : var(--grid-btn-primary-bg, linear-gradient(135deg,#60a5fa,#2563eb));
    color      : var(--grid-text-on-btn, #ffffff);
    font-weight: 600;
}

.flatpickr-weekdays {
    background: var(--grid-surface-alt, #f9fafb);
}

span.flatpickr-weekday {
    background     : var(--grid-surface-alt, #f9fafb);
    color          : var(--grid-text-muted, #6b7280);
    font-weight    : 600;
    font-size      : 0.78rem;
    text-transform : uppercase;
    letter-spacing : .02em;
}

.flatpickr-day {
    color          : var(--grid-text-main, #111827);
    border-radius  : var(--grid-radius-sm, 6px);
}

.flatpickr-day:hover {
    background     : var(--grid-table-row-hover, #e0f2fe);
    border-color   : transparent;
}

.flatpickr-day.today {
    border-color: var(--color-primary, #2563eb);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background     : var(--grid-btn-primary-bg, linear-gradient(135deg,#60a5fa,#2563eb));
    border-color   : transparent;
    color          : var(--grid-text-on-btn, #ffffff);
    font-weight    : 600;
}

/* Banda de "en rango" — antes usaba --grid-table-row-alt, un overlay casi
   invisible sobre fondo oscuro (pensado para filas de tabla clara/oscura
   alternadas, no para marcar un tramo de fechas). Un tinte translúcido del
   color primario, sin radio, hace que el tramo se vea como una banda
   continua entre startRange y endRange en vez de días sueltos con solo las
   dos puntas coloreadas. */
.flatpickr-day.inRange {
    background     : var(--flatpickr-range-tint, rgba(123, 47, 247, .18));
    border-color   : transparent;
    box-shadow     : none;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--grid-text-muted, #6b7280);
    opacity: 0.5;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--grid-text-on-btn, #ffffff);
    fill : var(--grid-text-on-btn, #ffffff);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--grid-text-on-btn, #ffffff);
    fill : var(--grid-text-on-btn, #ffffff);
    opacity: 0.7;
}

/* Divisor entre meses (mode:"range", showMonths > 1, ver dashboard.js) — el
   borde gris claro de fábrica de flatpickr quedaba como una línea dura y
   desentonada sobre el fondo oscuro. */
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:not(:last-child) {
    border-right: 1px solid var(--grid-border, #e5e7eb);
}

.numInputWrapper span.arrowUp:after { border-bottom-color: var(--grid-text-muted, #6b7280); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--grid-text-muted, #6b7280); }

.flatpickr-weekwrapper .flatpickr-weeks { display: none; }

/* Las flechas prev/next son <svg fill="currentColor"> dentro de
   .flatpickr-prev-month/.flatpickr-next-month — esta regla por elemento
   svg puntual es MÁS específica que ".flatpickr-prev-month { fill: ... }"
   de arriba y ganaría igual, así que tiene que quedar en el mismo blanco
   del header (no el --grid-text-muted gris de cuando el header era claro). */
.flatpickr-months svg { fill: var(--grid-text-on-btn, #ffffff); }

/* 599px, no 640 — alineado a los breakpoints acordados en la auditoría
   responsive (Fase 2: móvil ≤599px). Antes era un literal propio sin
   relación con el resto del sistema. */
@media (max-width: 599px) {
    .ui-settings-card {
        padding: 1.2rem;
        border-radius: 1.5rem;
    }
}

/* ── Responsive (Fase 3 — ver responsive-audit-report.md) ──────────────────
   Desktop-first: la base arriba asume desktop, esto solo la sobreescribe
   hacia abajo. Zonas táctiles ≥44px en tablet/móvil para botones que en
   desktop se mantienen densos a propósito. Ver hallazgos I1/I3. */
@media (max-width: 1023px) {
    .btn-action {
        min-height: 44px;
        padding: 10px 14px;
    }

    .btn-add,
    .btn-delete,
    .btn-clone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    /* El track visual del switch NO cambia de tamaño (alterar su proporción
       44×24 se vería peor que el problema que soluciona) — se agranda el
       área de toque real con un pseudo-elemento invisible que excede la
       caja visual solo verticalmente (el ancho ya cumple 44px). Técnica
       estándar de "hit area" sin tocar el aspecto. */
    .switch::after {
        content: "";
        position: absolute;
        inset: -10px 0;
    }
}

/* Botón ± de los campos numéricos en pantallas táctiles (ver toggleNumberSign en elements.js). */
.ui-number-sign-host {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
}

.ui-number-sign-host > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Campo y botón con la misma altura (44px, el mínimo táctil): si el botón fuera más alto que el input, el
   wrapper se estiraba con él y el prefijo de moneda (centrado en el wrapper) quedaba descolgado. */
.ui-number-sign-host input.ui-number-input[type="text"] {
    display: block;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 0;
}

.ui-number-sign {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--grid-border, rgba(255, 255, 255, .2));
    border-radius: var(--grid-radius-sm, 6px);
    background: var(--grid-surface, transparent);
    color: var(--grid-text-main, inherit);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.ui-number-sign:disabled { opacity: .45; cursor: not-allowed; }