/* Tokens GY expandidos a literales para compatibilidad Sass 3.2 / Liferay 6.2 */
/*
 * Goodyear Safety UI - Design System (theme)
 * Fuente: goodyear-design-system + aliases
 * Scope: .gy-ui / .gy-ui
 */
/* Inter via system fonts */

/*
 * Goodyear Safety UI - Design System
 * Version: 1.0.0
 * Scope: Liferay 7.x / HTML5 / Bootstrap-compatible
 * Convencion: todas las clases funcionales usan prefijo gy-
 */

/* Scope-friendly base */
.gy-ui,
.gy-ui,
.gy-ui *,
.gy-ui * {
    box-sizing: border-box;
}

.gy-ui,
.gy-ui {
    /* Reafirmar tokens en el scope (por si :root queda filtrado) */
    color: #14213d;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Tipografia de pagina = maqueta internos (px fijos, gana a Gent/AUI) */
.gy-ui .gy-page-title,
.gy-ui h1.gy-page-title {
    margin: 0;
    color: #05245c;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    font-weight: 700;
}

.gy-ui .gy-page-subtitle,
.gy-ui p.gy-page-subtitle {
    margin: 1px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
}

.gy-ui .gy-card__title,
.gy-ui h2.gy-card__title {
    font-size: 16px;
}

.gy-ui .gy-label,
.gy-ui label.gy-label {
    font-size: 12px;
}

.gy-ui .gy-control,
.gy-ui input.gy-control,
.gy-ui select.gy-control,
.gy-ui textarea.gy-control {
    font-size: 14px;
}

.gy-ui .gy-button,
.gy-ui button.gy-button {
    font-size: 14px;
}

.gy-ui .gy-alert-bar,
.gy-ui .gy-alert-bar div,
.gy-ui .gy-alert-bar span {
    font-size: 13px;
}

.gy-ui button,
.gy-ui button,
.gy-ui input,
.gy-ui input,
.gy-ui select,
.gy-ui select,
.gy-ui textarea,
.gy-ui textarea {
    font: inherit;
}

.gy-ui a,
.gy-ui a {
    color: inherit;
}

.gy-ui button:focus-visible,
.gy-ui button:focus-visible,
.gy-ui a:focus-visible,
.gy-ui a:focus-visible,
.gy-ui input:focus-visible,
.gy-ui input:focus-visible,
.gy-ui select:focus-visible,
.gy-ui select:focus-visible,
.gy-ui textarea:focus-visible,
.gy-ui textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, 0.20);
}

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

