/* Sistema visual nuevo (rediseño flat de Woker). Es la única capa de sistema: los legacy
modern-ui.css y modern-forms.css se borraron al migrar la última pantalla que los cargaba. */
/* Tokens de superficie y texto (dark-mode.css los reasigna bajo html[data-theme="dark"]) */
:root {
/* Fallback de marca (COLOR_MARCA_DEFAULT en utils/utils_colores.py). En todo request normal
base.html pisa estos valores con la paleta de la organización. Este default es para el único
render sin contexto que hace Django: la 500 vía template.render(), donde no hay
coloresMarca — base.html omite su :root en ese caso justamente para que aplique. */
--woker-violet: #7551E4;
--woker-violet-rgb: 117, 81, 228;
--woker-violet-hover: #6546c4;
--woker-violet-soft: #e9e3fb;
--woker-violet-soft-border: #cdc0f5;
--woker-violet-tint: #f7f5fd;
--woker-page-bg: #fbfbff; /* fondo de TODA la pantalla (lo pinta solo el body) */
--woker-surface: #fff; /* cards */
--woker-surface-2: #fbfbff; /* cabeceras de tabla, hovers, franjas */
--woker-ink: #18181b; /* texto principal */
--woker-muted: #52525b; /* texto secundario (labels, celdas) */
--woker-subtle: #a1a1aa; /* texto terciario (hints, timestamps) */
/* Terciario cuando es TEXTO de lectura, no un adorno. --woker-subtle está calibrado para
hints y timestamps y como texto corrido no llega al 4,5:1 de WCAG AA (2,48:1 sobre el
fondo de página). Este token es el mismo gris un paso más oscuro: 4,68:1 sobre el fondo
y 4,83:1 sobre una card, sin igualarse a --woker-muted (7,49:1), que es el de los labels
— el subtítulo tiene que seguir leyéndose por debajo del título. Se reasigna en
dark-mode.css. Mismo criterio que --woker-ok-fg / --woker-danger-fg. */
--woker-subtle-texto: #71717a;
--woker-border: #e4e4e7; /* bordes de cards, filas y separadores */
/* Borde de un CONTROL (input, select, select2, input file). Va un paso por encima de
--woker-border porque el rol es otro: una línea divisoria puede insinuarse, pero el
límite de un campo tiene que leerse — con el token de card los campos casi desaparecían
contra el blanco de un modal (1,18:1 con el #ececf1 que termina aplicando
sidebar-moderna.css; 1,27:1 con el #e4e4e7 de acá). Token aparte y no un --woker-border
más oscuro porque ese valor lo consumen ~190 usos estructurales (cards, tablas,
timelines, sidebar) que no tienen por qué pesar más. */
--woker-border-control: #e0e0e6;
--woker-border-fuerte: #d1d5db; /* borde en hover de un control */
--woker-radius: 12px; /* radio de cards */
--woker-radius-control: 6px; /* radio de inputs y botones */
--woker-card-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
/* Motion — ease-out sutil (out-quint); duraciones cortas, estado no decoración */
--woker-ease: cubic-bezier(.22, 1, .36, 1);
--woker-transicion: all .2s var(--woker-ease);
--woker-dur-feedback: .12s; /* press / color: casi instantáneo */
/* Color semántico — separado del color de marca; un valor por rol. El ámbar va sólido a propósito */
--woker-ok: #16a34a; --woker-ok-bg: rgba(22, 163, 74, .1);
--woker-warn: #b45309; --woker-warn-bg: #fef6d9;
/* El ámbar del rol está oscurecido para que un texto llegue a AA sobre fondo claro; como
relleno sólido (una barra, un punto de estado) queda barroso. Para eso va este, que es el
mismo ámbar sin la corrección de contraste. Nunca para texto. */
--woker-warn-solido: #f59e0b;
--woker-danger: #dc2626; --woker-danger-bg: rgba(220, 38, 38, .1);
/* Canales del rojo, para cuando hace falta el rol a otra opacidad (mismo criterio
que --woker-violet-rgb): rgba(var(--woker-danger-rgb), .55). */
--woker-danger-rgb: 220, 38, 38;
/* Tinta para TEXTO CORRIDO sobre el tinte del rol (ej. el mensaje de un .alert). El rol pleno
está calibrado para tags y chips; como párrafo sobre su propio -bg no llega a AA: el verde
da 2,96:1 y el rojo 4,13:1. Solo se definen estos dos porque warn (4,64:1) e info (6,74:1)
ya pasan con el rol pleno. */
--woker-ok-fg: #0f6b32; --woker-danger-fg: #b3261e;
--woker-info: #4338ca; --woker-info-bg: #e6edff;
--woker-neutral: #52525b; --woker-neutral-bg: #f1f1f4; /* estado inactivo / cerrado */
}
/* Layout shell — común a toda pantalla del sistema nuevo; el fondo lo pinta solo el body */
body {
background: var(--woker-page-bg);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Columna flex de min 100vh: ancla el footer abajo aunque el contenido sea corto */
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.content-wrapper {
flex: 1 0 auto;
min-height: 0 !important;
background: transparent;
}
.main-sidebar,
.main-sidebar .brand-link,
.main-header.navbar { background-color: transparent !important; }
/* position:relative como contexto de posicionamiento local del contenido */
.main-content {
padding: 1.5rem 1.5rem;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
position: relative;
}
@media (max-width: 575.98px) {
.main-content { padding: 1rem 1rem; }
}
/* Paginación (compartida — paginacion_moderna.html) */
.custom-pagination-wrapper {
padding: 0.5rem 1.5rem;
background: var(--woker-surface);
border-top: 1px solid var(--woker-border);
}
/* Sin margen propio: la fila de botones queda centrada en el alto del wrapper (su padding
es el único aire). El aire hacia la línea de "Mostrando X - Y" lo pone .custom-pagination-info,
que es quien lo necesita — así el paginador solo, sin info, nunca queda arriba del centro. */
.custom-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
margin-bottom: 0;
}
.custom-pagination .page-btn {
border: none;
background: none;
color: var(--woker-muted);
padding: 0.375rem;
border-radius: 4px;
font-size: 0.875rem;
transition: var(--woker-transicion);
cursor: pointer;
min-width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
text-decoration: none;
}
.custom-pagination .page-btn:hover:not(.disabled):not(.active) {
background-color: var(--woker-surface-2);
color: var(--woker-violet);
text-decoration: none;
}
/* Editor Summernote — tratamiento base, colgado de .note-editor-wrapper (el hook que emite
partials/editor_summernote.html). Sin esto una pantalla que use el partial se queda con el
Summernote crudo de Bootstrap. tickets.css tiene su propia copia scopeada a
.ticket-datos-card, más específica, así que sigue ganando ahí. */
.note-editor-wrapper .note-editor.note-frame {
border: 1px solid var(--woker-border);
/* Radio de card y no de control: el editor es un bloque con barra propia, del tamaño
de la caja de adjuntos. Es el valor que ya usaba tickets. */
border-radius: var(--woker-radius);
overflow: hidden;
margin-bottom: 0;
}
.note-editor-wrapper .note-editor.note-frame.focus,
.note-editor-wrapper .note-editor.note-frame:focus-within {
border-color: var(--woker-violet);
box-shadow: 0 0 0 3px rgba(var(--woker-violet-rgb), .18);
}
.note-editor-wrapper .note-editor .note-toolbar {
background: var(--woker-surface-2);
border-bottom: 1px solid var(--woker-border);
padding: 6px 8px;
gap: 2px;
}
.note-editor-wrapper .note-editor .note-btn-group {
margin-right: 6px;
}
.note-editor-wrapper .note-editor .note-btn {
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
color: var(--woker-muted);
padding: 5px 9px;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.note-editor-wrapper .note-editor .note-btn:hover,
.note-editor-wrapper .note-editor .note-btn:focus,
.note-editor-wrapper .note-editor .note-btn.active,
.note-editor-wrapper .note-editor .note-btn:active {
background: var(--woker-violet-soft);
color: var(--woker-violet);
border-color: transparent;
box-shadow: none;
}
.note-editor-wrapper .note-editor .note-editable {
padding: 14px 16px;
font-size: .95rem;
line-height: 1.6;
color: var(--woker-ink);
min-height: 200px;
}
.note-editor-wrapper .note-editor .note-placeholder {
padding: 14px 16px;
color: var(--woker-subtle);
}
.note-editor-wrapper .note-editor .note-statusbar {
background: var(--woker-surface-2);
border-top: 1px solid var(--woker-border);
}
.note-editor-wrapper .note-editor .note-statusbar .note-resizebar {
padding-top: 1px;
}
/* Editor Summernote en modo oscuro. Va colgado de .note-editor-wrapper — el hook que
emite partials/editor_summernote.html — porque el editor lo comparten tickets y
noticias: scopearlo a un módulo deja al otro con la toolbar clara sobre fondo oscuro.
(tickets.css tiene el suyo scopeado a .ticket-datos-card, de antes de este partial.) */
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-toolbar,
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-statusbar {
background: var(--woker-surface-2);
border-color: var(--woker-border);
}
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-btn {
background: transparent;
border-color: transparent;
color: var(--woker-muted);
}
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-btn:hover,
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-btn:focus,
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-btn.active {
background: rgba(var(--woker-violet-rgb), 0.16);
color: var(--woker-violet);
}
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-editable {
background: var(--woker-surface);
color: var(--woker-ink);
}
/* Lo que se PEGA en el editor trae colores inline pensados para fondo claro (un
`color: rgb(0, 0, 0)` copiado de una web queda negro sobre negro y el campo se lee
vacío). En oscuro manda el token, igual que en la vista de lectura de la noticia
(.vn-cuerpo en noticias.css): así el editor muestra lo mismo que va a ver el lector. */
html[data-theme="dark"] .note-editor-wrapper .note-editor .note-editable [style*="color"] {
color: var(--woker-ink) !important;
}
/* Summernote inyecta por JS el link de su diálogo de ayuda (
adentro de una tabla o como bloque suelto adentro de una card
(el "Sin activaciones pendientes" del perfil), así que el centrado y el gris viven en la
clase base; la regla del
sólo pisa el alto y el padding fijos de .tabla-moderna. */
.tabla-vacia { text-align:center; color:var(--woker-subtle); }
.tabla-moderna tbody td.tabla-vacia { height:auto; padding:1.25rem var(--tabla-pad-x); color:var(--woker-subtle); }
/* Una tabla editable (inputs en las celdas) no marca hover: no hay nada que resaltar */
.tabla-embebida .tabla-moderna tbody tr:hover { background:transparent; }
/* Variantes de tabla — se combinan con .tabla-moderna en el `class` del
*/
.tabla-moderna.tabla-compacta { --tabla-pad-x:11px; --tabla-pad-borde:16px; } /* muchas columnas */
/* Encabezado largo en dos renglones: sin esto el nowrap del th fija el ancho mínimo de
toda la columna y empuja el scroll horizontal de la tabla. Entra en el alto del thead. */
.tabla-moderna thead th.th-multilinea { white-space:normal; line-height:1.25; }
.tabla-moderna.tabla-centrada thead th,
.tabla-moderna.tabla-centrada tbody td { text-align:center; }
/* Footer del paginador dentro de la card de tabla */
.tabla-footer { padding:0; }
.tabla-footer .custom-pagination-wrapper { padding:.5rem 1.1rem; border-top:1px solid var(--woker-border); background:transparent; }
.tabla-footer .custom-pagination { gap:.25rem; }
/* Celda usuario / avatar (para listados) */
.user-cell { display:flex; align-items:center; gap:12px; }
.user-avatar { width:36px; height:36px; box-sizing:border-box; line-height:1; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; background:var(--woker-violet-soft); color:var(--woker-violet); text-transform:uppercase; flex-shrink:0; }
/* Link de tabla al detalle del objeto (nombre, id, número de póliza...). ÚNICA clase para esto en
todo el sistema: color de marca + 600, sin subrayado. No crear variantes por módulo. */
.link-detalle { color:var(--woker-violet); font-weight:600; font-size:14px; text-decoration:none; }
.link-detalle:hover { color:var(--woker-violet-hover); text-decoration:none; }
/* Link de texto corrido dentro del contenido (una referencia en un párrafo, un mailto en una
celda). Sin esta regla se queda con el #007bff de Bootstrap: el único azul que sobrevive a la
migración, porque no hay componente que lo cubra. Acotada a `a:not([class])` a propósito —
todo lo que ES un componente (botón, tab, .link-detalle, .link-sin-color, paginador) lleva
clase y queda afuera. */
.main-content a:not([class]) { color:var(--woker-violet); }
.main-content a:not([class]):hover { color:var(--woker-violet-hover); }
/* Link que envuelve contenido rico (nombre + subtítulo) sin look de link — el área entera
es clickeable pero el texto no se pinta de marca. Viene de modern-ui.css (legacy). */
/* El :hover también: sin esta línea Bootstrap le mete su #0056b3 al pasar el mouse y
el link vuelve a ser azul justo cuando se lo mira. La afordancia va por subrayado. */
.link-sin-color,
.link-sin-color:hover,
.link-sin-color:focus { color: inherit; }
.link-sin-color:hover { text-decoration: underline; }
/* Acciones por fila (ver/editar/eliminar): íconos sin caja, sin relleno permanente.
Compartido por varios módulos (gestor/grupos, usuarios/contactos) — por eso vive acá
y no en el CSS de una pantalla puntual. */
.tabla-acciones { display: inline-flex; align-items: center; gap: .25rem; }
.btn-fila-icono {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
background: transparent;
border-radius: 8px;
color: var(--woker-muted);
cursor: pointer;
transition: var(--woker-transicion);
}
.btn-fila-icono:hover { background: var(--woker-surface-2); color: var(--woker-violet); }
.btn-fila-icono-danger:hover { background: var(--woker-danger-bg); color: var(--woker-danger); }
.btn-fila-icono:disabled { opacity: .35; cursor: not-allowed; }
.btn-fila-icono:disabled:hover { background: transparent; color: var(--woker-muted); }
/* Chips / tags de estado — el color sale de los tokens semánticos, nunca de un hex */
.tipo-chip { display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:500; background:var(--woker-surface); color:var(--woker-muted); border:1px solid var(--woker-border); }
/* Renovación / refacturación: con los tres chips iguales hay que leer la palabra para saber
cuál es cuál. La renovación es el caso accionable y la refacturación la rutina, así que
cada una lleva su tinta. El teal no sale de un token porque no hay rol semántico para
"accionable", y los que hay (ok/danger/warn) ya se los llevan la columna de estado y el
porcentaje de aumento: repetirlos acá dejaba dos columnas del mismo color y ninguna se leía.
"Sin definir" se queda con el .tipo-chip neutro: es un dato que falta, no un tercer caso.
Compartido por listado_vencimientos y listado_indice_aumentos. */
.tipo-chip.tipo-chip-renovacion { color:#0f766e; background:#ccfbf1; border-color:transparent; }
.tipo-chip.tipo-chip-refacturacion { color:var(--woker-info); background:var(--woker-info-bg); border-color:transparent; }
.estado-tag { display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:500; padding:3px 10px; border-radius:999px; }
.estado-tag::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.estado-alta { color:var(--woker-ok); background:var(--woker-ok-bg); }
.estado-baja { color:var(--woker-danger); background:var(--woker-danger-bg); }
.estado-visualizacion { color:var(--woker-warn); background:var(--woker-warn-bg); }
/* Form controls, labels y botones de formulario (versión sistema nuevo de modern-forms.css legacy) */
.form-control,
select.form-control {
background-color: var(--woker-surface);
border: 1px solid var(--woker-border-control);
border-radius: var(--woker-radius-control);
color: var(--woker-muted);
font-size: .875rem;
line-height: 1.5;
padding: .5rem .75rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
box-shadow: none;
}
.form-control:focus,
select.form-control:focus {
background-color: var(--woker-surface);
border-color: var(--woker-violet);
outline: 0;
box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .15);
}
.form-control:hover:not(:focus),
select.form-control:hover:not(:focus) { border-color: var(--woker-border-fuerte); }
/* Un input number centrado no queda centrado: el navegador reserva a la derecha el ancho de las
flechitas —aunque solo se dibujen al pasar el mouse— y el texto se corre a la izquierda. Donde
se pidió centrar (celdas de tabla como el número de cuota) el spinner se saca: centrar y spinner
no conviven. Los number sin .text-center lo conservan. */
input[type="number"].text-center {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"].text-center::-webkit-outer-spin-button,
input[type="number"].text-center::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Un campo readonly NO es un campo apagado: acá son links para copiar, snippets de embed y
disparadores de datepicker — contenido que hay que poder leer y seleccionar. Bootstrap los
pinta con su gris fijo (#e9ecef), fuera del sistema de tokens y sin variante oscura, y se
leen como deshabilitados. Se los deja en la superficie de un control habilitado: lo que
comunica que no se escribe es el cursor y el contexto, no un fondo gris. La regla va ANTES
de :disabled —misma especificidad (0,2,0)— para que un campo readonly Y deshabilitado siga
saliendo apagado. */
.form-control[readonly] {
background-color: var(--woker-surface);
border-color: var(--woker-border-control);
color: var(--woker-muted);
opacity: 1;
}
/* El deshabilitado se queda en el borde de card, un paso POR DEBAJO del control habilitado:
si los dos usaran --woker-border-control, un campo apagado pesaría lo mismo que uno en el
que se puede escribir. */
.form-control:disabled,
select.form-control:disabled {
background-color: var(--woker-surface-2);
border-color: var(--woker-border);
color: var(--woker-muted);
opacity: 1;
}
.form-control::placeholder,
select.form-control option:first-child { color: var(--woker-subtle); opacity: 1; }
/* Feedback de validación del panel de filtros (filtros-card.js: campos [required]
vacíos y validaciones propias de una pantalla, ej. un rango de fechas > N días).
Bootstrap trae `.is-invalid`/`.invalid-feedback` en un rojo fijo (#dc3545); se
tokeniza acá para que salga en los dos temas sin regla aparte en dark-mode.css.
Se saca el ícono de fondo de Bootstrap: no encaja con los form controls flat
del sistema. */
.form-control.is-invalid,
select.form-control.is-invalid {
background-image: none;
padding-right: .75rem;
border-color: var(--woker-danger);
}
.form-control.is-invalid:focus,
select.form-control.is-invalid:focus {
border-color: var(--woker-danger);
box-shadow: 0 0 0 .2rem var(--woker-danger-bg);
}
.select2-container--default.is-invalid .select2-selection--single,
.select2-container--default.is-invalid .select2-selection--multiple {
border-color: var(--woker-danger) !important;
}
.invalid-feedback {
display: block;
color: var(--woker-danger);
font-size: .78rem;
margin-top: .35rem;
}
/* Label de un checkbox dentro de un .input-group (emisor, cotizador, credenciales): el
patrón la marca `.form-control` para que quede a la misma altura y con la misma caja que
los campos de al lado. La caja se conserva; lo que se saca es el resaltado de hover/foco,
que es feedback de "podés escribir acá" y una label no es editable. Vivía scopeado a
`.emitir-stepper`; es de la capa sistema porque el patrón se repite en los tres módulos. */
label.form-control {
display: flex;
align-items: center;
margin-bottom: 0;
cursor: default;
}
label.form-control:hover:not(:focus),
label.form-control:focus {
border-color: var(--woker-border-control);
box-shadow: none;
}
/* Con `for` sí se puede clickear para marcar la casilla; sin él es solo texto. */
label.form-control[for] { cursor: pointer; }
/* Prefijo/sufijo de un input-group (ícono de lupa, "$", "https://"): Bootstrap lo pinta gris
(#e9ecef) contra el input blanco y el control se ve partido en dos. Va con la misma caja que
`.form-control` —misma superficie, mismo borde, mismo alto— así que la única costura entre
ícono e input es el borde que ya comparten. El ícono queda en el gris del placeholder: es
decoración del campo, no dato. */
.input-group-text {
background-color: var(--woker-surface);
border: 1px solid var(--woker-border-control);
border-radius: var(--woker-radius-control);
color: var(--woker-subtle);
font-size: .875rem;
line-height: 1.5;
padding: .5rem .75rem;
}
/* Y el foco también es del grupo, no del input solo: el resaltado va alrededor de todo
(por eso `:focus-within` y no `:focus`) y el input cede el suyo, así no queda una caja
resaltada adentro de otra apagada. */
.input-group:focus-within {
border-radius: var(--woker-radius-control);
box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .15);
}
.input-group:focus-within .form-control:focus,
.input-group:focus-within select.form-control:focus { box-shadow: none; }
.input-group:focus-within > .input-group-prepend > .input-group-text,
.input-group:focus-within > .input-group-append > .input-group-text {
border-color: var(--woker-violet);
color: var(--woker-violet);
}
/* La otra mitad del patrón del checkbox: el pill que contiene la casilla. El `:has()` lo limita
a ese caso — ahí sí se despega de la superficie del input, porque no es un campo editable. */
.input-group-prepend > .input-group-text:has(input[type="checkbox"]) {
display: flex;
align-items: center;
min-height: 40px;
background-color: var(--woker-surface-2);
border-color: var(--woker-border-control);
color: var(--woker-muted);
}
.input-group-text > input[type="checkbox"] { margin: 0; accent-color: var(--woker-violet); }
/* Que el pill y la label midan lo mismo */
.input-group > label.form-control { min-height: 40px; }
/* La celda del checkbox no tiene label propio —el texto ya lo pone la etiqueta del grupo—, así que
cuando comparte fila con campos que sí lo tienen el `.form-row` la estira a lo alto de la fila y
el pill quedaba arriba de todo, a la altura del label del vecino y no de su caja. Alineado al
fondo cae a la altura del input, y si la fila es solo de checkboxes no hay nada que estirar: no
aparece aire muerto arriba. Sirve para las dos formas sin que el template tenga que saber cuál le
toca. Deja afuera las celdas que ya traen su propio espaciador (el endoso del gestor). */
.form-row > .form-group:not(:has(> .info-label)):has(> .input-group > .input-group-prepend > .input-group-text > input[type="checkbox"]) {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Input file (Bootstrap .custom-file + bs-custom-file-input): viene con su propia caja
(radio .25rem, alto y tipografía distintos) y el botón "Buscar" en gris #e9ecef, así que
al lado de los demás controles desentona. Se alinea al .form-control: misma altura, mismo
radio, mismo borde y foco; el botón queda como una franja en la superficie secundaria. */
.custom-file,
.custom-file-input,
.custom-file-label { height: calc(1.5 * .875rem + 1rem + 2px); }
.custom-file-label {
display: flex;
align-items: center;
background-color: var(--woker-surface);
border: 1px solid var(--woker-border-control);
border-radius: var(--woker-radius-control);
color: var(--woker-muted);
font-size: .875rem;
line-height: 1.5;
padding: .5rem .75rem;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* El pseudo-elemento es el botón "Buscar": Bootstrap lo posiciona absoluto contra los
4 bordes, así que el alto sale solo y el texto se centra por flex. */
.custom-file-label::after {
display: flex;
align-items: center;
background-color: var(--woker-surface-2);
border-left: 1px solid var(--woker-border-control);
border-radius: 0 var(--woker-radius-control) var(--woker-radius-control) 0;
color: var(--woker-muted);
font-size: .875rem;
line-height: 1.5;
padding: 0 .75rem;
}
.custom-file-input:hover:not(:focus) ~ .custom-file-label { border-color: var(--woker-border-fuerte); }
.custom-file-input:focus ~ .custom-file-label {
border-color: var(--woker-violet);
box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .15);
}
/* Select nativo: sin el chrome del navegador, con el chevron propio */
select.form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right .5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Los controles miden .875rem en TODOS los anchos. Acá había un salto a 16px en mobile (iOS
hace zoom al enfocar un campo que mida menos) que solo alcanzaba a `.form-control`: los
nativos subían a 16px y el resto del formulario —select2, casillas, el nombre del archivo
elegido— se quedaba en 14px, así que el tamaño del texto terminaba dependiendo de con qué
widget estaba hecho el campo. Se saca: un solo tamaño, y el zoom de iOS se acepta. */
/* Labels de formulario */
.info-label {
display: block;
color: var(--woker-muted);
font-weight: 500;
font-size: .875rem;
line-height: 1.3;
margin-bottom: .5rem;
}
.info-label .text-danger { color: var(--woker-danger); font-weight: 700; }
/* Casillas y radios nativos: el navegador los pinta con SU azul (o el accent del SO), que
ningún auditor de color detecta porque no es CSS de autor. Va acá, en la capa de sistema,
para que cualquier casilla suelta —incluidas las de los modales compartidos— nazca en el
color de marca sin que cada pantalla tenga que acordarse. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--woker-violet); }
/* Checkbox/switch "custom" de Bootstrap: la casilla real está oculta y lo que se ve es el
`::before` del label, pintado con el azul de Bootstrap. `accent-color` no lo toca (no hay
control nativo que pintar) y ningún auditor lo ve como azul de la pantalla, así que va acá,
una sola vez, para todo el stack nuevo. */
.custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--woker-violet);
border-color: var(--woker-violet);
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: var(--woker-violet);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
background-color: var(--woker-violet-soft);
border-color: var(--woker-violet);
}
/* Switch (`.custom-control.custom-switch`): Bootstrap lo dibuja como un cuadradito redondeado
con la perilla gris pegada al borde, que no es la forma del toggle nuevo (el de Modo oscuro
del menú de usuario: riel pill, perilla blanca, violeta al encender). Se redefine acá, en la
capa de sistema, para que cualquier switch nazca con la estética nueva sin tocar el markup
ni los widgets del form. Solo cambia la forma: las medidas siguen siendo las de Bootstrap
(riel 1.75rem × 1rem), que al lado de un label de formulario pesan menos que el toggle del
menú de usuario. */
.custom-switch .custom-control-label::before {
border: none;
border-radius: 999px;
background-color: var(--woker-border-fuerte);
transition: background-color .15s var(--woker-ease);
}
.custom-switch .custom-control-label::after {
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
transition: transform .15s var(--woker-ease);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: #fff;
}
/* Bootstrap clava el riel a `top: .25rem` contando una etiqueta de 1rem: con cualquier otro
tamaño de texto el toggle queda alto o bajo respecto de su etiqueta. Con el label como
contenedor de referencia, el 50% es el de la línea de texto y el riel se centra siempre.
El translateX del encendido se repisa porque en Bootstrap es un `transform` suelto que
pisaría el centrado. */
.custom-switch .custom-control-label {
position: relative;
}
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
top: 50%;
transform: translateY(-50%);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
transform: translate(.75rem, -50%);
}
/* Checkbox nativo (Bootstrap .form-check): accent de marca + texto acorde a los form controls */
.form-check-input { accent-color: var(--woker-violet); }
.form-check-label { color: var(--woker-muted); font-size: .875rem; }
/* Radio de un `.form-check`: el control nativo dibuja el punto interior en el color del lienzo,
así que con `color-scheme: dark` el marcado sale violeta con el punto NEGRO —se lee como una
dona— y el apagado, como un disco gris macizo. Se dibuja a mano (mismo criterio que la casilla
de los modales) para que el punto sea siempre blanco y el apagado, un aro sobre la superficie:
el radio queda igual en los dos temas. `appearance: none` obliga a fijar el tamaño, porque el
que traía era el del control del SO. */
.form-check-input[type="radio"] {
width: 15px;
height: 15px;
appearance: none;
-webkit-appearance: none;
border: 1.5px solid var(--woker-border-fuerte);
border-radius: 50%;
background-color: var(--woker-surface);
cursor: pointer;
transition: var(--woker-transicion);
}
.form-check-input[type="radio"]:checked {
border-color: var(--woker-violet);
background-color: var(--woker-violet);
background-image: radial-gradient(circle at center, #fff 0 3px, transparent 3px);
}
/* El foco se ve solo cuando se llega por teclado, igual que en la casilla de los modales. */
.form-check-input[type="radio"]:focus-visible {
outline: 0;
border-color: var(--woker-violet);
box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .15);
}
.form-check-input[type="radio"]:disabled { cursor: default; opacity: .6; }
/* Grupo de opciones (checkbox o radio) que se listan juntas: grilla que acomoda tantas columnas
como entren según el largo de las etiquetas, en vez de col-* fijas que dejan huecos enormes
cuando las etiquetas son cortas. Cada opción es un .form-check de Bootstrap.
El min() del minmax es lo que evita que en mobile la columna quede más ancha que la pantalla. */
.opciones-check {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
gap: .4rem 1rem;
}
.opciones-check .form-check { margin-bottom: 0; }
/* Una sola columna: opciones excluyentes cortas que se leen mejor apiladas. */
.opciones-check.opciones-check-apiladas { grid-template-columns: 1fr; }
/* Etiquetas largas (nombres de cobertura): columnas más anchas para que no corten. */
.opciones-check.opciones-check-anchas { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* Checkbox suelto en una celda, sin el .form-check que lo envuelve: Bootstrap lo saca de flujo
(position:absolute + margin-left negativo) para armar ese layout, y en una celda queda corrido
a la izquierda y por debajo del centro. Dentro de la tabla vuelve al flujo y se centra con
la celda (que ya es vertical-align:middle). */
.tabla-moderna td > .form-check-input {
position: static;
margin: 0;
vertical-align: middle;
}
/* Botones de formulario (los usan también los modales compartidos) */
.btn-minimal {
display: inline-flex;
align-items: center;
gap: .5rem;
border: none;
padding: .5rem 1rem;
border-radius: var(--woker-radius-control);
font-size: .875rem;
font-weight: 600;
transition: var(--woker-transicion);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.btn-minimal:hover { text-decoration: none; }
.btn-minimal:active { transform: translateY(1px); }
/* background-color en longhand a propósito: con var() el shorthand no expande los longhands en el CSSOM */
.btn-minimal.btn-primary { background-color: var(--woker-violet); border-color: var(--woker-violet); color: #fff; }
.btn-minimal.btn-primary:hover { background-color: var(--woker-violet-hover); border-color: var(--woker-violet-hover); color: #fff; transform: translateY(-1px); }
.btn-minimal.btn-outline { background: var(--woker-surface); color: var(--woker-muted); border: 1px solid var(--woker-border); }
.btn-minimal.btn-outline:hover { background: var(--woker-surface-2); color: var(--woker-ink); border-color: var(--woker-border-fuerte); }
/* Ghost: "crear/agregar" dentro de una card, sin caja para no competir con el submit de la
pantalla. Borde transparente: iguala el alto con .btn-outline, que sí lo tiene. */
.btn-minimal.btn-ghost { background: transparent; color: var(--woker-violet); border: 1px solid transparent; }
.btn-minimal.btn-ghost:hover { background: var(--woker-violet-tint); color: var(--woker-violet); }
.btn-minimal.btn-ghost:disabled { color: var(--woker-subtle); background: transparent; }
.btn-minimal.btn-success { background-color: var(--woker-ok); border-color: var(--woker-ok); color: #fff; }
.btn-minimal.btn-success:hover { background-color: #128a43; border-color: #128a43; color: #fff; transform: translateY(-1px); }
.btn-minimal.btn-danger { background-color: var(--woker-danger); border-color: var(--woker-danger); color: #fff; }
.btn-minimal.btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; color: #fff; transform: translateY(-1px); }
/* Estados :focus / :active. Bootstrap repinta .btn-primary/.btn-success/.btn-danger con SU
paleta (el azul #0062cc al apretar) desde `.btn-primary:not(:disabled):not(.disabled):active`,
que tiene más especificidad que las reglas de arriba. Se reafirma el color de cada variante
y el anillo de foco pasa al color de marca, solo con teclado (:focus-visible). */
.btn-minimal:focus { outline: 0; box-shadow: none; }
.btn-minimal:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .25); }
.btn-minimal.btn-primary:not(:disabled):not(.disabled):active,
.btn-minimal.btn-primary:not(:disabled):not(.disabled):active:focus { background-color: var(--woker-violet-hover); border-color: var(--woker-violet-hover); color: #fff; }
.btn-minimal.btn-success:not(:disabled):not(.disabled):active,
.btn-minimal.btn-success:not(:disabled):not(.disabled):active:focus { background-color: #128a43; border-color: #128a43; color: #fff; }
.btn-minimal.btn-danger:not(:disabled):not(.disabled):active,
.btn-minimal.btn-danger:not(:disabled):not(.disabled):active:focus { background-color: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-minimal:not(:disabled):not(.disabled):active:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .25); }
/* Select2 — enhance de los