:root { --navy: #061028; --blue: #082e63; --indigo: #1c33a7; --teal: #037b8f; --teal-dark: #02616f; --green: #1eb168; --amber: #e8a33d; --red: #e5484d; --line: #e0e7f0; --canvas: #f4f6fa; --ink: #334155; --muted: #64748b; --sidebar-muted: #5c6f92; --font-serif: "Source Serif 4", Georgia, serif; --font-ui: "Inter", system-ui, -apple-system, sans-serif; --drawer-width: 248px; --control-height: 36px; --radius-btn: 8px; --appbar-height: 64px; --content-max-width: 1440px; } /* Sin reset global: el sin margin propio sumaba ~8px de aire arriba del shell (ui-pass-v2 sección 5) */ body { margin: 0; font-family: var(--font-ui); background: var(--canvas); } .gpi-icon { width: 16px; height: 16px; flex: none; } /* Sprite de íconos (_IconSprite.cshtml): oculto visualmente, los solo se referencian por id */ .gpi-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } h1, h2, h3, h4 { font-family: var(--font-serif); } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .pa-5 { padding: 20px; } .gpi-page-title { margin: 0; font-family: var(--font-serif); font-weight: 700; color: var(--navy); font-size: 2rem; line-height: 1.15; } .gpi-page-subtitle { color: var(--muted); font-size: 0.95rem; margin-top: 2px; } .gpi-page-title--compact { font-size: 1.6rem; } /* Menos aire entre el subtítulo de página y la toolbar del listado (ui-pass.md sección 7) */ .gpi-page-subtitle.mb-6 { margin-bottom: 16px; } /* CTA de la card de login/error: mismo botón, en línea y centrado dentro del split-screen */ .gpi-login__cta { display: inline-block; text-align: center; margin-top: 16px; text-decoration: none; } /* Login split-screen */ .gpi-login { display: flex; min-height: 100vh; width: 100%; } .gpi-login__brand { flex: 1 1 50%; background: linear-gradient(155deg, #061028 0%, #0a1c3f 55%, #072338 100%); color: #fff; padding: 44px 56px; display: flex; flex-direction: column; justify-content: space-between; } .gpi-login__form { flex: 1 1 50%; background: var(--canvas); display: flex; align-items: center; justify-content: center; padding: 24px; } .gpi-login__card { width: 100%; max-width: 380px; } .gpi-login__hero-title { font-family: var(--font-serif); font-weight: 700; font-size: 2.4rem; line-height: 1.1; } .gpi-login__hero-sub { color: #9db0d0; margin-top: 12px; max-width: 340px; line-height: 1.5; } .gpi-login__footer { color: #5c6f92; font-size: 0.8rem; } .gpi-login__wordmark { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.5px; } .gpi-login__wordmark .accent { color: #3cc0d6; } .gpi-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; } .gpi-field input:not([type="checkbox"]), .gpi-field select, .gpi-field textarea { box-sizing: border-box; width: 100%; height: var(--control-height); padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .gpi-field textarea { height: auto; padding: 10px 13px; resize: vertical; } .gpi-field input:not([type="checkbox"]):focus, .gpi-field select:focus, .gpi-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(3, 123, 143, 0.12); background: #fff; } /* El gris queda reservado al estado disabled real (ui-pass-v2 sección 4) */ .gpi-field input:not([type="checkbox"])[disabled], .gpi-field select[disabled], .gpi-field textarea[disabled] { background: #eef2f8; color: var(--muted); cursor: not-allowed; } /* , sin la flecha nativa del sistema (ui-pass.md sección 10) */ .gpi-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; } /* Sistema de botones (ui-pass.md sección 1): 4 variantes, misma altura/radio/tipografía, sin subrayado. */ .gpi-btn-primary, .gpi-btn-secondary, .gpi-btn-ghost, .gpi-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-height); padding: 0 16px; border-radius: var(--radius-btn); font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; } .gpi-btn-primary:focus-visible, .gpi-btn-secondary:focus-visible, .gpi-btn-ghost:focus-visible, .gpi-btn-danger:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .gpi-btn-primary[disabled], .gpi-btn-secondary[disabled], .gpi-btn-ghost[disabled], .gpi-btn-danger[disabled] { opacity: 0.5; cursor: not-allowed; } .gpi-btn-primary { width: 100%; background: var(--teal); color: #fff; box-shadow: 0 8px 20px -8px rgba(3, 123, 143, 0.6); } .gpi-btn-primary:hover, .gpi-btn-primary:active { background: var(--teal-dark); } /* Shell layout */ .gpi-drawer-toggle { display: none; } .gpi-shell { min-height: 100vh; } /* Appbar fija: fondo opaco + z-index por encima del contenido (ui-pass-v2 sección 3) */ .gpi-appbar { position: fixed; top: 0; left: 0; right: 0; height: var(--appbar-height); z-index: 50; display: flex; align-items: center; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); } .gpi-appbar__brand { display: flex; align-items: center; gap: 10px; width: var(--drawer-width); flex: 0 0 auto; } .gpi-appbar__logo { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--navy); white-space: nowrap; } .gpi-appbar__logo .accent { color: var(--teal); } .gpi-appbar__right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .gpi-appbar__toggle { display: none; cursor: pointer; font-size: 1.3rem; color: var(--navy); } .gpi-drawer-backdrop { display: none; } /* Sidebar: fija debajo de la appbar para que el scroll del contenido no la cruce (ui-pass-v2 sección 3) */ .gpi-drawer { position: fixed; top: var(--appbar-height); left: 0; bottom: 0; width: var(--drawer-width); background: var(--navy); padding: 20px 0; overflow-y: auto; z-index: 40; } /* Misma altura que .gpi-appbar para que el logo del drawer y el de la appbar se alineen */ .gpi-drawer__brand { box-sizing: border-box; height: var(--appbar-height); padding: 0 20px; display: flex; flex-direction: column; justify-content: center; } .gpi-logo { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; color: #fff; line-height: 1.1; } .gpi-logo .accent { color: #3cc0d6; } .gpi-logo-tag { color: var(--sidebar-muted); font-size: 0.62rem; letter-spacing: 0.4px; margin-top: 2px; } .gpi-navlink { display: flex; align-items: center; gap: 10px; color: #c9d4e6; border-radius: 9px; margin: 2px 10px; padding: 9px 12px; font-size: 0.9rem; text-decoration: none; } .gpi-navlink:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .gpi-navlink.is-active { background: rgba(3, 123, 143, 0.18); color: #fff; box-shadow: inset 3px 0 0 0 #3cc0d6; } .gpi-nav-group-label { color: var(--sidebar-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 10px 20px 4px; } /* Pill de entorno: tono según IWebHostEnvironment.EnvironmentName (ver _Layout.cshtml) */ .gpi-env-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; } .gpi-env-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .gpi-env-pill--green { background: rgba(30, 177, 104, 0.12); color: var(--green); } .gpi-env-pill--amber { background: rgba(232, 163, 61, 0.15); color: #b87914; } .gpi-env-pill--teal { background: rgba(3, 123, 143, 0.12); color: var(--teal); } .gpi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; } .gpi-user-name { font-weight: 600; color: var(--navy); font-size: 0.85rem; line-height: 1.1; } .gpi-user-role { color: var(--muted); font-size: 0.72rem; } /* Cards / tables */ .gpi-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(6, 16, 40, 0.04); } .gpi-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); } .gpi-card-head h3 { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--navy); } /* Stat cards */ .gpi-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 1px 2px rgba(6, 16, 40, 0.04); height: 100%; } .gpi-stat__icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--stat-tint-bg); color: var(--stat-tint); } .gpi-stat__value { font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem; color: var(--navy); line-height: 1; } /* Jerarquía número > label > hint, para que el label no compita con el valor (ui-pass-v2 sección 1) */ .gpi-stat__label { color: var(--ink); font-weight: 600; font-size: 0.875rem; margin-top: 8px; } .gpi-stat__hint { color: var(--muted); font-size: 0.75rem; margin-top: 2px; } /* Chips */ .gpi-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 600; line-height: 1.4; } .gpi-chip--green { background: rgba(30, 177, 104, 0.13); color: var(--green); } .gpi-chip--amber { background: rgba(232, 163, 61, 0.15); color: #b87914; } .gpi-chip--red { background: rgba(229, 72, 77, 0.12); color: var(--red); } .gpi-chip--gray { background: #eef2f8; color: var(--muted); } .gpi-chip--teal { background: rgba(3, 123, 143, 0.12); color: var(--teal); } .gpi-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(6, 16, 40, 0.04); background: #fff; } .gpi-table { width: 100%; border-collapse: collapse; } .gpi-table thead th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 16px; background: var(--canvas); border-bottom: 2px solid var(--line); } .gpi-table td { color: var(--ink); padding: 10px 16px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .gpi-table tbody tr:hover { background: var(--canvas); } /* Fila que llega por deep link (?indicator=): la marca sin robarle el foco al resto de la tabla */ .gpi-table tbody tr.gpi-row--highlight { background: rgba(3, 123, 143, 0.07); box-shadow: inset 3px 0 0 var(--teal); } /* Pagination */ .gpi-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0; } .gpi-pager__link { color: var(--teal); font-weight: 600; font-size: 0.85rem; text-decoration: none; } .gpi-pager__link.is-disabled { color: var(--muted); pointer-events: none; } .gpi-pager__status { color: var(--muted); font-size: 0.85rem; } /* Empty state */ .gpi-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); padding: 40px 20px; } .gpi-empty .gpi-icon { width: 28px; height: 28px; color: var(--muted); } /* Forms */ .gpi-form { display: flex; flex-direction: column; gap: 16px; } /* Grilla de formulario de 12 columnas: el ancho lo define el TIPO de campo, no el orden (ui-pass-v2 sección 4) */ .gpi-form__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .gpi-field { grid-column: 1 / -1; min-width: 0; } .gpi-field--third { grid-column: span 4; } @media (max-width: 768px) { .gpi-field--third { grid-column: 1 / -1; } } /* Checkbox inline `[✓] Etiqueta`, alineado a la izquierda en la misma grilla (ui-pass-v2 sección 4) */ .gpi-field label.gpi-checkbox { display: flex; align-items: center; gap: 8px; height: var(--control-height); margin-bottom: 0; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; color: var(--ink); cursor: pointer; } .gpi-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; } .gpi-field__error { display: block; min-height: 1.1em; color: var(--red); font-size: 0.78rem; margin-top: 4px; } /* Alerts */ .gpi-alert { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 12px 16px; font-size: 0.9rem; font-weight: 500; } .gpi-alert .gpi-icon { flex: none; } .gpi-alert--success { background: rgba(30, 177, 104, 0.12); color: var(--green); } .gpi-alert--error { background: rgba(229, 72, 77, 0.12); color: var(--red); } /* Buttons: variantes de color (la forma común vive en el bloque de arriba) */ .gpi-btn-secondary { background: #fff; color: var(--navy); border-color: var(--line); } .gpi-btn-secondary:hover, .gpi-btn-secondary:active { background: var(--canvas); } .gpi-btn-ghost { background: transparent; color: var(--muted); } .gpi-btn-ghost:hover, .gpi-btn-ghost:active { color: var(--navy); background: var(--canvas); } /* Solo texto rojo, sin relleno: affordance igual a Editar en las filas de tabla (ui-pass.md sección 2) */ .gpi-btn-danger { background: transparent; color: var(--red); } .gpi-btn-danger:hover, .gpi-btn-danger:active { background: rgba(229, 72, 77, 0.1); } /* Relleno rojo reservado al botón de confirmación (panel de borrado / rechazo) */ .gpi-btn-danger--solid { background: var(--red); color: #fff; } .gpi-btn-danger--solid:hover, .gpi-btn-danger--solid:active { background: #c8393e; } /* Tabs (Billing) */ .gpi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .gpi-tabs__link { padding: 10px 16px; color: var(--muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-bottom: 2px solid transparent; } .gpi-tabs__link.is-active { color: var(--teal); border-color: var(--teal); } /* Inline create/edit panel: sombra propia para leerse como capa distinta de la tabla de abajo (ui-pass-v2 sección 4) */ .gpi-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 16px -8px rgba(6, 16, 40, 0.16); } /* Form de confirmación de borrado: en línea junto al link Cancelar, sin JS ni estilos inline */ .gpi-inline-form { display: inline; } /* Toolbar de listado (filtro + alta) */ .gpi-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gpi-toolbar__filter { display: flex; align-items: center; gap: 8px; } .gpi-toolbar__filter input[type="text"] { box-sizing: border-box; height: var(--control-height); padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink); min-width: 260px; } /* Fila de acciones de un formulario de alta/edición */ .gpi-form__actions { display: flex; align-items: center; gap: 12px; } /* El botón primario del login es full-width; dentro de un formulario de alta/edición va en línea */ .gpi-form .gpi-btn-primary { width: auto; } /* Dashboard */ /* auto-fill (no auto-fit): las tarjetas mantienen el mismo ancho aunque la última fila quede incompleta (ui-pass-v2 sección 1) */ .gpi-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; } .gpi-dashboard-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; } /* Barras horizontales con pista de fondo siempre visible, aunque el valor sea 0 (ui-pass-v2 sección 2) */ .gpi-status-bars { display: flex; flex-direction: column; gap: 16px; } .gpi-status-bars__row { display: grid; grid-template-columns: 100px 1fr 36px; align-items: center; gap: 12px; } .gpi-status-bars__label { color: var(--muted); font-size: 0.85rem; } .gpi-status-bars__track { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; } .gpi-status-bars__fill { height: 100%; min-width: 2px; border-radius: 5px; background: var(--bar-color); } .gpi-status-bars__count { font-weight: 700; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; } .gpi-summary-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); } .gpi-summary-row__label { color: var(--muted); font-size: 0.9rem; } .gpi-summary-row__value { font-weight: 700; color: var(--navy); } /* Compensa la appbar fija (padding-top) y deja lugar al drawer fijo (margin-left) */ .gpi-main { margin-left: var(--drawer-width); padding: calc(var(--appbar-height) + 24px) 24px 24px; } /* Ancho máximo de contenido centrado para que la tabla no se estire hasta el borde en monitores anchos (ui-pass-v2 sección 5) */ .gpi-content { max-width: var(--content-max-width); margin: 0 auto; } /* Responsive drawer (checkbox toggle, sin JS) */ @media (max-width: 768px) { .gpi-appbar__toggle { display: inline-block; } .gpi-appbar__brand { width: auto; } .gpi-drawer { transform: translateX(-100%); transition: transform 0.2s ease; } .gpi-drawer-toggle:checked ~ .gpi-shell .gpi-drawer { transform: translateX(0); } .gpi-drawer-toggle:checked ~ .gpi-shell .gpi-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(6, 16, 40, 0.4); z-index: 30; } .gpi-main { margin-left: 0; } .gpi-dashboard-grid { grid-template-columns: 1fr; } .gpi-table-wrap { max-width: 100vw; } }