.gy-stack { display: flex; flex-direction: column; gap: 1rem; }
.gy-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.gy-text-muted { color: #667085; }
.gy-text-blue { color: #064fae; }
.gy-text-danger { color: #b42318; }
.gy-text-success { color: #137a48; }

/* Application shell */
.gy-shell {
    min-height: 100vh;
    background: #eef3f8;
}

.gy-sidebar {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    width: 270px;
    height: 100vh;
    flex-direction: column;
    overflow-y: auto;
    color: #ffffff;
    background: linear-gradient(180deg, #0666d1 0%, #064ca8 100%);
    box-shadow: 8px 0 28px rgba(3, 45, 103, 0.13);
}

.gy-sidebar__brand {
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.gy-sidebar__profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.gy-sidebar__avatar {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-items: center;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    color: #064fae;
    background: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.gy-sidebar__welcome {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.gy-sidebar__name {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
}

.gy-sidebar__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 0.75rem 9px 1.5rem;
}

.gy-nav-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.gy-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    transform: translateX(2px);
}

.gy-nav-link[aria-current="page"] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    box-shadow: inset 4px 0 0 #ffffff;
}

.gy-nav-link__icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-items: center;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.10);
}

.gy-nav-link__icon svg { width: 16px; height: 16px; }

.gy-main {
    min-height: 100vh;
    margin-left: 270px;
}

.gy-topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem;
    border-bottom: 1px solid #d8e0eb;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.gy-content {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page headings */
.gy-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.gy-page-header__main {
    display: flex;
    align-items: center;
    gap: 22px;
}

.gy-icon-box {
    display: inline-grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-items: center;
    border: 1px solid #bfdcff;
    border-radius: 0.75rem;
    color: #0868d7;
    background: #eaf3ff;
}

.gy-icon-box--small {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 0.5rem;
}

.gy-icon-box svg { width: 28px; height: 28px; }
.gy-icon-box--small svg { width: 17px; height: 17px; }

/* Sprite del theme: iconos via <use href="#gy-icon-*"> */
.gy-icon-sprite {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
svg.gy-icon {
    display: block;
    overflow: visible;
    flex-shrink: 0;
}

/* Cajas de icono: SVG centrado en el recuadro */
.gy-icon-box,
.gy-user-summary__icon,
.gy-section__icon,
.gy-kpi-card__icon,
.gy-journey-step__icon,
.gy-page-header__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible;
}
.gy-icon-box svg,
.gy-user-summary__icon svg,
.gy-section__icon svg,
.gy-kpi-card__icon svg,
.gy-journey-step__icon svg,
.gy-page-header__icon svg {
    display: block;
    overflow: visible;
    margin: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gy-page-title {
    margin: 0;
    color: #05245c;
    /* px fijos: rem se achica con body Bootstrap 14px de Liferay */
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    font-weight: 700;
}

.gy-page-subtitle {
    margin: 1px 0 0;
    color: #667085;
    /* Maqueta internos/design: 14px reales (no rem sobre body 14px) */
    font-size: 14px;
    line-height: 1.45;
}

/* Alert: the only functional yellow component */
.gy-alert-bar {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 40px 13px 16px;
    border: 1px solid #d9b900;
    border-left: 5px solid #d9b900;
    border-radius: 10px;
    color: #4d4200;
    background: #fff8c8;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.gy-alert-bar__icon {
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #064fae;
    font-size: 12px;
    font-weight: 800;
}

.gy-alert-bar__icon svg { width: 13px; height: 13px; }
.gy-alert-bar strong { color: #0d1b33; }

.gy-alert-bar__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #4d4200;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.gy-alert-bar__close:hover,
.gy-alert-bar__close:focus {
    background: rgba(77, 66, 0, 0.10);
    outline: none;
}

.gy-alert-bar.is-dismissed {
    display: none !important;
}

/* Cards */
.gy-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8e0eb;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 54, 104, 0.10);
}

.gy-card__header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px 18px;
    border-bottom: 1px solid #d8e0eb;
    background: #ffffff;
}

.gy-card__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.gy-card__title {
    margin: 0;
    color: #05245c;
    font-size: 16px;
    line-height: 1.25;
}

.gy-card__subtitle {
    margin: 3px 0 0;
    color: #667085;
    font-size: 13px;
}

.gy-card__body { padding: 1.25rem; }
.gy-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 14px 1.25rem;
    border-top: 1px solid #d8e0eb;
    background: #f7f9fc;
}

/* Grid */
.gy-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.gy-col-12 { grid-column: span 12; }
.gy-col-8 { grid-column: span 8; }
.gy-col-7 { grid-column: span 7; }
.gy-col-6 { grid-column: span 6; }
.gy-col-5 { grid-column: span 5; }
.gy-col-4 { grid-column: span 4; }
.gy-col-3 { grid-column: span 3; }

/* Buttons */
.gy-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.gy-button:hover { transform: translateY(-1px); }
.gy-button svg { width: 18px; height: 18px; }

.gy-button--primary {
    color: #ffffff;
    background: #0868d7;
    border-color: #0868d7;
    box-shadow: 0 5px 14px rgba(8, 104, 215, 0.18);
}

.gy-button--primary:hover {
    background: #064fae;
    border-color: #064fae;
}

.gy-button--secondary {
    color: #073b87;
    background: #ffffff;
    border-color: #c6d0dd;
}

.gy-button--secondary:hover {
    background: #f5f9ff;
    border-color: #bfdcff;
}

.gy-button--soft {
    color: #064fae;
    background: #eaf3ff;
    border-color: #bfdcff;
}

.gy-button--danger {
    color: #ffffff;
    background: #c93434;
    border-color: #c93434;
}

.gy-button--ghost {
    color: #064fae;
    background: transparent;
    border-color: transparent;
}

.gy-button--small {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
}

.gy-button--icon {
    width: 42px;
    padding: 0;
}

.gy-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

/* Status and badges */
.gy-badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.gy-badge::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.gy-badge--info { color: #064fae; background: #eaf3ff; border-color: #bfdcff; }
.gy-badge--success { color: #137a48; background: #e9f7ef; }
.gy-badge--danger { color: #b42318; background: #fff0f0; }
.gy-badge--warning { color: #a45a00; background: #fff4e5; }
.gy-badge--neutral { color: #667085; background: #f7f9fc; border-color: #d8e0eb; }

/* Forms */
.gy-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.gy-label {
    color: #0d1b33;
    font-size: 13px;
    font-weight: 700;
}

.gy-required {
    color: #0868d7;
    font-weight: 800;
}

.gy-help {
    margin: 0;
    color: #667085;
    font-size: 12px;
}

.gy-error-message {
    margin: 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}

.gy-control,
.gy-select,
.gy-textarea {
    width: 100%;
    border: 1px solid #c6d0dd;
    border-radius: 0.5rem;
    color: #14213d;
    background: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.gy-control,
.gy-select {
    min-height: 42px;
    padding: 9px 12px;
}

.gy-select {
    padding-right: 38px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23064fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.gy-textarea {
    min-height: 118px;
    resize: vertical;
    padding: 12px;
}

.gy-control:hover,
.gy-select:hover,
.gy-textarea:hover { border-color: #8ec3ff; }

.gy-control:focus,
.gy-select:focus,
.gy-textarea:focus {
    outline: none;
    border-color: #1677e8;
    box-shadow: 0 0 0 3px rgba(22, 119, 232, 0.20);
}

.gy-control:disabled,
.gy-select:disabled,
.gy-textarea:disabled {
    color: #98a2b3;
    background: #f1f4f8;
    cursor: not-allowed;
}

.gy-control[aria-invalid="true"],
.gy-select[aria-invalid="true"],
.gy-textarea[aria-invalid="true"] {
    border-color: #c93434;
}

.gy-input-group {
    display: flex;
    min-width: 0;
}

.gy-input-group__addon {
    display: inline-grid;
    width: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-items: center;
    border: 1px solid #c6d0dd;
    border-right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    color: #0868d7;
    background: #f5f9ff;
}

.gy-input-group__addon svg { width: 17px; height: 17px; }
.gy-input-group .gy-control,
.gy-input-group .gy-select { border-radius: 0 0.5rem 0.5rem 0; }

.gy-counter {
    align-self: flex-end;
    color: #98a2b3;
    font-size: 12px;
}

.gy-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.gy-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    color: #14213d;
    cursor: pointer;
}

.gy-choice input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 2px 0 0;
    accent-color: #0868d7;
}

.gy-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.gy-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gy-switch__track {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #c7cfdb;
    transition: background 150ms ease;
}

.gy-switch__track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    content: "";
    transition: transform 150ms ease;
}

.gy-switch input:checked + .gy-switch__track { background: #0868d7; }
.gy-switch input:checked + .gy-switch__track::after { transform: translateX(20px); }
.gy-switch input:focus-visible + .gy-switch__track { box-shadow: 0 0 0 3px rgba(22, 119, 232, 0.20); }

/* Key-value summary */
.gy-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #d8e0eb;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.gy-summary__item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid #d8e0eb;
}

.gy-summary__item:last-child { border-right: 0; }
.gy-summary__label { display: block; color: #667085; font-size: 12px; font-weight: 600; }
.gy-summary__value { display: block; margin-top: 3px; color: #0d1b33; font-size: 16px; font-weight: 700; }

/* Tables */
.gy-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8e0eb;
    border-radius: 0.75rem;
    background: #ffffff;
}

.gy-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.gy-table th,
.gy-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #d8e0eb;
    text-align: left;
    vertical-align: middle;
}

.gy-table th {
    color: #05245c;
    background: #f5f9ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.gy-table td { color: #14213d; font-size: 13px; }
.gy-table tbody tr:hover { background: #fbfdff; }
.gy-table tbody tr:last-child td { border-bottom: 0; }
.gy-table__actions { display: inline-flex; gap: 6px; }

.gy-empty-state {
    display: grid;
    min-height: 150px;
    align-items: center;
    justify-items: center;
    padding: 1.5rem;
    color: #667085;
    text-align: center;
}

.gy-empty-state__icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    margin-bottom: 0.75rem;
    align-items: center;
    justify-items: center;
    border-radius: 0.75rem;
    color: #0868d7;
    background: #eaf3ff;
}

.gy-empty-state__icon svg { width: 23px; height: 23px; }

.gy-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #667085;
    font-size: 13px;
}

.gy-pagination__pages { display: inline-flex; gap: 6px; }
.gy-pagination__button {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-items: center;
    border: 1px solid #d8e0eb;
    border-radius: 0.5rem;
    color: #064fae;
    background: #ffffff;
    cursor: pointer;
}
.gy-pagination__button[aria-current="page"] { color: #ffffff; background: #0868d7; border-color: #0868d7; }

/* --- Aliases: menos nombres, misma semantica --- */
.gy-page-header__icon,
.gy-icon-box {
    display: inline-grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-items: center;
    border: 1px solid #bfdcff;
    border-radius: 0.75rem;
    color: #0868d7;
    background: #eaf3ff;
}
.gy-page-header__icon svg,
.gy-icon-box svg { width: 28px; height: 28px; }

.gy-form-grid,
.gy-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.gy-card__title-wrap,
.gy-card__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.gy-card__help,
.gy-help-text,
.gy-card__subtitle {
    margin: 3px 0 0;
    color: #667085;
    font-size: 13px;
}

.gy-check-grid,
.gy-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}
.gy-check-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gy-check-grid--single { grid-template-columns: 1fr; }

.gy-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #c6d0dd;
    border-radius: 0.5rem;
    color: #14213d;
    background: #ffffff;
}

.gy-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.gy-status::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}
.gy-status--open { color: #137a48; background: #e9f7ef; }
.gy-status--closed {
    color: #667085;
    background: #f7f9fc;
    border: 1px solid #d8e0eb;
}

.gy-table-shell,
.gy-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8e0eb;
    border-radius: 0.75rem;
    background: #ffffff;
}

.gy-app { min-height: 0; }
.gy-ui--form .gy-main { margin-left: 0; min-height: auto; }
.gy-ui--form .gy-content {
    max-width: none;
    padding: 12px 8px 28px;
    background: transparent;
}
.gy-ui--form { background: transparent; }