/* ============================================================ DIC-FICHA.CSS — Ficha en tarjeta ------------------------------------------------------------ Sistema visual que nacio en las pantallas de dictamen y que ahora comparte todo el proyecto: tarjeta con barra oscura, tabla de rotulo/valor sin rejilla, y pildoras. Lo que lo distingue del scaffolding no es el color: es que no dibuja rejilla. 'table-bordered' encajona cada celda; aqui solo se separa fila de fila y se pinta la columna de rotulos. Se carga desde el bundle ~/Contenido/css (App_Start/BundleConfig.cs), que en el layout va DESPUES de bootstrap: por eso estas reglas le ganan a Bootstrap sin necesitar !important. OJO: el .csproj es formato legacy. Este archivo esta registrado a mano con ; si se quita esa linea, compila igual pero no se publica y las pantallas salen sin estilo. Las fuentes (Plus Jakarta Sans y JetBrains Mono) las enlaza Views/Shared/_Layout.cshtml en el . ============================================================ */ /* ── Variables ───────────────────────────────── Van prefijadas: esta hoja es global, y nombres como --border o --text se los pelearia cualquier libreria que entre despues. */ :root { --dic-border: #e8e8e8; --dic-bg-th: #f5f5f5; --dic-text: #1e293b; --dic-muted: #64748b; --dic-ink: #111; --dic-ink-2: #0f172a; /* Barra de las tarjetas y cuadro del icono: el color institucional, el mismo de la barra lateral. No es un valor fijo sino la variable del tema, que redefinen navbar.css (azul #337ab7), navbarGray.css (#575a5e) y navbarGreen.css (#449d44) segun el que tenga puesto la institucion. Si manana se cambia el tema, estas barras lo siguen solas. El valor de respaldo es el azul, que es el tema en uso. */ --dic-bar: var(--sidebar-bg, #337ab7); --dic-bar-2: var(--sidebar-bg-dark, #286090); --dic-bar-linea: rgba(15, 23, 42, .10); --dic-row-hover: #fafafa; --dic-radius: 12px; --dic-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --dic-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; } /* ── Ancho de pagina ─────────────────────────── Sin tope: la ficha usa toda la pantalla, igual que el dictamen de cuentas. Lo que hace viable ensanchar es la variante de cuatro columnas (.dic-doble): cada dato queda pegado a su rotulo, asi que estirar no los separa. Una tabla de dos columnas a 1800px si seria ilegible, con el valor a media pantalla de su etiqueta. */ .dic-page { width: 100%; } /* ── Encabezado de pagina ──────────────────── */ .dic-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 2px solid var(--dic-bar-linea); } .dic-page-header .dic-header-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--dic-bar), var(--dic-bar-2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(15,23,42,.18); flex-shrink: 0; } .dic-page-header .dic-header-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dic-page-header h2 { font-family: var(--dic-font); font-size: 1.35rem; font-weight: 700; color: var(--dic-ink-2); margin: 0; letter-spacing: -.3px; } .dic-page-header p { margin: 2px 0 0; font-size: .82rem; color: var(--dic-muted); font-family: var(--dic-font); } /* ── Tarjetas ──────────────────────────────── */ .dic-card { background: #fff; border-radius: var(--dic-radius); border: 1px solid var(--dic-border); box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-bottom: 20px; overflow: hidden; } /* Variante para listados: el menu de filtro por estado del Index es position:absolute DENTRO de un , o sea dentro de la tarjeta, y el overflow:hidden de arriba lo cortaria. Se pierde el recorte de las esquinas contra el radio, que no se nota porque tabla y tarjeta son blancas y la ultima fila va sin borde. */ .dic-card-lista { overflow: visible; } .dic-card-header { background: var(--dic-bar); padding: 11px 18px; display: flex; align-items: center; gap: 8px; } .dic-card-header h4 { margin: 0; font-size: .9rem; font-weight: 700; color: #fff; letter-spacing: .3px; text-transform: uppercase; font-family: var(--dic-font); } /* El overflow-x es obligatorio, no un extra: .dic-card recorta con overflow:hidden, asi que sin esto una tabla mas ancha que la tarjeta se corta y no hay forma de llegar al resto. Se nota sobre todo en celular con la variante de cuatro columnas. */ .dic-card-body { padding: 0; /* a sangre: casi siempre lleva una tabla */ overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Para cuerpos que no son tabla (un iframe, un aviso, un formulario). */ .dic-card-body-pad { padding: 16px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tarjeta de formulario: el contenido va directo adentro, sin un div de cuerpo. Existe para poder convertir los bs-callout que ya estaban sin reacomodar todos sus cierres, que es donde se rompen estas migraciones. La cabecera se saca a los bordes con margen negativo; el overflow:hidden de .dic-card la recorta contra el radio. */ .dic-card-form { padding: 0 18px 10px; } .dic-card-form > .dic-card-header { margin: 0 -18px 16px; } /* Pie de tarjeta: paginador, totales, selector de filas. */ .dic-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--dic-border); font-family: var(--dic-font); } .dic-card-foot .pagination { margin: 0; } /* Contador a la derecha de la barra oscura. */ .dic-count { margin-left: auto; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 50px; padding: 1px 10px; font-size: .75rem; font-weight: 700; color: #fff; font-family: var(--dic-font); } /* Boton sobre la barra de la tarjeta. Un btn-success verde ahi desentona; este se pinta con el propio fondo, aclarado. */ .dic-btn-ghost { margin-left: auto; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 6px; padding: 3px 12px; font-size: .78rem; font-weight: 600; font-family: var(--dic-font); transition: background .15s ease; } .dic-btn-ghost:hover, .dic-btn-ghost:focus { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; } /* Scroll horizontal propio. NO usar .table-responsive dentro de una tarjeta: sidebar.css le mete max-width:1200px y margin:auto, y descuadra la tarjeta que la contiene. */ .dic-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Aviso al mismo ancho que las tarjetas. sidebar.css limita todo .alert dentro de .content-wrapper a 1200px centrados, que es lo que lo dejaba mas angosto; se le gana con la misma especificidad porque esta hoja carga despues. El radio y el borde se alinean con los de la tarjeta. */ .dic-alert, .content-wrapper .dic-alert { max-width: none; margin-left: 0; margin-right: 0; border-radius: var(--dic-radius); } /* Estado vacio: "no hay documento", "sin dispositivos". */ .dic-empty { text-align: center; padding: 28px 16px; color: var(--dic-muted); font-family: var(--dic-font); font-size: .86rem; } .dic-empty i { font-size: 2.4rem; color: #cbd5e1; display: block; margin-bottom: 8px; } /* ── Tabla de ficha (rotulo / valor) ────────── Dos columnas: el etiqueta la FILA (no la columna), por eso lleva fondo propio. Para listados de varias filas va .dic-list. */ .dic-table { width: 100%; border-collapse: collapse; font-family: var(--dic-font); font-size: .9rem; } .dic-table th { width: 30%; padding: 10px 16px; background: var(--dic-bg-th); color: var(--dic-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--dic-border); vertical-align: middle; } .dic-table td { width: 70%; padding: 10px 16px; color: var(--dic-text); font-weight: 500; border-bottom: 1px solid var(--dic-border); vertical-align: middle; } .dic-table tr:last-child th, .dic-table tr:last-child td { border-bottom: none; } .dic-table tr:hover td, .dic-table tr:hover th { background: var(--dic-row-hover); } /* Variante a cuatro columnas (rotulo/valor/rotulo/valor) para que los datos cortos no dejen media pantalla en blanco. Las filas de un solo dato usan colspan y ocupan todo el ancho. */ .dic-table.dic-doble th { width: 17%; } .dic-table.dic-doble td { width: 33%; } .dic-table.dic-doble th, .dic-table.dic-doble td { padding: 8px 14px; } /* Fila que separa secciones dentro de la misma tabla: es una sola tarjeta con dos o mas bloques internos. */ .dic-table tr.dic-seccion th { width: auto; background: #e9e9e9; color: var(--dic-ink); font-size: .74rem; letter-spacing: .8px; padding: 7px 16px; border-top: 1px solid var(--dic-border); } .dic-table tr.dic-seccion:hover th { background: #e9e9e9; } .dic-table.dic-doble tr.dic-seccion th { width: auto; } @media (max-width: 767.98px) { /* Cuatro columnas no caben en un celular: los rotulos se parten en tres renglones y aun asi la tabla se sale. Se le fija un ancho minimo legible y se lee desplazando en horizontal, para lo cual .dic-card-body ya tiene su overflow. Sin el min-width el navegador la comprime hasta dejar columnas de 60px, que es peor que desplazarse. */ .dic-table.dic-doble { min-width: 620px; } } /* ── Tabla de listado ────────────────────────── La otra mitad del sistema: aqui el etiqueta la COLUMNA, va arriba y es una sola fila. Reglas tomadas de .dash-tabla, que es la version de esta misma tabla que ya lleva tiempo en el tablero. La barra negra pertenece a la TARJETA, no al : el menu de filtro por estado es un desplegable blanco anclado en un , y sobre fondo negro habria que recolorearlo entero. Se usa junto con .table de Bootstrap (class="table dic-list"): esa clase la necesitan reglas de sidebar.css que ocultan columnas en movil. Como esta hoja carga despues, estas reglas ganan por orden. */ .dic-list { width: 100%; margin-bottom: 0; font-family: var(--dic-font); font-size: .85rem; } .dic-list th { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--dic-muted); font-weight: 700; background: var(--dic-bg-th); border-top: none; border-bottom: 1px solid var(--dic-border); padding: 9px 10px; white-space: nowrap; vertical-align: middle; } .dic-list th a { color: inherit; text-decoration: none; } .dic-list th a:hover { color: var(--dic-ink); text-decoration: none; } .dic-list td { padding: 9px 10px; border-top: none; border-bottom: 1px solid var(--dic-border); vertical-align: middle; color: var(--dic-text); font-variant-numeric: tabular-nums; } .dic-list tbody tr:hover td { background: var(--dic-row-hover); } .dic-list tbody tr:last-child td { border-bottom: none; } /* Cuando la tabla es lo primero de la tarjeta (listado sin barra de titulo), su encabezado toca el borde superior. Las esquinas hay que redondearlas a mano porque .dic-card-lista no puede recortar: necesita overflow visible para que el menu de filtro pueda salirse. */ .dic-card > .dic-list:first-child thead tr:first-child th:first-child { border-top-left-radius: var(--dic-radius); } .dic-card > .dic-list:first-child thead tr:first-child th:last-child { border-top-right-radius: var(--dic-radius); } /* Variante densa para tarjetas de resumen (tablero, reportes). */ .dic-list-densa { font-size: .82rem; } .dic-list-densa th, .dic-list-densa td { padding: 8px 6px; } /* Flecha de ordenamiento. Se pinta siempre, tenue, para que se note que la columna es ordenable antes de hacer clic. */ .dic-sort { opacity: .35; margin-left: 4px; } .dic-sort-activo { opacity: 1; color: var(--dic-ink); } /* ── Barra de herramientas sobre una tarjeta ── */ .dic-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } /* El buscador se va al extremo derecho de la barra y cede ancho antes que los botones, que no pueden encogerse sin cortarse. */ .dic-toolbar-buscar { margin-left: auto; flex: 1 1 220px; max-width: 340px; } /* Total de registros, al pie. */ .dic-total { font-size: .8rem; color: var(--dic-muted); white-space: nowrap; } /* Selector de filas por pagina, en el pie de la tarjeta. */ .dic-foot-filas { display: flex; align-items: center; gap: 6px; } .dic-foot-filas .form-control { width: auto; min-width: 72px; } /* Botonera de acciones: filas con 1 boton y filas con 5. Un ancho fijo obligaria a reservar el peor caso en todas. */ .dic-acciones { display: flex; flex-wrap: wrap; gap: 4px; } .dic-acciones .btn { margin: 0; } /* La misma botonera al pie de una ficha: centrada y separada del contenido. */ .dic-acciones.justify-content-center { margin: 24px 0 8px; } /* ── Pildoras ──────────────────────────────── */ .dic-device-pill { display: inline-flex; align-items: center; background: #f0f0f0; border: 1px solid #d1d1d1; color: var(--dic-ink); border-radius: 50px; padding: 3px 11px; font-size: .82rem; font-weight: 600; margin: 2px 4px 2px 0; font-family: var(--dic-font); } .dic-estado-badge-inline { display: inline-flex; align-items: center; gap: 6px; background: #f0f0f0; border: 1px solid #d1d1d1; border-radius: 50px; padding: 3px 12px; font-size: .82rem; font-weight: 700; color: var(--dic-ink); font-family: var(--dic-font); } .dic-estado-badge-inline::before { content: ''; width: 7px; height: 7px; background: currentColor; border-radius: 50%; } /* ── Caja de observaciones ───────────────────── Cuerpo de tarjeta con un textarea, en vez de una tabla. Lo usan las dos pantallas de dictamen. La regla de validacion va acotada a .dic-obs-body a proposito: .field-validation-error suelta la genera MVC en los ~50 formularios del proyecto, y global les cambiaria el mensaje a todos. */ .dic-obs-body { padding: 18px 20px; display: flex; flex-direction: column; align-items: center; } .dic-obs-body textarea { width: 100%; border: 1.5px solid var(--dic-border); border-radius: 8px; padding: 10px 14px; font-family: var(--dic-font); font-size: .93rem; color: var(--dic-text); background: #fafafa; resize: vertical; min-height: 110px; transition: border-color .2s, box-shadow .2s; outline: none; } .dic-obs-body textarea:focus { border-color: var(--dic-ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); background: #fff; } .dic-obs-body .field-validation-error { color: #dc3545; font-size: 0.875em; margin-top: .25rem; font-family: var(--dic-font); } /* Subtitulo de una seccion dentro de una tarjeta, cuando el contenido no da para partirla en dos. Pesa menos que la barra del encabezado. */ .dic-subtitulo { font-family: var(--dic-font); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--dic-muted); margin: 4px 0 10px; } /* ── Utilidades de texto ───────────────────── */ /* Identificadores: correlativo, NIT, DPI, numero de serie, activo MAGA. La monoespaciada con cifras de ancho fijo los alinea en columna y los separa de un nombre o una descripcion. */ .dic-mono { font-family: var(--dic-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* Dato ausente ("N/A", "Sin asignar"). Que un vacio pese lo mismo que un dato real es un defecto de lectura, no de estetica. */ .dic-muted { color: var(--dic-muted); font-weight: 400; }