/* ============================================================ Vinaelectric — App shell Tema oscuro: misma paleta corporativa, con los roles invertidos. El azul oscuro pasa a ser el fondo; el blanco, el texto. ============================================================ */ :root { /* Paleta corporativa (tonos de marca, no tocar) */ --corp-dark: #172039; --corp-medium: #414e6b; --corp-light: #87848e; /* Superficies oscuras derivadas de la paleta */ --corp-canvas: #0c1122; --corp-surface: #141b30; --corp-surface-2: #1b2440; --corp-border: #262f4d; --corp-border-soft: #1c2540; --corp-hover: #1b2440; /* Texto y acento, para que el contraste funcione sobre fondo oscuro */ --corp-text: #f2f3f6; --corp-accent: #7c8cc4; --corp-accent-strong: #9daae0; /* Métricas del layout */ --rail-w: 64px; --rail-w-open: 232px; --aside-w: 340px; } /* Alinea las variables de Bootstrap con la paleta oscura corporativa, para que los componentes usados "a pelo" (card, table, form-control, dropdown-menu, modal...) encajen con los componentes .corp-* sin tener que repintar cada plantilla. */ html[data-bs-theme="dark"] { --bs-body-bg: var(--corp-canvas); --bs-body-color: var(--corp-text); --bs-emphasis-color: var(--corp-text); --bs-secondary-color: var(--corp-light); --bs-secondary-bg: var(--corp-surface-2); --bs-tertiary-bg: var(--corp-surface); --bs-tertiary-color: var(--corp-light); --bs-border-color: var(--corp-border); --bs-border-color-translucent: var(--corp-border); --bs-heading-color: var(--corp-text); --bs-link-color: var(--corp-accent); --bs-link-hover-color: var(--corp-accent-strong); --bs-card-bg: var(--corp-surface); --bs-card-border-color: var(--corp-border); --bs-table-bg: transparent; --bs-table-color: var(--corp-text); --bs-table-border-color: var(--corp-border-soft); --bs-table-striped-bg: var(--corp-surface-2); --bs-table-hover-bg: var(--corp-hover); --bs-modal-bg: var(--corp-surface); --bs-modal-header-border-color: var(--corp-border); --bs-modal-footer-border-color: var(--corp-border); --bs-dropdown-bg: var(--corp-surface); --bs-dropdown-border-color: var(--corp-border); --bs-dropdown-link-color: var(--corp-text); --bs-dropdown-link-hover-bg: var(--corp-hover); --bs-dropdown-link-hover-color: var(--corp-text); --bs-dropdown-divider-bg: var(--corp-border); } /* Los campos de formulario quedan un tono por encima del fondo, para que se distingan de la página en vez de fundirse con ella. */ .form-control, .form-select { background-color: var(--corp-surface); border-color: var(--corp-border); color: var(--corp-text); } .form-control:focus, .form-select:focus { background-color: var(--corp-surface); border-color: var(--corp-accent); color: var(--corp-text); box-shadow: 0 0 0 3px rgba(124, 140, 196, 0.25); } .form-control::placeholder { color: var(--corp-light); opacity: 0.75; } .form-control:disabled, .form-select:disabled { background-color: var(--corp-surface-2); color: var(--corp-light); } .form-check-input { background-color: var(--corp-surface); border-color: var(--corp-border); } .form-check-input:checked { background-color: var(--corp-medium); border-color: var(--corp-medium); } /* Rail expandido. La clase la pone rail.js sobre , así que basta con reasignar --rail-w: el ancho del rail y el margen del contenido la usan. */ html.rail-open { --rail-w: var(--rail-w-open); } * { scrollbar-width: thin; } body { background: var(--corp-canvas); min-height: 100vh; color: var(--corp-text); -webkit-font-smoothing: antialiased; } /* ============ Estructura general ============ */ .app-shell { min-height: 100vh; } .app-body { margin-left: var(--rail-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; transition: margin-left 0.18s ease; } .app-canvas { flex: 1; padding: 24px 28px 48px; min-width: 0; } /* Las plantillas existentes envuelven su contenido en `.container py-4/py-5`, a veces con un max-width inline. Dentro del shell ese contenedor sobra: lo neutralizamos aquí para no tener que tocar las 30 plantillas. */ .app-canvas > .container, .app-canvas > .container-fluid { max-width: none !important; width: 100%; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-left: 0; margin-right: 0; } /* ============ Rail lateral de iconos ============ */ .app-rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); background: var(--corp-dark); display: flex; flex-direction: column; align-items: center; padding: 12px 11px; z-index: 1040; transition: width 0.18s ease; } /* --- Marca --- */ .rail-brand { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 7px; border-radius: 10px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.06); text-decoration: none; overflow: hidden; transition: background 0.15s; } .rail-brand:hover { background: rgba(255, 255, 255, 0.14); } .rail-brand img { width: 26px; height: auto; flex: 0 0 auto; } .rail-brand-name { color: #ffffff; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity 0.12s; } html.rail-open .rail-brand-name { opacity: 1; } /* --- Grupos: línea cuando está plegado, epígrafe cuando está desplegado --- */ .rail-group { display: flex; align-items: center; justify-content: center; width: 28px; height: 1px; margin: 8px auto; background: rgba(255, 255, 255, 0.12); flex: 0 0 auto; } .rail-group span { display: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); white-space: nowrap; } html.rail-open .rail-group { width: 100%; height: auto; margin: 12px 0 4px; padding: 0 9px; background: none; justify-content: flex-start; } html.rail-open .rail-group span { display: block; } /* --- Lista de secciones --- */ .rail-nav { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; overflow-y: auto; /* el flyout de la etiqueta debe poder salir del rail */ overflow-x: visible; scrollbar-width: none; } .rail-nav::-webkit-scrollbar { display: none; } .rail-spacer { flex: 1 1 auto; } .rail-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 42px; padding: 0; flex: 0 0 auto; border-radius: 10px; color: rgba(255, 255, 255, 0.62); background: transparent; border: none; text-decoration: none; font-size: 18px; transition: background 0.15s, color 0.15s; } .rail-item > i { flex: 0 0 auto; width: 20px; text-align: center; } .rail-item:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; } .rail-item.active { background: var(--corp-medium); color: #ffffff; } /* Marcador de sección activa, pegado al borde izquierdo del rail */ .rail-item.active::before { content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #ffffff; } /* Plegado: la etiqueta es un tooltip flotante. El posicionamiento base es CSS puro, así que funciona aunque rail.js no cargue. Al pasar el cursor, rail.js lo reescribe a `fixed` con coordenadas calculadas para que no lo recorte el overflow de .rail-nav cuando el rail necesita scroll en pantallas bajas. */ .rail-label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--corp-surface-2); color: #ffffff; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; padding: 8px 11px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s; z-index: 1060; } .rail-item:hover .rail-label, .rail-item:focus-visible .rail-label { opacity: 1; visibility: visible; } /* Desplegado: la etiqueta pasa a ser texto normal dentro del botón */ html.rail-open .rail-item { justify-content: flex-start; padding: 0 9px; } html.rail-open .rail-label { position: static; transform: none; background: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 13.5px; line-height: 1.2; opacity: 1; visibility: visible; overflow: hidden; text-overflow: ellipsis; z-index: auto; } /* --- Botón de plegar / desplegar --- */ .rail-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 38px; margin-top: 6px; padding: 0; flex: 0 0 auto; border: none; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, 0.5); font-size: 15px; cursor: pointer; transition: background 0.15s, color 0.15s; } .rail-toggle:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; } .rail-toggle > i { flex: 0 0 auto; width: 20px; text-align: center; transition: transform 0.18s ease; } html.rail-open .rail-toggle { justify-content: flex-start; padding: 0 9px; } html.rail-open .rail-toggle > i { transform: rotate(180deg); } .rail-toggle-text { display: none; font-size: 12.5px; font-weight: 500; white-space: nowrap; } html.rail-open .rail-toggle-text { display: block; } .rail-notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #e24b4a; border-radius: 50%; border: 2px solid var(--corp-dark); } /* ============ Fila de contexto de la página ============ */ /* Migas y acciones. Cuando la página no define ninguna de las dos, la fila no ocupa alto ni deja margen: el :has() la desactiva por completo. */ .page-context { display: flex; align-items: center; gap: 16px; padding-right: 56px; /* hueco para la burbuja de usuario */ } .page-context:has(> * > *) { margin-bottom: 14px; } .page-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--corp-light); } .page-crumbs a { color: var(--corp-light); text-decoration: none; white-space: nowrap; } .page-crumbs a:hover { color: var(--corp-accent-strong); } .page-crumbs .sep { color: var(--corp-border); font-size: 11px; } .page-crumbs .current { color: var(--corp-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-context-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .page-icon-btn { position: relative; background: var(--corp-surface); border: 1px solid var(--corp-border); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--corp-light); font-size: 15px; cursor: pointer; transition: all 0.15s; text-decoration: none; } .page-icon-btn:hover { border-color: var(--corp-accent); color: var(--corp-accent-strong); } /* ============ Burbuja flotante de usuario ============ */ .user-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 1035; } .user-bubble-btn { width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; background: var(--corp-medium); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .user-bubble-btn:hover { background: var(--corp-accent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); } .user-bubble-btn:active { transform: translateY(0); } .user-bubble-btn:focus { outline: none; } .user-bubble-btn:focus-visible { box-shadow: 0 0 0 3px rgba(124, 140, 196, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); } .user-bubble-btn .notification-dot { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; background: #e24b4a; border-radius: 50%; border: 2px solid var(--corp-canvas); } .user-bubble .dropdown-menu { min-width: 232px; border: 1px solid var(--corp-border); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } .user-bubble .dropdown-item { border-radius: 8px; font-size: 14px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; } .user-bubble .dropdown-item i { font-size: 15px; } .avatar-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--corp-medium); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500; flex: 0 0 auto; } /* ============ Cabecera de página ============ */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .page-title { font-size: 21px; font-weight: 500; color: var(--corp-text); margin: 0 0 3px; line-height: 1.3; } .page-sub { font-size: 13.5px; color: var(--corp-light); margin: 0; } .page-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--corp-accent); text-decoration: none; font-size: 13px; margin-bottom: 14px; } .back-link:hover { color: var(--corp-accent-strong); } /* ============ Layout de detalle: panel central + aside ============ */ .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: 20px; align-items: start; } .detail-main { min-width: 0; } .detail-aside { min-width: 0; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; /* hueco inferior para que la burbuja de usuario no tape el último panel */ padding: 0 2px 76px 0; } @media (max-width: 1200px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } .detail-aside { position: static; max-height: none; overflow: visible; } } /* Panel central: cabecera de entidad */ .entity-head { background: var(--corp-surface); border: 1px solid var(--corp-border); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; } .entity-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .entity-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--corp-surface-2); color: var(--corp-accent-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; } .entity-title { font-size: 19px; font-weight: 500; color: var(--corp-text); margin: 0 0 3px; line-height: 1.3; } .entity-meta { font-size: 13.5px; color: var(--corp-accent-strong); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; } .entity-meta i { color: var(--corp-light); } /* Rejilla de campos leídos */ .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; } .field-label { display: block; font-size: 11px; font-weight: 500; color: var(--corp-light); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; } .field-value { font-size: 14px; color: var(--corp-text); } .field-value.strong { font-weight: 600; } .field-value.big { font-size: 19px; font-weight: 600; } .field-value.total { font-size: 20px; font-weight: 700; color: var(--corp-accent-strong); } .entity-divider { height: 1px; background: var(--corp-border-soft); margin: 18px 0; } .entity-footnote { font-size: 12px; color: var(--corp-light); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } /* ============ Paneles del aside (colapsables) ============ */ .side-card { background: var(--corp-surface); border: 1px solid var(--corp-border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .side-card-header { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--corp-surface); border: none; text-align: left; font-size: 13px; font-weight: 500; color: var(--corp-text); cursor: pointer; transition: background 0.12s; } .side-card-header:hover { background: var(--corp-hover); } .side-card-header:focus { outline: none; } .side-card-header > i:first-child { color: var(--corp-accent-strong); font-size: 14px; flex: 0 0 auto; } .side-card-header .side-card-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-card-header .side-card-count { font-size: 11px; font-weight: 500; color: var(--corp-light); background: var(--corp-surface-2); border-radius: 20px; padding: 2px 8px; flex: 0 0 auto; } .side-card-header .chev { font-size: 12px; color: var(--corp-light); flex: 0 0 auto; transition: transform 0.15s; } .side-card-header[aria-expanded="false"] .chev { transform: rotate(-90deg); } .side-card-body { padding: 14px; border-top: 1px solid var(--corp-border-soft); font-size: 13.5px; } .side-card-body > :last-child { margin-bottom: 0; } .side-card.accent-warn { border-left: 3px solid #f0ad4e; } .side-card.accent-ok { border-left: 3px solid #2fbf6e; } .side-card.accent-info { border-left: 3px solid var(--corp-accent); } .side-card.accent-danger { border-left: 3px solid #ef4444; } /* Lista clave/valor dentro del aside */ .side-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--corp-border-soft); } .side-kv:last-child { border-bottom: none; } .side-kv dt { font-size: 12px; font-weight: 400; color: var(--corp-light); margin: 0; flex: 0 0 auto; } .side-kv dd { font-size: 13px; color: var(--corp-text); font-weight: 500; margin: 0; text-align: right; min-width: 0; word-break: break-word; } /* Lista de entidades relacionadas en el aside */ .side-list { display: flex; flex-direction: column; gap: 8px; } .side-list-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--corp-border); border-radius: 8px; text-decoration: none; color: var(--corp-text); transition: all 0.12s; } .side-list-item:hover { border-color: var(--corp-accent); background: var(--corp-hover); color: var(--corp-text); } .side-list-main { flex: 1 1 auto; min-width: 0; } .side-list-title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-list-sub { font-size: 11.5px; color: var(--corp-light); margin-top: 1px; } .side-list-amount { font-size: 13px; font-weight: 600; flex: 0 0 auto; } /* Acciones del aside, apiladas a lo ancho */ .side-actions { display: flex; flex-direction: column; gap: 8px; } .side-actions > * { width: 100%; justify-content: center; } .side-empty { text-align: center; color: var(--corp-light); font-size: 12.5px; padding: 10px 0; } /* Cronología (histórico de estados) */ .side-timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--corp-border); } .side-timeline li { position: relative; padding: 0 0 14px 0; } .side-timeline li:last-child { padding-bottom: 0; } .side-timeline li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--corp-accent); border: 2px solid var(--corp-surface); } .side-timeline .tl-when { font-size: 11.5px; color: var(--corp-light); display: block; } .side-timeline .tl-what { font-size: 13px; color: var(--corp-text); } .side-timeline .tl-who { font-size: 11.5px; color: var(--corp-light); } /* Visor de documento embebido */ .doc-frame { width: 100%; border: 1px solid var(--corp-border); border-radius: 8px; background: var(--corp-surface-2); display: block; } .doc-frame.tall { height: 700px; } .doc-frame.short { height: 260px; } /* ============ SweetAlert corporativo ============ */ .swal-corp-toast { background: var(--corp-surface) !important; border-left: 4px solid var(--corp-accent) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; } .swal2-popup.swal2-toast .swal2-title { color: var(--corp-text) !important; font-weight: 500 !important; } .swal-corp-modal { background: var(--corp-surface) !important; border-radius: 12px !important; padding: 2rem !important; } .swal-corp-modal .swal2-title { color: var(--corp-text) !important; font-weight: 500 !important; font-size: 22px !important; } .swal-corp-modal .swal2-html-container { color: var(--corp-light) !important; font-size: 15px !important; } .swal2-popup { background: var(--corp-surface) !important; color: var(--corp-text) !important; } .swal-corp-confirm { background: var(--corp-medium) !important; border-radius: 6px !important; padding: 10px 24px !important; font-weight: 500 !important; } .swal-corp-confirm:hover { background: var(--corp-accent) !important; } .swal-corp-danger { background: #dc3545 !important; border-radius: 6px !important; padding: 10px 24px !important; font-weight: 500 !important; } .swal-corp-cancel { background: transparent !important; color: var(--corp-light) !important; border: 1px solid var(--corp-border) !important; border-radius: 6px !important; padding: 10px 24px !important; font-weight: 500 !important; } /* ============ Botones corporativos ============ */ .btn-corp-primary { background: var(--corp-medium); color: #ffffff; border: none; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .btn-corp-primary:hover { background: var(--corp-accent); color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } .btn-corp-primary:active { transform: translateY(0); } .btn-corp-primary i { font-size: 16px; } /* .btn-corp se usaba en plantillas sin estar definido: variante secundaria */ .btn-corp { background: var(--corp-surface); color: var(--corp-text); border: 1px solid var(--corp-border); padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.15s; } .btn-corp:hover { border-color: var(--corp-accent); color: var(--corp-accent-strong); background: var(--corp-surface); } .btn-corp i { font-size: 15px; } /* ============ Tarjetas y tablas ============ */ .card { border: 1px solid var(--corp-border); border-radius: 12px; } .data-card { background: var(--corp-surface); border-radius: 12px; border: 1px solid var(--corp-border); overflow: hidden; } .data-card-header { padding: 16px 20px; border-bottom: 1px solid var(--corp-border); background: var(--corp-surface-2); } .data-card-body { padding: 0; } /* ============ Filtros ============ */ .filters-bar { background: var(--corp-surface); border: 1px solid var(--corp-border); border-radius: 12px; padding: 14px; margin-bottom: 18px; } .filter-input { height: 40px; border: 1px solid var(--corp-border); border-radius: 8px; padding: 0 13px; font-size: 14px; transition: all 0.15s; } .filter-input:focus { border-color: var(--corp-accent); box-shadow: 0 0 0 3px rgba(124, 140, 196, 0.2); outline: none; } .filter-input.with-icon { padding-left: 38px; } .filter-search-wrapper { position: relative; } .filter-search-wrapper .bi-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--corp-light); font-size: 14px; } /* ============ Tabla corporativa ============ */ .table-corp { margin-bottom: 0; } .table-corp thead { background: var(--corp-surface-2); } .table-corp thead th { font-size: 11.5px; font-weight: 500; color: var(--corp-light); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px; border-bottom: 1px solid var(--corp-border); border-top: none; } .table-corp tbody td { padding: 14px 20px; border-bottom: 1px solid var(--corp-border-soft); vertical-align: middle; font-size: 14px; color: var(--corp-text); } .table-corp tbody tr:last-child td { border-bottom: none; } .table-corp tbody tr { transition: background 0.1s; } .table-corp tbody tr:hover { background: var(--corp-hover); } .table-corp tfoot td { padding: 10px 20px; border-top: 1px solid var(--corp-border); font-size: 14px; } .employee-name { font-weight: 500; color: var(--corp-text); margin-bottom: 2px; } .employee-email { font-size: 12px; color: var(--corp-light); } .dni-badge { display: inline-block; background: var(--corp-surface-2); color: var(--corp-text); padding: 4px 10px; border-radius: 6px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; font-weight: 500; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 500; } .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .status-active { background: rgba(47, 191, 110, 0.16); color: #4ade80; } .status-active::before { background: #4ade80; } .status-inactive { background: var(--corp-surface-2); color: var(--corp-light); } .status-inactive::before { background: var(--corp-light); } .status-fired { background: rgba(239, 68, 68, 0.16); color: #f87171; } .status-fired::before { background: #f87171; } /* Variantes reutilizables para los badges de estado que antes iban con estilos inline en las plantillas (pendiente/info/revisión/planificación...). */ .badge-status-warn { background: rgba(240, 173, 78, 0.16); color: #f0ad4e; } .badge-status-warn::before { background: #f0ad4e; } .badge-status-info { background: rgba(56, 189, 248, 0.16); color: #38bdf8; } .badge-status-info::before { background: #38bdf8; } .badge-status-purple { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; } .badge-status-purple::before { background: #a5b4fc; } .badge-status-orange { background: rgba(251, 146, 60, 0.16); color: #fb923c; } .badge-status-orange::before { background: #fb923c; } .badge-status-success { background: rgba(47, 191, 110, 0.16); color: #4ade80; } .badge-status-success::before { background: #4ade80; } .badge-status-danger { background: rgba(239, 68, 68, 0.16); color: #f87171; } .badge-status-danger::before { background: #f87171; } /* Botones de acción */ .action-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--corp-border); background: var(--corp-surface); color: var(--corp-light); border-radius: 7px; transition: all 0.15s; cursor: pointer; text-decoration: none; font-size: 14px; } .action-btn:hover { border-color: var(--corp-accent); color: var(--corp-accent-strong); background: var(--corp-surface); } .action-btn.action-warning:hover { border-color: #fb923c; color: #fb923c; } .action-btn.action-success:hover { border-color: #4ade80; color: #4ade80; } .action-btn.action-danger:hover { border-color: #f87171; color: #f87171; } .action-group { display: inline-flex; gap: 4px; } /* Estado vacío */ .empty-state { text-align: center; padding: 52px 20px; color: var(--corp-light); } .empty-state i { font-size: 44px; display: block; margin-bottom: 14px; opacity: 0.4; } /* ============ Responsive: el rail pasa a barra inferior ============ */ /* En móvil el rail se convierte en barra inferior y el estado plegado/desplegado deja de aplicar: por eso todas las reglas llevan también la variante .rail-open. */ @media (max-width: 768px) { .app-body, html.rail-open .app-body { margin-left: 0; padding-bottom: 60px; } .app-canvas { padding: 16px 14px 32px; } .app-rail, html.rail-open .app-rail { top: auto; right: 0; bottom: 0; width: auto; height: 60px; flex-direction: row; justify-content: flex-start; align-items: center; gap: 4px; padding: 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; } .rail-brand, .rail-group, .rail-toggle, .rail-spacer, html.rail-open .rail-brand, html.rail-open .rail-group, html.rail-open .rail-toggle { display: none; } .rail-nav { flex-direction: row; width: auto; overflow: visible; } .rail-item, html.rail-open .rail-item { width: 42px; justify-content: center; padding: 0; } .rail-item.active::before { left: 50%; top: -8px; transform: translateX(-50%); width: 20px; height: 3px; border-radius: 0 0 3px 3px; } .rail-label, html.rail-open .rail-label { display: none; } /* La barra inferior de navegación ocupa los 60px de abajo: la burbuja sube. */ .user-bubble { right: 14px; bottom: 72px; } .user-bubble-btn { width: 44px; height: 44px; font-size: 16px; } .detail-aside { padding-bottom: 0; } .page-context { padding-right: 0; } }