/* ============================================================
   Tema RUIZ JOYEROS — blanco y negro (tomado del logo).
   Cabecera negra, menú lateral blanco, botones negros con texto
   blanco, tarjetas con sombra suave. Acentos en gris/negro.
   ============================================================ */

html {
    /* --- Marca: DORADO como color primario (botones e iconos dorados sobre el
           negro del logo). El texto sobre relleno dorado va oscuro. --- */
    --lumo-primary-color: #C9A227;
    --lumo-primary-color-50pct: rgba(201, 162, 39, 0.5);
    --lumo-primary-color-10pct: rgba(201, 162, 39, 0.12);
    --lumo-primary-text-color: #96741A;
    --lumo-primary-contrast-color: #201a08;

    /* --- Paleta de ORO (varias tonalidades) --- */
    --rj-oro: #C9A227;          /* base: rellenos, bordes */
    --rj-oro-oscuro: #96741A;   /* iconos y texto sobre fondo claro (buen contraste) */
    --rj-oro-claro: #E4C766;    /* acentos sobre fondo negro */
    --rj-oro-brillo: #F0D77A;   /* brillo del degradado metálico */

    /* --- Estructura B/N --- */
    --rj-negro: #111111;
    --rj-negro-2: #1c1c1c;
    --rj-gris: #4a4a4a;
    --rj-gris-claro: #e7e7e7;

    --lumo-body-text-color: #1f1f1f;
    --lumo-header-text-color: #0f0f0f;

    /* --- Redondeos suaves --- */
    --lumo-border-radius-s: 6px;
    --lumo-border-radius-m: 10px;
    --lumo-border-radius-l: 16px;

    /* --- Sombras con profundidad --- */
    --lumo-box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
    --lumo-box-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.08);
    --lumo-box-shadow-m: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 26px rgba(0, 0, 0, 0.10);
    --lumo-box-shadow-l: 0 3px 6px rgba(0, 0, 0, 0.07), 0 18px 44px rgba(0, 0, 0, 0.16);

    --lumo-shade-5pct: rgba(0, 0, 0, 0.04);
}

/* ---------- Área de contenido ---------- */
vaadin-app-layout::part(content) {
    background: var(--lumo-contrast-5pct);
    padding: var(--lumo-space-m);
}

