/* ============================================================
diseno-avanzado.css — DISEÑO AVANZADO COMPARTIDO
Sistema de diseño reutilizable para módulos con tablas/formularios.
Se activa SOLO cuando el lleva la clase `.diseno-avanzado`
(interruptor global desde empresa_parametros, en plantilla.php).
Estética: limpia y ligera — sombras suaves, bordes finos, aire.
Paleta primaria del proyecto: #143DD4 / #0f2a9e
============================================================ */
.diseno-avanzado {
--da-primary: #143DD4;
--da-primary-dark: #0f2a9e;
--da-primary-soft: #eef2ff;
--da-ink: #232a35;
--da-muted: #7a828f;
--da-line: #eceff5;
--da-line-strong: #e2e6ef;
--da-radius: 16px;
--da-radius-sm: 10px;
/* sombras suaves (dos capas: contacto fino + difusa muy tenue) */
--da-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -18px rgba(16, 24, 40, .18);
--da-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
}
/* ---------- Tarjeta contenedora ---------- */
.diseno-avanzado .box {
background: #ffffff;
border: 1px solid var(--da-line);
border-radius: var(--da-radius) !important;
box-shadow: var(--da-shadow);
padding: 4px 22px 26px;
overflow: visible;
}
/* ---------- Cabecera de módulo ---------- */
.diseno-avanzado .box-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 20px 2px 16px !important;
border-bottom: 1px solid var(--da-line) !important;
margin-bottom: 8px;
text-align: left !important;
}
.diseno-avanzado .box-title {
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: .2px;
color: var(--da-ink) !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 11px;
}
/* Barra de acento fina a la izquierda del título */
.diseno-avanzado .box-title::before {
content: "";
width: 4px;
height: 22px;
border-radius: 4px;
background: var(--da-primary);
flex: 0 0 auto;
}
/* ---------- Etiquetas de campo ---------- */
.diseno-avanzado H7,
.diseno-avanzado h7 {
display: block;
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .7px;
color: var(--da-muted) !important;
margin-bottom: 5px;
}
.diseno-avanzado .form-group {
margin-bottom: 8px;
}
/* ---------- Grupos de input (filtros) ---------- */
.diseno-avanzado .input-group {
display: flex;
align-items: stretch;
border: 1px solid var(--da-line-strong);
border-radius: var(--da-radius-sm);
overflow: hidden;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.diseno-avanzado .input-group:focus-within {
border-color: var(--da-primary);
box-shadow: 0 0 0 3px rgba(20, 61, 212, .10);
}
.diseno-avanzado .input-group-addon {
background: #fff !important;
border: none !important;
border-right: 1px solid var(--da-line) !important;
color: var(--da-primary) !important;
font-size: 12.5px !important;
margin: 0 !important;
padding: 0 10px !important;
display: flex !important;
align-items: center;
justify-content: center;
min-width: 34px;
}
.diseno-avanzado .input-group-addon i {
color: var(--da-primary) !important;
}
.diseno-avanzado .input-group .form-control,
.diseno-avanzado .input-group .fechareportes,
.diseno-avanzado .input-group input,
.diseno-avanzado .input-group select,
body.diseno-avanzado .input-group .form-control,
body.diseno-avanzado .input-group .fechareportes,
body.diseno-avanzado .input-group input,
body.diseno-avanzado .input-group select {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
height: 34px !important;
font-size: 12.5px !important;
font-weight: 600;
color: var(--da-ink) !important;
background: #fff !important;
padding: 5px 10px !important;
outline: none !important;
}
.diseno-avanzado .input-group .form-control::placeholder,
.diseno-avanzado .input-group input::placeholder {
color: #aab2c0;
font-weight: 500;
}
/* ---------- Botones ---------- */
.diseno-avanzado .btn-success {
background: var(--da-primary) !important;
border: none !important;
color: #fff !important;
font-weight: 600;
letter-spacing: .2px;
border-radius: var(--da-radius-sm) !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.diseno-avanzado .btn-success:hover {
background: var(--da-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 6px 14px -4px rgba(20, 61, 212, .40);
}
.diseno-avanzado .btn-success:active {
transform: translateY(0);
}
/* ---------- Tablas ---------- */
/* Apuntamos a .tabla-resumenes (tabla principal de resultados) y NO a
.table-responsive en general, para no envolver wrappers chicos. */
.diseno-avanzado .tabla-resumenes {
clear: both; /* baja debajo de los filtros flotados */
margin-top: 20px;
border-radius: var(--da-radius);
border: 1px solid var(--da-line);
box-shadow: var(--da-shadow-sm);
background: #fff;
overflow-x: auto;
}
.diseno-avanzado .table {
margin-bottom: 0;
width: 100% !important;
border-collapse: separate;
border-spacing: 0;
}
.diseno-avanzado .table thead th {
background: #f6f8fe !important; /* cabecera clara, ligera */
color: var(--da-primary-dark) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .6px;
border: none !important;
border-bottom: 2px solid var(--da-primary) !important;
padding: 13px 12px !important;
white-space: nowrap;
vertical-align: middle !important;
}
.diseno-avanzado .table thead th i {
color: var(--da-primary) !important;
}
.diseno-avanzado .table tbody td {
font-size: 13px !important;
color: var(--da-ink) !important;
background: #fff;
border: none !important;
border-bottom: 1px solid var(--da-line) !important;
padding: 11px 12px !important;
vertical-align: middle !important;
}
.diseno-avanzado .table tbody tr:last-child td {
border-bottom: none !important;
}
.diseno-avanzado .table tbody tr:hover td {
background: var(--da-primary-soft) !important;
}
.diseno-avanzado .table .btn {
border-radius: 8px !important;
}
/* ---------- Ordenamiento por columna (look; el comportamiento es JS) ---------- */
.diseno-avanzado .table thead th.req-sortable {
cursor: pointer;
user-select: none;
padding-right: 22px !important;
position: relative;
transition: color .12s ease, background .12s ease;
}
.diseno-avanzado .table thead th.req-sortable::after {
content: "\2195"; /* ↕ neutro */
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
opacity: .35;
}
.diseno-avanzado .table thead th.req-sort-asc::after { content: "\2191"; opacity: 1; }
.diseno-avanzado .table thead th.req-sort-desc::after { content: "\2193"; opacity: 1; }
.diseno-avanzado .table thead th.req-sortable:hover {
background: #eaf0ff !important;
}
/* ---------- Responsive (tablet / celular) ---------- */
@media (max-width: 768px) {
.diseno-avanzado .box {
padding: 4px 12px 18px;
border-radius: 12px !important;
}
/* Cabecera: título y botón se apilan, botón a lo ancho para tocarlo fácil */
.diseno-avanzado .box-header {
padding: 16px 2px 14px !important;
gap: 10px;
}
.diseno-avanzado .box-title {
font-size: 16px !important;
}
.diseno-avanzado .box-header .btn-success {
width: 100%;
justify-content: center;
text-align: center;
}
/* Filtros: campos full-width y apilados verticalmente, más altos (dedo) */
.diseno-avanzado [class*="col-md-"],
.diseno-avanzado [class*="col-xs-"] {
width: 100% !important;
float: none !important;
margin-bottom: 8px;
}
.diseno-avanzado .form-group {
margin-bottom: 10px;
}
.diseno-avanzado .input-group .form-control,
.diseno-avanzado .input-group .fechareportes,
.diseno-avanzado .input-group input,
.diseno-avanzado .input-group select,
body.diseno-avanzado .input-group .form-control,
body.diseno-avanzado .input-group .fechareportes,
body.diseno-avanzado .input-group input,
body.diseno-avanzado .input-group select {
height: 38px !important;
font-size: 13px !important;
}
/* =========================================================
Tabla como tarjetas en móvil — sistema reutilizable.
Cualquier reporte (requerimientos, transacciones, y a futuro
ventas/inventario/etc.) usa las mismas clases sobre sus | :
td-rownum columna "#": se oculta, no aporta en tarjeta
td-titulo dato principal (numero/documento), grande, arriba
td-titulo-accion ícono/botón que acompaña al título (a la derecha)
td-subtitulo línea destacada justo debajo del título (ancho completo)
(sin clase, con dato normal de la grilla 2 columnas
data-label)
td-full dato de ancho completo tras la grilla (ej. observación)
td-footer pie de tarjeta (badge/estado), con divisor arriba
td-accion ícono/botón de acción; junto con td-footer va al pie,
junto con td-titulo-accion va arriba con el título
Color del estado: agregar tr-ok / tr-danger / tr-info al | según
corresponda (ej. activo/anulado). Sin clase, el borde es azul neutro.
========================================================= */
.diseno-avanzado .tabla-resumenes {
max-width: 100%;
border-radius: 0;
overflow-x: hidden;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.diseno-avanzado .table {
display: block;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
.diseno-avanzado .table thead {
display: none;
}
.diseno-avanzado .table tbody {
display: block;
width: 100%;
}
.diseno-avanzado .table tbody tr {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 12px;
padding: 14px 14px 12px;
background: #fff;
border: 1px solid var(--da-line);
border-left: 4px solid var(--da-primary);
border-radius: var(--da-radius-sm);
box-shadow: var(--da-shadow-sm);
}
.diseno-avanzado .table tbody tr.tr-ok { border-left-color: #2e9e5b; }
.diseno-avanzado .table tbody tr.tr-danger { border-left-color: #d64545; }
.diseno-avanzado .table tbody tr.tr-info { border-left-color: var(--da-primary); }
.diseno-avanzado .table tbody td {
display: block;
flex: 0 0 50%;
max-width: 50%;
min-width: 0;
box-sizing: border-box;
white-space: normal !important;
overflow-wrap: break-word;
word-break: break-word;
padding: 6px 8px 6px 0 !important;
border: none !important;
font-size: 13.5px !important;
font-weight: 600;
background: none !important;
order: 0;
}
.diseno-avanzado .table tbody td:hover {
background: none !important;
}
/* Título de cada dato dentro de la tarjeta (celdas con data-label) */
.diseno-avanzado .table tbody td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--da-muted);
margin-bottom: 2px;
}
/* Número de fila (#): no aporta en la tarjeta, se oculta */
.diseno-avanzado .table tbody td.td-rownum {
display: none;
}
/* Título principal (numero/documento) — encabezado de la tarjeta */
.diseno-avanzado .table tbody td.td-titulo {
order: -3;
flex: 1 1 auto;
max-width: 100%;
min-width: 0;
display: flex;
align-items: center;
font-size: 16px !important;
font-weight: 700;
color: var(--da-ink);
padding: 0 0 10px 0 !important;
margin-bottom: 10px;
border-bottom: 1px solid var(--da-line);
overflow-wrap: break-word;
word-break: break-word;
}
/* Subtítulo: línea destacada justo debajo del título (ancho completo) */
.diseno-avanzado .table tbody td.td-subtitulo {
order: -1;
flex: 0 0 100%;
max-width: 100%;
min-width: 0;
font-size: 13px !important;
overflow-wrap: break-word;
word-break: break-word;
}
/* Dato de ancho completo tras la grilla (ej. observación) */
.diseno-avanzado .table tbody td.td-full {
order: 1;
flex: 0 0 100%;
max-width: 100%;
padding-top: 10px !important;
margin-top: 4px;
border-top: 1px solid var(--da-line);
}
/* Pie de tarjeta: badge/estado, separado por un divisor */
.diseno-avanzado .table tbody td.td-footer {
order: 2;
flex: 0 1 auto;
max-width: 100%;
padding-top: 10px !important;
margin-top: 8px;
border-top: 1px solid var(--da-line);
}
/* Íconos/botones de acción: sin label, tamaño de contenido */
.diseno-avanzado .table tbody td.td-accion {
order: 3;
flex: 0 0 auto;
max-width: none;
display: flex;
align-items: center;
margin-left: auto;
padding: 0 !important;
}
/* ...pero si acompañan al título, se ubican arriba junto a él */
.diseno-avanzado .table tbody td.td-accion.td-titulo-accion {
order: -2;
padding-bottom: 10px !important;
margin-bottom: 10px;
margin-left: auto;
border-bottom: 1px solid var(--da-line);
}
.diseno-avanzado .table tbody td.td-accion .fa,
.diseno-avanzado .table tbody td.td-accion i {
font-size: 18px !important;
}
/* Fila del paginador (celda con colspan): no es un registro, va sin
estilo de tarjeta y centrada, como en desktop. */
.diseno-avanzado .table tbody tr:has(td[colspan]) {
display: block;
background: transparent;
border: none;
box-shadow: none;
padding: 4px 0;
margin: 4px 0 0;
}
.diseno-avanzado .table tbody td[colspan] {
display: block;
flex: none;
max-width: 100%;
width: 100%;
text-align: center !important;
padding: 0 !important;
}
/* Botón de búsqueda de los módulos, a lo ancho en móvil */
.diseno-avanzado .contenedor-boton-busqueda .btn-success,
.diseno-avanzado .contenedor-boton-busqueda .btn {
width: 100%;
}
}
/* Teléfonos angostos */
@media (max-width: 480px) {
.diseno-avanzado .box {
padding: 4px 10px 16px;
}
.diseno-avanzado .box-title {
font-size: 15px !important;
}
.diseno-avanzado .box-title::before {
height: 18px;
}
.diseno-avanzado .table thead th,
.diseno-avanzado .table tbody td {
padding: 9px 8px !important;
}
}