/* Paleta: celeste + amarillo (inspirada en Arcor), blanco de base. Todo vive en variables para que el botón de tema (claro/oscuro) sea solo cambiar [data-theme] en — sin recalcular nada más. */ :root { color-scheme: light; --bg: #F4F8FB; --surface: #FFFFFF; --surface-alt: #E9F5FC; --surface-hover: #F0F7FB; --border: #DCE7EE; --text: #16232B; --text-muted: #5B6B76; --primary: #0EA5E9; --primary-hover: #0B8FCC; --primary-contrast: #FFFFFF; --accent: #FFC229; --accent-hover: #F0AF10; --accent-contrast: #16232B; --danger: #DC2626; --danger-bg: #FCE8E6; --success: #16A34A; --success-bg: #E6F6EC; --shadow: 0 8px 24px rgba(16, 40, 55, .08); --radius: 10px; /* Paleta de grupo para la página de Inicio (2026-09-09) — una identidad de color por módulo, no decorativa: ayuda a reconocer de un vistazo en qué sección de la app estás. */ --grpc-personas: #7C6FE8; --grpc-personas-bg: #EFEBFC; --grpc-seguridad: #4A6FA5; --grpc-seguridad-bg: #E8EFF7; --grpc-seleccion: #0F9E85; --grpc-seleccion-bg: #E1F5F0; --grpc-salud: #D6488B; --grpc-salud-bg: #FBE7F1; --grpc-catalogos: #B45309; --grpc-catalogos-bg: #FFF3D6; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0E1520; --surface: #16202C; --surface-alt: #172A3A; --surface-hover: #1C2A38; --border: #253748; --text: #EAF2F7; --text-muted: #8CA0AF; --primary: #38BDF8; --primary-hover: #62CBFA; --primary-contrast: #052029; --accent: #FFC229; --accent-hover: #FFD35C; --accent-contrast: #16232B; --danger: #F87171; --danger-bg: #3A1E1E; --success: #4ADE80; --success-bg: #163A26; --shadow: 0 8px 24px rgba(0, 0, 0, .35); --grpc-personas: #A79AF5; --grpc-personas-bg: #2C2650; --grpc-seguridad: #8FB0D6; --grpc-seguridad-bg: #1C2B3A; --grpc-seleccion: #4FD9BE; --grpc-seleccion-bg: #10332C; --grpc-salud: #F28BC0; --grpc-salud-bg: #3A1B2C; --grpc-catalogos: #FBBF52; --grpc-catalogos-bg: #3D2E10; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); } a { color: var(--primary); } /* ---- Marca ---- */ .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; text-decoration: none; color: var(--text); } .brand:visited { color: var(--text); } a.brand:hover .brand-title { color: var(--primary); } .brand-mark { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 55%, var(--accent) 55%, var(--accent) 100%); } .brand-title { font-size: 16px; font-weight: 700; letter-spacing: .01em; } /* ---- Layout de app (después del login) ---- */ .app-shell { display: flex; height: 100vh; } .app-nav { width: 250px; flex: 0 0 auto; background: var(--surface); border-right: 1px solid var(--border); padding: 18px 14px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transition: width .15s ease, padding .15s ease; } .app-shell.nav-collapsed .app-nav { width: 0; padding: 18px 0; border-right: none; } .app-shell.nav-collapsed .app-nav > * { opacity: 0; pointer-events: none; } .nav-backdrop { display: none; } .app-nav .sub { display: none; } .app-nav .group { margin-top: 16px; } .app-nav .group h2 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 6px 8px; } .icon { width: 17px; height: 17px; flex: 0 0 auto; } .app-nav a.item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 7px 10px; border-radius: 8px; font-size: 13.5px; } .app-nav a.item .icon { color: var(--text-muted); } .app-nav a.item.active .icon { color: var(--primary-contrast); } .app-nav a.item:hover { background: var(--surface-hover); } .app-nav a.item.active { background: var(--primary); color: var(--primary-contrast); font-weight: 600; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ---- Header superior: tema + usuario, alineados a la derecha ---- */ .app-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--border); background: var(--surface); } .header-left { display: flex; align-items: center; } .header-right { display: flex; align-items: center; gap: 12px; } .nav-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-hover); color: var(--text); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } .nav-toggle:hover { background: var(--surface-alt); } .user-menu-wrap { position: relative; } .user-chip { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; cursor: pointer; padding: 5px 10px 5px 5px; border-radius: 999px; color: var(--text); font-family: inherit; } .user-chip:hover { background: var(--surface-hover); border-color: var(--border); } .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--primary-contrast); font-size: 12px; font-weight: 700; } .user-name { font-size: 13px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chevron { display: inline-flex; color: var(--text-muted); } .chevron .icon { width: 13px; height: 13px; } .user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); min-width: 190px; overflow: hidden; z-index: 20; } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; font-size: 13px; color: var(--text); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none; box-sizing: border-box; } .user-menu-item .icon { color: var(--text-muted); } .user-menu-item.danger .icon { color: var(--danger); } .user-menu-item:hover { background: var(--surface-hover); } .user-menu-item.danger { color: var(--danger); border-top: 1px solid var(--border); } /* ---- "+ Actividad" global en el header (2026-09-09) ---- */ .quick-add-wrap { position: relative; } .quick-add-btn { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-contrast); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .quick-add-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .quick-add-btn .icon { width: 15px; height: 15px; } .quick-add-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 20; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .quick-add-panel[hidden] { display: none; } .quick-add-search { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 13px; font-family: inherit; } .quick-add-results { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; } .quick-add-hint { margin: 6px 2px; font-size: 12.5px; color: var(--text-muted); } .quick-add-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13px; } .quick-add-item:visited { color: var(--text); } .quick-add-item:hover { background: var(--surface-hover); } .quick-add-item-fecha { font-size: 11.5px; color: var(--text-muted); flex: 0 0 auto; } .quick-add-nuevo { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 12px; text-decoration: none; color: var(--primary); font-size: 13px; font-weight: 600; } .quick-add-nuevo:visited { color: var(--primary); } .quick-add-nuevo:hover { background: var(--surface-hover); } .quick-add-nuevo .icon { width: 15px; height: 15px; } @media (max-width: 600px) { .quick-add-btn span { display: none; } .quick-add-panel { position: fixed; top: 60px; right: 12px; left: 12px; width: auto; } } /* ---- Botón de tema ---- */ .theme-toggle { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-hover); color: var(--text); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--surface-alt); } /* ---- Página de Inicio: tarjetas agrupadas, con color por módulo (2026-09-09) ---- */ .home-wrap { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 28px; } .home-group { --grp: var(--primary); --grp-bg: var(--surface-alt); } .home-group.g-personas { --grp: var(--grpc-personas); --grp-bg: var(--grpc-personas-bg); } .home-group.g-seguridad { --grp: var(--grpc-seguridad); --grp-bg: var(--grpc-seguridad-bg); } .home-group.g-seleccion { --grp: var(--grpc-seleccion); --grp-bg: var(--grpc-seleccion-bg); } .home-group.g-salud { --grp: var(--grpc-salud); --grp-bg: var(--grpc-salud-bg); } .home-group.g-catalogos { --grp: var(--grpc-catalogos); --grp-bg: var(--grpc-catalogos-bg); } .home-group h2 { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 10px; } .home-group h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grp); flex: 0 0 auto; } .home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .home-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .1s, box-shadow .15s; } .home-card:visited { color: var(--text); } .home-card:hover { border-color: var(--grp); transform: translateY(-2px); box-shadow: var(--shadow); } .home-card .icon-badge { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--grp-bg); flex: 0 0 auto; } .home-card .icon { width: 19px; height: 19px; color: var(--grp); } .home-card span { font-size: 13px; font-weight: 600; line-height: 1.3; } @media (max-width: 600px) { .home-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* ---- Barra de herramientas de la tabla ---- */ .toolbar { display: flex; gap: 10px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface); } .toolbar h2 { margin: 0; font-size: 18px; flex: 0 0 auto; text-transform: capitalize; } .toolbar input[type=search] { flex: 1; max-width: 320px; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 13px; } .toolbar input[type=search]:focus, .field input:focus, .field select:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .toolbar select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 8px; border-radius: 8px; font-size: 13px; } .toolbar .spacer { flex: 1; } .mobile-sort { display: none; } .btn { background: var(--primary); border: none; color: var(--primary-contrast); padding: 9px 18px; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: 600; transition: background .12s; } .btn:hover { background: var(--primary-hover); } .btn.accent { background: var(--accent); color: var(--accent-contrast); } .btn.accent:hover { background: var(--accent-hover); } .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn.secondary:hover { background: var(--surface-hover); } .btn.danger { background: var(--danger); color: #fff; } /* ---- Selección: tablero de avance de una vacante ---- */ .selection-head { padding: 22px 24px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .selection-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .selection-head-row > :last-child { display: flex; gap: 8px; flex-wrap: wrap; } .selection-head h2 { margin: 2px 0 4px; font-size: 24px; } .selection-head p { margin: 0; color: var(--text-muted); } .selection-eyebrow { color: var(--grpc-seleccion) !important; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .selection-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .selection-summary span { background: var(--surface-alt); border-radius: 999px; padding: 7px 10px; color: var(--text-muted); font-size: 12px; } .selection-summary strong { color: var(--text); } .selection-board { flex: 1; display: flex; gap: 14px; overflow: auto; padding: 20px 24px 32px; align-items: flex-start; } .selection-column { width: 265px; min-width: 265px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 10px; } .selection-column-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; } .selection-column-head h3 { margin: 0; font-size: 13px; } .selection-column-head span { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; } .selection-cards { display: grid; gap: 9px; min-height: 60px; } .selection-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 7px rgba(16,40,55,.05); } .selection-card-main { display: grid; gap: 5px; width: 100%; padding: 12px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-family: inherit; } .selection-card-main:hover { background: var(--surface-hover); } .selection-card-main strong { font-size: 13px; } .selection-card-main span { color: var(--text-muted); font-size: 11.5px; } .selection-card-main .selection-medical-status { color: var(--grpc-salud); font-weight: 600; } .selection-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 10px 10px; } .selection-card-actions .btn { padding: 6px 8px; font-size: 11.5px; } .selection-link-danger { border: 0; background: transparent; color: var(--danger); padding: 5px 0; font-size: 11px; cursor: pointer; font-family: inherit; } .selection-empty { margin: 8px 4px; color: var(--text-muted); font-size: 12px; text-align: center; } @media (max-width: 700px) { .selection-head-row { align-items: flex-start; flex-direction: column; } .selection-head-row > :last-child { width: 100%; } .selection-board { padding-left: 14px; padding-right: 14px; } } /* ---- Tabla ---- */ .table-wrap { flex: 1; overflow: auto; padding: 20px 24px; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } thead th { position: sticky; top: 0; background: var(--surface-alt); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 700; cursor: pointer; white-space: nowrap; user-select: none; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } thead th:hover { color: var(--primary); } thead th .arrow { font-size: 10px; margin-left: 4px; opacity: .8; color: var(--primary); } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); max-width: 260px; } .cell-value { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } tbody tr { cursor: pointer; } tbody tr:hover td { background: var(--surface-hover); } tbody tr:last-child td { border-bottom: none; } .avatar-cell { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .avatar-cell-placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); color: var(--text-muted); } .avatar-cell-placeholder .icon { width: 16px; height: 16px; } .empty-state { padding: 48px 20px; text-align: center; color: var(--text-muted); } .empty-state .icon { font-size: 28px; display: block; margin-bottom: 10px; } .pagination { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); background: var(--surface); } .pagination button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; } .pagination button:disabled { opacity: .4; cursor: default; } .pagination button:not(:disabled):hover { border-color: var(--primary); color: var(--primary); } /* ---- Drawer (formulario lateral) ---- */ .drawer-overlay { position: fixed; inset: 0; background: rgba(16, 30, 40, .45); backdrop-filter: blur(1px); display: none; z-index: 10; } .drawer-overlay.open { display: block; } .drawer { position: fixed; top: 0; right: -480px; width: 480px; max-width: 92vw; height: 100vh; background: var(--surface); border-left: 1px solid var(--border); z-index: 11; transition: right .2s ease; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(16,40,55,.15); } .drawer.open { right: 0; } .drawer-header { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--surface-alt); } .drawer-header h3 { margin: 0; font-size: 15px; text-transform: capitalize; } .drawer-header button { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; } .drawer-header button:hover { color: var(--danger); } .drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; } .drawer-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } .drawer-actions { margin-right: auto; display: flex; gap: 8px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; font-weight: 600; } .field label .req { color: var(--danger); } .field input[type=text], .field input[type=date], .field input[type=email], .field input[type=number], .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: 8px; font-size: 13px; font-family: inherit; } .field .readonly { font-size: 13px; color: var(--text-muted); padding: 9px 0; } .field input[type=file] { font-size: 12.5px; color: var(--text-muted); } .field-error { color: var(--danger); font-size: 12px; margin-top: 4px; } /* ---- Combo con buscador (selects de FK) ---- */ .combo { position: relative; } .combo-input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: 8px; font-size: 13px; font-family: inherit; } .combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 5; } .combo-item { padding: 9px 12px; font-size: 13px; cursor: pointer; } .combo-item:hover { background: var(--surface-hover); } .combo-item-clear { color: var(--text-muted); border-bottom: 1px solid var(--border); } .combo-item-create { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); } .combo-empty { color: var(--text-muted); cursor: default; } .combo-empty:hover { background: none; } /* ---- Avatar clickeable (subir foto) ---- */ .avatar-upload-field { display: flex; justify-content: center; margin-bottom: 20px; } .avatar-upload-btn { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 2px dashed var(--border); background: var(--surface-alt); color: var(--text-muted); cursor: pointer; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .avatar-upload-btn .icon { width: 32px; height: 32px; } .avatar-upload-btn img { width: 100%; height: 100%; object-fit: cover; } .avatar-upload-btn:hover { border-color: var(--primary); color: var(--primary); } .avatar-upload-btn::after { content: "Cambiar foto"; position: absolute; inset: auto 0 0 0; padding: 6px 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: rgba(16, 30, 40, .65); color: #fff; opacity: 0; transition: opacity .12s; } .avatar-upload-btn:hover::after { opacity: 1; } .avatar-upload-btn.uploading { opacity: .6; pointer-events: none; } .avatar-upload-btn.uploading::after { content: "Subiendo…"; opacity: 1; } /* Vista de solo lectura (ver drawer.js, renderAvatarReadOnly): mismo círculo, sin la interacción de "tocar para subir". */ .avatar-upload-btn--readonly { cursor: default; border-style: solid; } .avatar-upload-btn--readonly:hover { border-color: var(--border); color: var(--text-muted); } .avatar-upload-btn--readonly::after { display: none; } /* ---- Switch (para booleanos) ---- */ .switch-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .switch-fila label:first-child { font-size: 12px; color: var(--text-muted); font-weight: 600; margin: 0; } .switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background .15s; } .switch .track::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch input:checked + .track { background: var(--primary); } .switch input:checked + .track::before { transform: translateX(17px); } /* ---- Banner de estado ---- */ .banner { padding: 11px 24px; font-size: 12.5px; font-weight: 600; } .banner.error { background: var(--danger-bg); color: var(--danger); } .banner.ok { background: var(--success-bg); color: var(--success); } /* ---- Login ---- */ .login-shell { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--primary) 0%, var(--primary) 42%, var(--bg) 42%); } :root[data-theme="dark"] .login-shell { background: linear-gradient(160deg, #0B3A52 0%, #0B3A52 42%, var(--bg) 42%); } .login-card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 30px; box-shadow: var(--shadow); } .login-card .brand { margin-bottom: 6px; } .login-card .brand-mark { width: 38px; height: 38px; border-radius: 10px; } .login-card .brand-title { font-size: 20px; } .login-card p.hint { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 22px; line-height: 1.5; } .login-card input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; font-family: ui-monospace, monospace; } .login-card button { width: 100%; } .login-card .note { margin-top: 16px; font-size: 11px; color: var(--text-muted); line-height: 1.6; } .login-card summary { cursor: pointer; font-size: 12px; color: var(--text-muted); } .totp-secret { font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: 1px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 14px; word-break: break-all; } .recovery-codes { font-family: ui-monospace, monospace; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 14px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .login-card .link-button { background: none; border: none; color: var(--accent-hover); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; width: auto; margin-top: 4px; } /* ---- Responsivo ---- */ /* Pantallas chicas: el menú deja de empujar el contenido y pasa a superponerse (como el drawer), con un fondo oscuro atrás que lo cierra al tocarlo. Por defecto arranca oculto (ver layout.js: initLayout detecta el ancho). */ @media (max-width: 860px) { .app-nav { position: fixed; top: 0; left: 0; height: 100vh; z-index: 15; width: 260px; box-shadow: var(--shadow); transform: translateX(-100%); transition: transform .2s ease; } .app-shell.nav-collapsed .app-nav { width: 260px; padding: 18px 14px; transform: translateX(-100%); } .app-shell.nav-collapsed .app-nav > * { opacity: 1; pointer-events: auto; } .app-shell:not(.nav-collapsed) .app-nav { transform: translateX(0); } .nav-backdrop { display: none; } .app-shell:not(.nav-collapsed) .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(16, 30, 40, .45); z-index: 14; } .toolbar { flex-wrap: wrap; row-gap: 10px; } .toolbar input[type=search] { max-width: none; order: 3; flex: 1 1 100%; } .mobile-sort { display: block; order: 4; flex: 1 1 100%; } .user-name { display: none; } /* Tabla → tarjetas: mismo , sin encabezado; cada es una tarjeta y cada
muestra su etiqueta (data-label, seteado en resource.js) a la izquierda y el valor a la derecha. */ .table-wrap { padding: 14px; } table { box-shadow: none; background: none; border-spacing: 0 12px; border-collapse: separate; } thead { display: none; } table, tbody, tr { display: block; width: 100%; } tbody tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2px 16px; margin-bottom: 12px; } tbody tr:hover { border-color: var(--primary); } tbody tr:hover td { background: none; } td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); max-width: none; text-align: right; } td:last-child { border-bottom: none; } td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .cell-value { min-width: 0; flex: 1; text-align: right; } .empty-state { padding: 30px 4px; } td:has(.empty-state) { display: block; padding: 0; border-bottom: none; } td:has(.empty-state)::before { content: none; } } @media (max-width: 480px) { .drawer { width: 100%; max-width: 100%; } .toolbar h2 { font-size: 15px; } } /* Ficha de persona (persona.html): encabezado con foto/datos + secciones de domicilios/teléfonos/empleos, cada una con su propia tabla de solo lectura (editar/agregar reusa las pantallas genéricas de cada recurso). */ .ficha-wrap { flex: 1; overflow: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 22px; } /* Volver a la pantalla anterior — pedido del usuario, 2026-09-08: "tiene que ser identificable medianamente rápido... poder ver el color, distinguirlo" (probado en mobile/tablet, no solo mouse) — antes era texto gris chico, ahora un chip con color y borde, fácil de detectar y de tocar con el dedo. Compartido por TODAS las fichas (persona, empleado, postulante, campaña, vacante, caso, ausencia, atención). */ .ficha-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; text-decoration: none; transition: background .12s, border-color .12s; } .ficha-back:hover { background: var(--surface-hover); border-color: var(--primary); } .ficha-head { display: flex; flex-direction: column; gap: 14px; } .ficha-head-row { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; } .ficha-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .ficha-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); color: var(--text-muted); } .ficha-avatar-placeholder .icon { width: 28px; height: 28px; } .ficha-head-info { flex: 1; min-width: 0; } .ficha-head-info h2 { margin: 0 0 4px; font-size: 19px; } .ficha-head-sub { margin: 0; font-size: 12.5px; color: var(--text-muted); } /* Indicadores del caso (Atención de salud/Cerrado/Seguimiento/Recordar), siempre visibles como chips — antes solo texto suelto e inconsistente (2026-09-09: "tengo que ver claro esos indicadores del caso"). */ .ficha-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .ficha-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); } .ficha-badge.on { background: var(--success-bg); color: var(--success); border-color: transparent; } .ficha-badge.off { background: var(--surface-alt); color: var(--text-muted); } .ficha-head-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .ficha-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ficha-section-head h3 { margin: 0; font-size: 14px; } .btn.sm { padding: 6px 12px; font-size: 12.5px; } .ficha-table-wrap { padding: 0; } .ficha-table-wrap table { box-shadow: none; border: 1px solid var(--border); } /* Línea de tiempo de un caso (actividad-origen.html, 2026-09-08): atenciones/ ausencias/siniestros intercalados por fecha en una sola vista — cada tipo se distingue por el color del borde izquierdo, clickear abre el drawer real de ese tipo (la tabla de origen sigue separada, esto es solo la presentación). */ .ficha-timeline-toolbar { display: flex; gap: 8px; margin-bottom: 14px; } .ficha-timeline-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .ficha-timeline-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; } .ficha-timeline-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .ficha-timeline-buscador, .ficha-timeline-filtro input[type=date] { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; font-size: 12.5px; background: var(--surface); color: var(--text); } .ficha-timeline-buscador { flex: 1; min-width: 140px; } .ficha-timeline { display: flex; flex-direction: column; gap: 10px; } .ficha-timeline-item { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; cursor: pointer; } .ficha-timeline-item:hover { background: var(--surface-hover); } .ficha-timeline-item[data-tipo="ausencia"] { border-left-color: var(--accent); } .ficha-timeline-item[data-tipo="siniestro"] { border-left-color: var(--danger); } .ficha-timeline-item[data-tipo="control"] { border-left-color: var(--success); } .ficha-timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .ficha-timeline-tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--primary); } .ficha-timeline-item[data-tipo="ausencia"] .ficha-timeline-tipo { color: var(--accent-hover); } .ficha-timeline-item[data-tipo="siniestro"] .ficha-timeline-tipo { color: var(--danger); } .ficha-timeline-item[data-tipo="control"] .ficha-timeline-tipo { color: var(--success); } .ficha-timeline-fecha { font-size: 12px; color: var(--text-muted); } .ficha-timeline-resumen { font-size: 13px; } /* Comentarios de una ausencia (ausencia.html, 2026-09-08) — feed simple, más chico y sin color por tipo (a diferencia de .ficha-timeline-item, acá todo es del mismo tipo). */ .ficha-comentarios { display: flex; flex-direction: column; gap: 8px; } .ficha-comentario { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; } .ficha-comentario:hover { background: var(--surface-hover); } .ficha-comentario-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .ficha-comentario-autor { font-size: 12px; font-weight: 600; color: var(--text-muted); } .ficha-comentario-fecha { font-size: 12px; color: var(--text-muted); } .ficha-comentario-texto { font-size: 13px; white-space: pre-wrap; } /* Detalle campo/valor en una sola línea (atencion.html, 2026-09-08: pedido del usuario tras comparar contra AppSheet — "los inputs están al lado de los label, no por encima") — a diferencia de .ficha-kv (grilla de varios campos lado a lado, cada uno con su label ARRIBA), acá cada fila es un solo campo con el label a la izquierda y el valor a la derecha, como la vista de detalle real de AppSheet. */ .ficha-detalle { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 20px; } .ficha-detalle-fila { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); } .ficha-detalle-fila:last-child { border-bottom: none; } .ficha-detalle-fila label { flex: 0 0 200px; font-size: 12px; color: var(--text-muted); font-weight: 600; } .ficha-detalle-fila .valor { flex: 1; font-size: 13px; min-width: 0; } @media (max-width: 600px) { .ficha-detalle-fila { flex-direction: column; gap: 2px; } .ficha-detalle-fila label { flex-basis: auto; } } /* Una acción tipo "ir a otra ficha" (ej. "Ver caso") como botón real, no link de texto — pensado para mobile además de escritorio (pedido del usuario, 2026-09-08: "tiene que haber algo como un botón que se vea bien... lo podemos utilizar tanto en aplicaciones móviles como en la computadora"), suficientemente grande para tocar con el dedo. */ .ficha-detalle-fila .valor a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-top: 2px; } .ficha-vinculos-detalle { margin-top: 14px; } .ficha-vinculos-detalle summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--primary); margin-bottom: 10px; } /* Grilla de campo/valor para secciones de una ficha que muestran datos propios del registro (no una tabla relacionada) — ej. postulante.html: Selección/Entrevista/Decisión. Mismo look que .ficha-head-row (tarjeta), reusa la tipografía de .field/.field label/.field .readonly del drawer. */ .ficha-kv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 20px; } .ficha-kv .field { margin-bottom: 14px; } .ficha-kv .readonly.clickable { color: var(--primary); cursor: pointer; } .ficha-kv .readonly.clickable:hover { text-decoration: underline; } /* Genograma (árbol de relaciones familiares) en persona.html — puerto del genograma canónico del sistema viejo: filas por generación, líneas de pareja/descendencia dibujadas en SVG a partir de la posición real de cada nodo en pantalla (ver renderGenograma en persona.js). */ .genograma { overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .genograma-lienzo { position: relative; min-width: 760px; min-height: 200px; padding: 10px 20px 24px; } .genograma-conectores { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; } .genograma-generacion { position: relative; z-index: 1; margin: 0 0 40px; } .genograma-generacion:last-child { margin-bottom: 0; } .genograma-titulo { margin: 0 0 10px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; } .genograma-fila { display: flex; align-items: flex-start; justify-content: center; gap: 16px; width: max-content; min-width: 100%; padding: 0 20px; } .genograma-nodo { position: relative; z-index: 2; width: 108px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); text-align: center; text-decoration: none; cursor: pointer; background: none; border: none; font: inherit; } .genograma-nodo:hover { transform: translateY(-2px); } .genograma-nodo__simbolo { width: 60px; height: 60px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--primary); background: var(--bg); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); transition: box-shadow .15s, border-color .15s; } .genograma-nodo--hombre .genograma-nodo__simbolo { border-radius: 4px; } .genograma-nodo--mujer .genograma-nodo__simbolo { border-radius: 50%; border-color: #d0679f; } .genograma-nodo--sinsexo .genograma-nodo__simbolo { border-radius: 50% 4px; border-color: var(--text-muted); } .genograma-nodo--seleccionado .genograma-nodo__simbolo { width: 72px; height: 72px; border-width: 4px; box-shadow: 0 0 0 3px var(--surface-alt), 0 0 0 4px var(--primary); } .genograma-nodo:hover .genograma-nodo__simbolo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); } .genograma-nodo__foto { width: 100%; height: 100%; object-fit: cover; } .genograma-nodo__nombre { font-size: 11.5px; font-weight: 700; line-height: 1.2; } .genograma-nodo__vinculo { color: var(--text-muted); font-size: 10.5px; } .genograma-nodo__actual { color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .genograma-nodo__estado { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; } .genograma-nodo__estado--actual { background: var(--success-bg); color: var(--success); } .genograma-nodo__estado--anterior { background: var(--surface-alt); color: var(--text-muted); } .genograma-leyenda { margin: 16px 0 0; color: var(--text-muted); font-size: 11.5px; text-align: center; } .genograma-aviso { margin: 0 0 12px; color: var(--danger); font-size: 12.5px; text-align: center; } @media (max-width: 767px) { .genograma { margin-inline: -8px; border-radius: 0; } } /* Pestañas de la ficha de persona (Contacto/Situación laboral/Familia). */ .ficha-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); } .ficha-tab-btn { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; } .ficha-tab-btn:hover { color: var(--text); } .ficha-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .ficha-tab-panel { display: flex; flex-direction: column; gap: 22px; } .ficha-tab-panel[hidden] { display: none; } /* Confirmaciones (SweetAlert2, ver confirm.js) — pisa el estilo de fábrica para que combine con el resto de sigeo-next (misma superficie/tema claro-oscuro, mismos botones .btn). "!important" porque SweetAlert2 inyecta su propio