/* ---------- CABECERA (barra superior) negra ---------- */
vaadin-app-layout::part(navbar) {
    background: linear-gradient(90deg, #000000 0%, #161616 60%, #262626 100%);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
    border-bottom: none;
    min-height: 3.75rem;
}
vaadin-app-layout::part(navbar) vaadin-drawer-toggle { color: #ffffff; }

/* ---------- DRAWER / menú lateral IZQUIERDO ---------- */
vaadin-app-layout::part(drawer) {
    background: #ffffff;
    width: 20rem;
    border-right: 1px solid var(--lumo-contrast-10pct);
    box-shadow: inset -1px 0 0 var(--lumo-contrast-5pct);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    transition: width 0.2s ease;
}

/* ============================================================
   Menú lateral COLAPSABLE a "rail" (solo iconos)
   Se activa con el atributo [rail] en <vaadin-app-layout> (lo pone el botón
   << / >> de la cabecera del drawer). Enfoque replicado del proyecto enorgo,
   que funciona: el contenido de la derecha se reajusta solo al estrechar el
   drawer, y el icono del side-nav se dimensiona por FONT-SIZE (por eso el texto
   se oculta con font-size:0 y el icono se restaura con font-size).
   ============================================================ */
/* CLAVE: el contenido de la derecha debe reajustarse. El AppLayout desplaza el
   contenido con la variable PRIVADA --_vaadin-app-layout-drawer-offset-size, que
   Vaadin fija INLINE por JS al ancho del drawer (20rem) y NO recalcula al estrechar
   el drawer por CSS. Por eso hay que sobrescribirla con !important (la pública sola
   no basta: la inline la pisa). Verificado en vivo en la propia app. */
vaadin-app-layout[rail] {
    --vaadin-app-layout-drawer-offset-size: 4.5rem;
    --_vaadin-app-layout-drawer-offset-size: 4.5rem !important;
}
/* Drawer estrecho en modo rail */
vaadin-app-layout[rail]::part(drawer) {
    width: 4.5rem;
    min-width: 4.5rem;
}
vaadin-app-layout[rail] vaadin-side-nav {
    padding: var(--lumo-space-xs);
}
/* Solo iconos: se oculta el texto (font-size 0) en todo el item */
vaadin-app-layout[rail] vaadin-side-nav-item {
    font-size: 0;
}
vaadin-app-layout[rail] vaadin-side-nav-item::part(content),
vaadin-app-layout[rail] vaadin-side-nav-item::part(link) {
    white-space: nowrap;
    overflow: hidden;
    padding-inline: 0;
    justify-content: center;
}
/* El icono recupera su tamaño y queda centrado. IMPORTANTE: tamaño ABSOLUTO
   (1.5rem), NO var(--lumo-icon-size-m): esa variable vale 1.5EM y, como el texto
   del item está a font-size:0, 1.5em = 0 y el icono desaparecía. (Verificado.) */
vaadin-app-layout[rail] vaadin-side-nav-item > [slot="prefix"] {
    margin: 0 auto;
    font-size: 1.5rem;
    flex-shrink: 0;
}
/* El chevron de expandir de los grupos se oculta */
vaadin-app-layout[rail] vaadin-side-nav-item::part(toggle-button) {
    display: none;
}
/* Subitems sin sangrado: icono centrado igual que el resto */
vaadin-app-layout[rail] vaadin-side-nav-item vaadin-side-nav-item::part(link) {
    padding-inline-start: 0;
}
/* En modo rail se oculta solo el logo; el botón <</>> sigue visible */
vaadin-app-layout[rail] .rj-drawer-logo {
    display: none !important;
}

/* MÓVIL: no tiene sentido el rail (el menú es panel deslizante); se muestra completo */
@media (max-width: 800px) {
    vaadin-app-layout[rail]::part(drawer) { width: 84vw; min-width: 0; }
    vaadin-app-layout[rail] .rj-drawer-logo { display: block !important; }
    vaadin-app-layout[rail] vaadin-side-nav-item { font-size: inherit; }
}

vaadin-side-nav { padding: var(--lumo-space-s); }
vaadin-side-nav-item::part(content) {
    border-radius: var(--lumo-border-radius-m);
    padding-block: var(--lumo-space-xs);
    color: #2a2a2a;
    font-weight: 500;
    white-space: normal;
    overflow: visible;
    height: auto;
    min-height: var(--lumo-size-m);
    align-items: center;
    line-height: 1.25;
}
vaadin-side-nav-item::part(content):hover { background: var(--lumo-primary-color-10pct); }
/* Iconos del menú en DORADO, MISMA tonalidad que los iconos de las tarjetas del
   Home (que usan var(--lumo-primary-color) = oro base #C9A227). IMPORTANTE: el icono
   es un hijo LIGHT-DOM con slot="prefix" (no un descendiente de ::part(content)), así
   que se selecciona como > [slot="prefix"], igual que en el rail. vaadin-icon pinta el
   SVG con fill:currentColor, por eso basta con fijar 'color'. */
vaadin-side-nav-item > [slot="prefix"] { color: var(--lumo-primary-color); }
/* Item activo: fondo dorado con texto e icono oscuros */
vaadin-side-nav-item[active]::part(content) {
    background: var(--rj-oro);
    color: #201a08;
    font-weight: 700;
}
vaadin-side-nav-item[active] > [slot="prefix"] { color: #201a08; }
vaadin-side-nav-item::part(link) { white-space: normal; overflow: visible; text-overflow: clip; }

/* ============================================================
   BOTONES — sistema unificado para toda la app.
   Una sola familia: misma altura, radio, tipografía y espaciado.
   Jerarquía por variante (no por vista):
     · Primario (LUMO_PRIMARY) ....... relleno negro, texto blanco.
     · Secundario (sin variante) ..... contorno (fondo claro, borde).
     · Terciario (LUMO_TERTIARY) ..... acción ligera sin contorno
                                       (iconos, acciones en línea/grid).
     · Error (LUMO_ERROR) ............ rojo (contorno; relleno si es
                                       además primario: confirmar borrado).
     · Éxito (LUMO_SUCCESS+PRIMARY) .. relleno verde (p. ej. sumar stock).
   ============================================================ */

/* Base común a TODOS los botones */
vaadin-button {
    border-radius: var(--lumo-border-radius-m);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

/* Secundario por defecto (sin variante): contorno DORADO, texto dorado oscuro */
vaadin-button:not([theme]) {
    background: var(--lumo-base-color);
    color: var(--rj-oro-oscuro);
    box-shadow: inset 0 0 0 1px var(--rj-oro);
}
vaadin-button:not([theme]):hover {
    background: var(--lumo-primary-color-10pct);
    box-shadow: inset 0 0 0 1px var(--rj-oro-oscuro);
}

/* Primario: relleno DORADO (degradado metálico con varias tonalidades), texto oscuro */
vaadin-button[theme~="primary"] {
    background: linear-gradient(135deg, var(--rj-oro-brillo) 0%, var(--rj-oro) 55%, var(--rj-oro-oscuro) 100%);
    color: #201a08;
    box-shadow: none;
}
vaadin-button[theme~="primary"]:hover {
    background: linear-gradient(135deg, #F5E39A 0%, var(--rj-oro) 60%, #7f6210 100%);
}

/* Terciario: acción ligera sin contorno, en DORADO (iconos y acciones en línea) */
vaadin-button[theme~="tertiary"],
vaadin-button[theme~="tertiary-inline"] {
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    color: var(--rj-oro-oscuro);
}
vaadin-button[theme~="tertiary"]:hover,
vaadin-button[theme~="tertiary-inline"]:hover { background: var(--lumo-primary-color-10pct); }

/* Error (no primario): rojo con contorno (acción destructiva secundaria) */
vaadin-button[theme~="error"]:not([theme~="primary"]):not([theme~="tertiary"]) {
    background: var(--lumo-base-color);
    color: var(--lumo-error-text-color);
    box-shadow: inset 0 0 0 1px var(--lumo-error-color-50pct);
}
vaadin-button[theme~="error"]:not([theme~="primary"]):not([theme~="tertiary"]):hover {
    background: var(--lumo-error-color-10pct);
    box-shadow: inset 0 0 0 1px var(--lumo-error-text-color);
}

/* Error terciario: texto rojo sin contorno (quitar línea, acciones en grid) */
vaadin-button[theme~="error"][theme~="tertiary"] {
    background: transparent;
    color: var(--lumo-error-text-color);
    box-shadow: none;
}
vaadin-button[theme~="error"][theme~="tertiary"]:hover { background: var(--lumo-error-color-10pct); }

/* Error primario: relleno rojo (confirmación destructiva principal) */
vaadin-button[theme~="error"][theme~="primary"] {
    background: var(--lumo-error-color);
    color: #ffffff;
    box-shadow: none;
}
vaadin-button[theme~="error"][theme~="primary"]:hover { background: var(--lumo-error-color-50pct); }

/* Éxito primario: relleno verde (p. ej. sumar stock en escaneo) */
vaadin-button[theme~="success"][theme~="primary"] {
    background: var(--lumo-success-color);
    color: #ffffff;
    box-shadow: none;
}
vaadin-button[theme~="success"][theme~="primary"]:hover { filter: brightness(0.94); }

/* ---------- Grids y formularios como tarjeta ---------- */
vaadin-grid {
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--lumo-box-shadow-m);
    border: 1px solid var(--lumo-contrast-10pct);
    overflow: hidden;
    background: var(--lumo-base-color);
}
vaadin-grid::part(header-cell) {
    background: var(--rj-negro);
    color: #ffffff;
    font-weight: 700;
}
vaadin-grid::part(header-cell) vaadin-grid-sorter { color: #ffffff; }
vaadin-form-layout {
    background: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--lumo-box-shadow-m);
    border: 1px solid var(--lumo-contrast-10pct);
    padding: var(--lumo-space-l);
    margin-top: var(--lumo-space-m);
}

/* Dentro de un diálogo el formulario NO lleva su propia tarjeta (evita el
   efecto "tarjeta dentro de tarjeta" y deja que los campos usen todo el ancho). */
vaadin-dialog-overlay vaadin-form-layout {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-top: 0;
}
/* Etiquetas de campo dentro de diálogos: que NO se corten (pueden ir a 2 líneas). */
vaadin-dialog-overlay vaadin-text-field::part(label),
vaadin-dialog-overlay vaadin-email-field::part(label),
vaadin-dialog-overlay vaadin-password-field::part(label),
vaadin-dialog-overlay vaadin-number-field::part(label),
vaadin-dialog-overlay vaadin-big-decimal-field::part(label),
vaadin-dialog-overlay vaadin-select::part(label),
vaadin-dialog-overlay vaadin-combo-box::part(label),
vaadin-dialog-overlay vaadin-date-picker::part(label),
vaadin-dialog-overlay vaadin-text-area::part(label) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Campos a lo ancho de su columna dentro de los diálogos. */
vaadin-dialog-overlay vaadin-form-layout vaadin-text-field,
vaadin-dialog-overlay vaadin-form-layout vaadin-email-field,
vaadin-dialog-overlay vaadin-form-layout vaadin-password-field,
vaadin-dialog-overlay vaadin-form-layout vaadin-number-field,
vaadin-dialog-overlay vaadin-form-layout vaadin-big-decimal-field,
vaadin-dialog-overlay vaadin-form-layout vaadin-select,
vaadin-dialog-overlay vaadin-form-layout vaadin-combo-box { width: 100%; }

/* Rejilla de tarjetas de la portada, con separación clara entre ellas. */
.rj-home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 28px;
    row-gap: 28px;
    width: 100%;
    margin-top: var(--lumo-space-l);
}

/* Tarjeta genérica reutilizable (portada, avisos). */
.rj-card {
    position: relative;
    background: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--lumo-box-shadow-l);
    border: 1px solid var(--lumo-contrast-10pct);
    padding: var(--lumo-space-l);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rj-card:hover { transform: translateY(-2px); box-shadow: var(--lumo-box-shadow-l); }

/* Logo del drawer */
.rj-drawer-logo { padding: var(--lumo-space-s) 0; }
.rj-drawer-toggle { width: 100%; display: flex; justify-content: flex-end; }

/* Los toasts usan las variantes nativas de Vaadin (LUMO_SUCCESS / LUMO_ERROR /
   LUMO_CONTRAST) desde la clase Avisos; no se personalizan por CSS para
   garantizar el contraste del texto. */