/* ===================================================================== Talleres Alegría · Intranet Material Móvil Tema corporativo (rojo granate) sobre Bootstrap 5 ===================================================================== */ :root{ --talg-primary: #aa595e; --talg-primary-dark: #9e4046; --talg-primary-light: #aa595e; --talg-secondary: #575656; /* grafito del logo */ --talg-secondary-dark: #454444; --talg-accent: #e30613; /* rojo vivo del logo (acento) */ --talg-sidebar-w: 260px; --talg-bg: #f3f4f7; --talg-text: #32353b; --talg-muted: #8a8f99; --talg-sidebar-brand: #1e2d49; --talg-topbar: #1e2d49; /* Superficies y bordes (tokens para poder invertirlos en modo oscuro) */ --talg-surface: #fff; /* tarjetas, KPIs, paneles, modales */ --talg-surface-2: #faf6f6; /* cabeceras de tarjeta y de tabla */ --talg-hover: #f7f8fa; /* hover de listas y filas de tabla */ --talg-input-border: #dfe2e8; /* borde de campos de formulario */ --talg-footer-border: #e6e6e6; /* Tokens de diseño (lavado de cara estilo Alpaz) */ --talg-radius: 14px; --talg-radius-sm: 10px; --talg-shadow: 0 6px 24px rgba(40, 45, 60, .07); --talg-shadow-sm: 0 2px 10px rgba(40, 45, 60, .05); --talg-shadow-hover: 0 10px 32px rgba(40, 45, 60, .12); --talg-border: #eceef2; } /* ===================================================================== Modo oscuro · redefinición de tokens - [data-theme="oscuro"] → elección explícita del usuario (server-side). - prefers-color-scheme → modo "auto" y páginas sin sesión (login) cuyo no lleva atributo data-theme. El resto del CSS consume estos tokens vía var(...), así que la mayor parte del tema oscuro se resuelve aquí. ===================================================================== */ :root[data-theme="oscuro"]{ --talg-bg: #14161a; --talg-text: #e4e6eb; --talg-muted: #9aa0aa; --talg-surface: #1c1f24; --talg-surface-2: #232026; /* leve tinte cálido en cabeceras */ --talg-hover: #262a31; --talg-border: #2a2e35; --talg-input-border: #3a3f47; --talg-footer-border: #2a2e35; --talg-shadow: 0 6px 24px rgba(0, 0, 0, .45); --talg-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --talg-shadow-hover: 0 10px 32px rgba(0, 0, 0, .55); } @media (prefers-color-scheme: dark){ :root[data-theme="auto"], html:not([data-theme]){ --talg-bg: #14161a; --talg-text: #e4e6eb; --talg-muted: #9aa0aa; --talg-surface: #1c1f24; --talg-surface-2: #232026; --talg-hover: #262a31; --talg-border: #2a2e35; --talg-input-border: #3a3f47; --talg-footer-border: #2a2e35; --talg-shadow: 0 6px 24px rgba(0, 0, 0, .45); --talg-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --talg-shadow-hover: 0 10px 32px rgba(0, 0, 0, .55); } } *{ box-sizing: border-box; } body{ margin: 0; background: var(--talg-bg); color: var(--talg-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Estructura general ---------- */ .talg-wrapper{ display: flex; min-height: 100vh; } .talg-main{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; margin-left: var(--talg-sidebar-w); transition: margin-left .2s ease; } /* ---------- Sidebar ---------- */ .talg-sidebar{ position: fixed; top: 0; left: 0; bottom: 0; width: var(--talg-sidebar-w); background: linear-gradient(180deg, var(--talg-secondary), var(--talg-secondary-dark)); border-right: none; display: flex; flex-direction: column; z-index: 1040; transition: transform .2s ease; overflow-y: auto; } .talg-sidebar__brand{ display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; background: var(--talg-sidebar-brand); color: #fff; font-weight: 700; font-size: 1.05rem; } .talg-sidebar__brand i{ font-size: 1.3rem; } .talg-sidebar__brand img{ width: 100%; max-width: 220px; height: auto; } .talg-sidebar__user{ display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.12); margin: 10px; border-radius: 15px; background: color-mix(in srgb, var(--talg-sidebar-brand), var(--talg-sidebar-brand) 30%); } .talg-avatar{ width: 42px; height: 42px; border-radius: 50%; background: var(--talg-primary-light); color: #fff; display: grid; place-items: center; flex: 0 0 auto; } .talg-sidebar__user-info{ display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .talg-sidebar__user-info strong{ font-size: .92rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .talg-sidebar__user-info small{ color: rgba(255,255,255,.55); font-size: .78rem; } /* ---------- Menú ---------- */ .talg-menu{ padding: .6rem .6rem; } .talg-menu__link, .talg-menu__toggle{ display: flex; align-items: center; gap: .7rem; width: 100%; padding: .62rem .85rem; margin: .12rem 0; border-radius: var(--talg-radius-sm); color: #d7d7d7; text-decoration: none; background: none; border: none; text-align: left; font-size: .92rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .talg-menu__link i, .talg-menu__toggle i{ width: 18px; text-align: center; color: rgba(255,255,255,.5); transition: color .15s ease; } .talg-menu__link:hover, .talg-menu__toggle:hover{ background: rgba(255,255,255,.09); color: #fff; } .talg-menu__link:hover i, .talg-menu__toggle:hover i{ color: #fff; } .talg-menu__link.is-active{ background: var(--talg-primary); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(170,89,94,.35); } .talg-menu__link.is-active i{ color: #fff; } .talg-menu__link--child{ padding-left: 2.4rem; font-size: .88rem; } .talg-menu__caret{ margin-left: auto; font-size: .72rem !important; transition: transform .2s ease; } .talg-menu__toggle.is-open .talg-menu__caret{ transform: rotate(180deg); } /* ---------- Topbar ---------- */ .talg-topbar{ display: flex; align-items: center; gap: 1rem; padding: .75rem 1.4rem; background: var(--talg-topbar); color: #fff; position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 12px rgba(40,45,60,.10); } .talg-topbar__burger{ background: none; border: none; color: #fff; font-size: 1.2rem; display: inline-block; cursor: pointer; } .talg-topbar__title{ font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; padding-left: 1.1rem; border-left: 3px solid var(--talg-accent); } .talg-topbar__right{ margin-left: auto; display: flex; align-items: center; gap: 1rem; } .talg-topbar__support{ color: #fff; text-decoration: none; opacity: .9; font-size: .9rem; } .talg-topbar__support:hover{ opacity: 1; color: #fff; } /* ---------- Contenido ---------- */ .talg-content{ padding: 1.75rem; flex: 1 1 auto; } /* ---------- Hero de bienvenida ---------- */ .talg-hero{ position: relative; overflow: hidden; border-radius: var(--talg-radius); padding: 1.7rem 1.9rem; color: #fff; background: linear-gradient(135deg, rgba(158,64,70,.92), rgba(170,89,94,.74) 65%, rgba(196,128,133,.66)), url('../img/login-bg.jpg') center/cover no-repeat; box-shadow: var(--talg-shadow); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .talg-hero__watermark{ position: absolute; right: -25px; bottom: -45px; font-size: 12rem; line-height: 1; color: rgba(255,255,255,.08); pointer-events: none; } .talg-hero__info{ position: relative; z-index: 1; } .talg-hero__info h2{ font-size: 1.6rem; font-weight: 700; margin: 0 0 .15rem; color: #fff; } .talg-hero__info p{ margin: 0; color: rgba(255,255,255,.85); } .talg-hero__meta{ margin-top: .7rem; font-size: .82rem; color: rgba(255,255,255,.8); } .talg-hero__meta strong{ color: #fff; } .talg-hero__clock{ position: relative; z-index: 1; text-align: right; } .talg-hero__time{ font-size: 2.3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .talg-hero__time i{ font-size: 1.4rem; opacity: .85; margin-right: .35rem; } .talg-hero__date{ font-size: .9rem; color: rgba(255,255,255,.85); margin-top: .4rem; text-transform: capitalize; } @media (max-width: 576px){ .talg-hero__clock{ text-align: left; } .talg-hero__time{ font-size: 1.9rem; } } .talg-card{ border: 1px solid var(--talg-border); border-radius: var(--talg-radius); box-shadow: var(--talg-shadow-sm); transition: box-shadow .18s ease; } .talg-card:hover{ box-shadow: var(--talg-shadow); } .talg-card .card-header{ background: var(--talg-surface-2) !important; border-bottom: 1px solid var(--talg-border); border-top-left-radius: var(--talg-radius); border-top-right-radius: var(--talg-radius); padding: .9rem 1.1rem; } /* ---------- KPIs ---------- */ .talg-kpi{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--talg-border); border-radius: var(--talg-radius); padding: 1.25rem 1.3rem; height: 100%; transition: box-shadow .18s ease, transform .18s ease; background: var(--talg-surface); } .talg-kpi:hover{ box-shadow: var(--talg-shadow); transform: translateY(-2px); } .talg-kpi__body{ min-width: 0; } .talg-kpi__icon{ width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; font-size: 1.35rem; color: #fff; background: var(--talg-primary); } .talg-kpi--warn .talg-kpi__icon{ background: #fd7e14; } .talg-kpi--accent .talg-kpi__icon{ background: var(--talg-accent); } .talg-kpi--gray .talg-kpi__icon{ background: var(--talg-secondary); } .talg-kpi__num{ font-size: 2rem; font-weight: 700; line-height: 1; color: var(--talg-text); } .talg-kpi__label{ color: var(--talg-muted); font-size: .84rem; margin: 0 0 .25rem; } /* ---------- Footer ---------- */ .talg-footer{ display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: .8rem 1.2rem; border-top: 1px solid var(--talg-footer-border); color: var(--talg-muted); font-size: .85rem; background: var(--talg-surface); } .talg-footer i{ color: var(--talg-primary); } /* ---------- Listas (paneles de avisos / notas) ---------- */ .list-group-item{ border-color: var(--talg-border); } .list-group-item-action:hover{ background: var(--talg-hover); } .card .list-group-flush{ border-bottom-left-radius: var(--talg-radius); border-bottom-right-radius: var(--talg-radius); overflow: hidden; } /* Badges de adjuntos / etiquetas suaves */ .badge.bg-light{ font-weight: 500; padding: .4rem .6rem; border-radius: 8px !important; } /* Botón "píldora" corporativo (ej. "Ver todos" en los paneles) */ .talg-pill{ display: inline-flex; align-items: center; gap: .35rem; border-radius: 50rem; font-size: .78rem; font-weight: 600; padding: .28rem .85rem; line-height: 1; border: 1px solid var(--talg-primary); color: var(--talg-primary); background: var(--talg-surface); text-decoration: none; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .talg-pill:hover{ background: var(--talg-primary); color: #fff; box-shadow: 0 4px 12px rgba(170,89,94,.22); } /* Icono de cada ítem en las listas (avisos / notas) */ .talg-item-ico{ display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; margin-right: .65rem; flex: 0 0 auto; font-size: .8rem; } .talg-item-ico--aviso{ color: var(--talg-accent); background: #fde7e8; background: color-mix(in srgb, var(--talg-accent) 15%, var(--talg-surface)); } .talg-item-ico--nota{ color: var(--talg-secondary); background: #ededed; background: color-mix(in srgb, var(--talg-secondary) 16%, var(--talg-surface)); } /* Matriz de permisos (perfil-form): más aire y primera columna separada del borde */ .talg-matriz > thead > tr > th, .talg-matriz > tbody > tr > td{ padding-left: 1.4rem; padding-right: 1.4rem; padding-top: .55rem; padding-bottom: .55rem; } .talg-matriz > tbody > tr > td.ps-4{ padding-left: 2.6rem !important; } /* submódulos con sangría */ /* Subcabeceras dentro de listas (Hoy / Próximas en notas) */ .talg-list-sub{ display: flex; align-items: center; gap: .45rem; padding: .5rem 1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--talg-secondary); background: var(--talg-surface); border-top: 1px solid var(--talg-border); border-left: 3px solid var(--talg-secondary); } .talg-list-sub:first-child{ border-top: none; } .talg-list-sub--hoy{ color: var(--talg-primary); border-left-color: var(--talg-primary); } .talg-nota-hoy{ color: var(--talg-primary); font-weight: 600; } .talg-badge-hoy{ background: #fde7e8; background: color-mix(in srgb, var(--talg-accent) 14%, var(--talg-surface)); color: var(--talg-accent); border-radius: 50rem; padding: .18rem .6rem; font-size: .72rem; font-weight: 600; } /* Calendario del mes (dashboard) */ .talg-cal__title{ font-weight: 700; color: var(--talg-primary); font-size: .85rem; } .talg-cal__grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .talg-cal__dows{ border-bottom: 2px solid var(--talg-border); padding-bottom: .4rem; margin-bottom: .5rem; } .talg-cal__dow{ text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--talg-primary); padding: .15rem 0; } .talg-cal__day{ position: relative; height: 50px; display: grid; place-items: center; font-size: .85rem; border-radius: 9px; color: var(--talg-text); } .talg-cal__day--empty{ visibility: hidden; } .talg-cal__day--today{ background: var(--talg-primary); color: #fff; font-weight: 700; } .talg-cal__day--mark::after{ content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--talg-accent); } .talg-cal__day--today.talg-cal__day--mark::after{ background: #fff; } .talg-cal__legend{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--talg-accent); margin-right: .35rem; vertical-align: middle; } /* Checklist de requisitos de contraseña */ .talg-pwpolicy{ border: 1px solid var(--talg-border); border-radius: var(--talg-radius-sm); background: var(--talg-surface); padding: .8rem 1rem; margin-top: .6rem; } .talg-pwpolicy__title{ font-size: .8rem; font-weight: 600; color: var(--talg-secondary); margin-bottom: .4rem; } .talg-pwpolicy__list{ list-style: none; margin: 0; padding: 0; } .talg-pwpolicy__list li{ display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--talg-muted); padding: .12rem 0; transition: color .15s ease; } .talg-pwpolicy__list li i{ width: 1em; text-align: center; } .talg-pwpolicy__ok{ display: none; color: #1a7f37; } /* check verde al cumplir */ .talg-pwpolicy__no{ color: #c9ccd3; } /* círculo gris pendiente */ .talg-pwpolicy__list li.is-ok{ color: #1a7f37; } .talg-pwpolicy__list li.is-ok .talg-pwpolicy__ok{ display: inline; } .talg-pwpolicy__list li.is-ok .talg-pwpolicy__no{ display: none; } /* ---------- Editor de pasos (flujos de aprobación) ---------- */ .talg-paso{ display: flex; align-items: flex-start; gap: .75rem; border: 1px solid var(--talg-border); border-radius: var(--talg-radius-sm); background: var(--talg-surface); padding: .75rem; margin-bottom: .6rem; } .talg-paso__num{ flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-top: 1.55rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--talg-secondary); color: #fff; font-weight: 700; font-size: .85rem; } .talg-paso__del{ flex: 0 0 auto; margin-top: 1.5rem; } /* ---------- Editor de campos (plantillas de control) ---------- */ .talg-campo{ display: flex; align-items: flex-start; gap: .75rem; border: 1px solid var(--talg-border); border-radius: var(--talg-radius-sm); background: var(--talg-surface); padding: .75rem; margin-bottom: .6rem; } .talg-campo__num{ flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-top: 1.55rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--talg-secondary); color: #fff; font-weight: 700; font-size: .85rem; } .talg-campo__del{ flex: 0 0 auto; margin-top: 1.55rem; } /* ---------- Botón corporativo ---------- */ .talg-btn{ background: var(--talg-primary); color: #fff; font-weight: 600; border: none; border-radius: var(--talg-radius-sm); box-shadow: 0 4px 12px rgba(170,89,94,.22); transition: background .15s ease, box-shadow .15s ease, transform .12s ease; } .talg-btn:hover{ background: var(--talg-primary-dark); color: #fff; box-shadow: 0 6px 16px rgba(170,89,94,.3); transform: translateY(-1px); } .talg-btn:active{ transform: translateY(0); } /* Bordes redondeados coherentes en botones de Bootstrap */ .btn{ border-radius: var(--talg-radius-sm); } .btn-sm{ border-radius: 8px; } /* ---------- Formularios ---------- */ /* Etiquetas en granate para diferenciarlas de los campos */ .form-label{ color: var(--talg-primary); font-weight: 600; } .form-control, .form-select{ border-radius: var(--talg-radius-sm); border-color: var(--talg-input-border); padding: .5rem .8rem; } .form-control:focus, .form-select:focus{ border-color: var(--talg-primary-light); box-shadow: 0 0 0 .2rem rgba(170,89,94,.12); } /* ---------- Tablas ---------- */ /* Cabecera (th) sobria con tinte granate suave */ .table thead th{ --bs-table-bg: var(--talg-surface-2); background-color: var(--talg-surface-2); color: var(--talg-primary); border-bottom: 1px solid var(--talg-primary-light); font-weight: 600; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; padding-top: .75rem; padding-bottom: .75rem; } .table > :not(caption) > * > *{ padding-top: .7rem; padding-bottom: .7rem; } .table-hover > tbody > tr:hover > *{ --bs-table-hover-bg: var(--talg-hover); } /* Tablas a ras dentro de tarjeta: esquinas redondeadas coherentes con la tarjeta. Se redondean las celdas de las esquinas (mantiene el scroll horizontal en móvil). */ .talg-card .table-responsive{ border-radius: var(--talg-radius); } .talg-card .table-responsive > .table > thead > tr:first-child > th:first-child{ border-top-left-radius: var(--talg-radius); } .talg-card .table-responsive > .table > thead > tr:first-child > th:last-child{ border-top-right-radius: var(--talg-radius); } .talg-card .table-responsive > .table > tbody > tr:last-child > td:first-child{ border-bottom-left-radius: var(--talg-radius); } .talg-card .table-responsive > .table > tbody > tr:last-child > td:last-child{ border-bottom-right-radius: var(--talg-radius); } /* ===================================================================== Login ===================================================================== */ .talg-login{ min-height: 100vh; margin: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--talg-primary-dark), var(--talg-primary)); padding: 1rem; } .talg-login__card{ background: var(--talg-surface); width: 100%; max-width: 400px; border-radius: .8rem; padding: 2rem 2rem 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); } .talg-login__brand{ text-align: center; margin-bottom: 1.5rem; } .talg-login__brand i{ font-size: 2.4rem; color: var(--talg-primary); } .talg-login__brand h1{ font-size: 1.3rem; margin: .5rem 0 .1rem; color: var(--talg-primary); } .talg-login__brand p{ color: var(--talg-muted); font-size: .85rem; margin: 0; } .talg-login__foot{ text-align: center; color: var(--talg-muted); font-size: .78rem; margin-top: 1.2rem; } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 992px){ .talg-main{ margin-left: 0; } .talg-sidebar{ transform: translateX(-100%); } .talg-sidebar.is-open{ transform: translateX(0); } .talg-topbar__burger{ display: inline-block; } } /* Menú colapsable en escritorio/tablet (botón hamburguesa) */ @media (min-width: 993px){ .talg-wrapper.is-collapsed .talg-sidebar{ transform: translateX(-100%); } .talg-wrapper.is-collapsed .talg-main{ margin-left: 0; } } /* ---------- Selector de tema (Apariencia) ---------- */ .tema-card{ display: block; position: relative; cursor: pointer; border: 2px solid var(--talg-border); border-radius: .6rem; overflow: hidden; background: var(--talg-surface); transition: border-color .15s ease, box-shadow .15s ease; } .tema-card:hover{ box-shadow: 0 2px 12px rgba(0,0,0,.1); } .tema-card.is-selected{ border-color: var(--talg-primary); } .tema-card__swatches{ display: flex; height: 64px; } .tema-card__swatches span{ flex: 1; } .tema-card__body{ padding: .6rem .8rem; } .tema-card__check{ position: absolute; top: .5rem; right: .5rem; color: #fff; opacity: 0; text-shadow: 0 0 3px rgba(0,0,0,.4); } .tema-card.is-selected .tema-card__check{ opacity: 1; } /* Cuadritos de color reutilizables (listados) */ .swatch{ display: inline-block; width: 18px; height: 18px; border-radius: 3px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); } /* ---------- Aviso de inactividad ---------- */ .idle-modal{ position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 1rem; } .idle-modal[hidden]{ display: none; } .idle-modal__box{ background: var(--talg-surface); border-radius: .6rem; padding: 1.8rem; max-width: 380px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3); } .idle-modal__box i{ font-size: 2.2rem; color: var(--talg-primary); margin-bottom: .6rem; } .idle-modal__box h5{ margin: 0 0 .4rem; } .idle-modal__box p{ color: var(--talg-muted); } .idle-modal__box .btn{ margin: .25rem; } /* ===================================================================== Login · pantalla dividida (formulario + panel decorativo) ===================================================================== */ .login-page{ margin: 0; } .login-split{ display: flex; min-height: 100vh; } /* --- Lado izquierdo (formulario) --- */ .login-left{ flex: 1 1 50%; display: flex; align-items: center; justify-content: center; background: var(--talg-surface); padding: 2.5rem; } .login-left__inner{ width: 100%; max-width: 380px; display: flex; flex-direction: column; min-height: 78vh; } .login-logo{ color: var(--talg-primary); font-size: 2rem; } .login-logo img{ height: 90px; width: auto; max-width: 100%; } .login-form-wrap{ margin: auto 0; } /* centrado vertical */ .login-form-wrap h1{ font-size: 2rem; font-weight: 700; margin: 0 0 .2rem; } .login-sub{ color: var(--talg-muted); font-size: .9rem; margin-bottom: 2.2rem; } .login-field{ position: relative; margin-bottom: 1.6rem; } .login-field i{ position: absolute; left: 2px; top: .65rem; color: var(--talg-primary); } .login-field input{ width: 100%; border: none; border-bottom: 1px solid var(--talg-input-border); padding: .5rem .25rem .5rem 1.9rem; font-size: 1rem; background: transparent; outline: none; transition: border-color .15s ease; } .login-field input:focus{ border-bottom-color: var(--talg-primary); } .login-field input::placeholder{ color: #b0b0b0; } .login-actions{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; } .login-switch .form-check-input{ cursor: pointer; } .login-switch .form-check-input:checked{ background-color: var(--talg-primary); border-color: var(--talg-primary); } .login-switch .form-check-input:focus{ box-shadow: 0 0 0 .2rem rgba(170,89,94,.2); border-color: var(--talg-primary); } .login-switch .form-check-label{ font-size: .85rem; color: var(--talg-muted); } .login-btn{ background: var(--talg-primary); color: #fff; border: none; padding: .55rem 1.5rem; border-radius: .4rem; font-weight: 600; white-space: nowrap; transition: background .15s ease; } .login-btn:hover{ background: var(--talg-primary-dark); color: #fff; } .login-help{ margin-top: 2.2rem; font-size: .82rem; color: var(--talg-muted); } .login-foot{ margin-top: auto; padding-top: 2rem; color: var(--talg-muted); font-size: .78rem; } .login-foot strong{ color: var(--talg-primary); } /* --- Lado derecho (panel decorativo en granate) --- */ .login-right{ flex: 1 1 50%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 72% 18%, rgba(255,255,255,.14), transparent 42%), linear-gradient(135deg, var(--talg-primary-dark), var(--talg-primary) 55%, var(--talg-primary-light)); /* ¿Quieres una foto real de fondo? Sube public/assets/img/login-bg.jpg y sustituye el "background" de arriba por:*/ background: linear-gradient(135deg, rgba(158,64,70,.85), rgba(170,89,94,.7)), url('../img/login-bg.jpg') center/cover no-repeat; */ } .login-right__watermark{ position: absolute; right: -50px; bottom: -40px; font-size: 24rem; color: rgba(255,255,255,.06); pointer-events: none; } .login-right__content{ position: relative; color: #fff; text-align: center; padding: 2rem; } .login-right__content > i{ font-size: 3rem; margin-bottom: 1rem; opacity: .9; } .login-right__content h2{ font-weight: 700; margin: 0 0 .4rem; } .login-right__content p{ opacity: .85; margin: 0; } @media (max-width: 992px){ .login-right{ display: none; } .login-left{ flex: 1 1 100%; } }