/* ═══════════════════════════════════════════════════════════════════════════ data21-layout.css · TEMA DATA21 2026 — ENVOLTORIO, RITMO Y TARJETA ─────────────────────────────────────────────────────────────────────────── Traduce al marcado REAL del panel el bloque "DESPUÉS" de .superpowers/brainstorm/50266-1788770755/maqueta.html (líneas 136-141). Carga DESPUÉS de bootstrap.min.css, core.css, components.css, icons.css, pages.css y responsive.css: gana por orden y por especificidad, sin tocarlos. CLASES DE LAS QUE ESTE FICHERO ES DUEÑO (nadie más las escribe): .content-page > .content (NO ".content-page" a secas — es de shell) .container .row / [class*="col-"] (SOLO documentado: prohibido tocarlos) .page-title · .page-title-alt · .header-title .card-box · .card-box .card-box · .item-menu .card-box #botonesEdicion · #botonesEdicion > .btn utilidades de espaciado .m-t-* .m-b-* .m-l-* .m-r-* .m-0 .p-0 .p-20 .p-30 .p-t-0 .p-t-10 .p-b-0 .p-b-10 .p-l-r-10 .pull-right · .pull-left · .clearfix · .tmcontent .account-pages · .wrapper-page (+ descendientes) → pantalla de acceso FRONTERAS (contrato anti-solape): · .content-page {margin-left; padding-top} → data21-shell.css · .btn (fuera de #botonesEdicion) → data21-components.css · .text-muted → data21-components.css · .form-*, .flexigrid, .modal, .nav-tabs → forms / components TOKENS: este fichero SOLO consume var(--d21-*) de data21-tokens.css. No declara :root ni ningún color literal. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1 · ENVOLTORIO ════════════════════════════════════════════════════════ Maqueta: .nuevo .content-page{padding:var(--e5) var(--e6)} (24px / 32px) Marcado real: .content-page > .content > .container > .row > .col-sm-12 El !important es OBLIGATORIO por DOS motivos concretos: (a) core.css:1274-1279 declara ".content-page > .content{margin:30px auto; margin-bottom:60px; padding:20px 5px 15px 5px}" — misma especificidad que la nuestra (0,2,0), así que ganaríamos por orden, PERO (b) biblioteca_de_medios.php:15 escribe style='margin-top:35px;' INLINE en ese mismo .content, y un inline solo se vence con !important. Resultado: con el padding-top:58px que data21-shell.css pone en .content-page, la primera tarjeta arranca a 58+24 = 82px del borde superior del viewport, igual que en la captura aprobada. ─────────────────────────────────────────────────────────────────────────── */ .content-page > .content{ margin:0 auto !important; /* mata "margin:30px auto" y el margin-top:35px inline */ padding:var(--d21-e5) var(--d21-e6) var(--d21-e7) !important; /* 24px · 32px · 48px */ max-width:none; } /* .container: core.css:93 ya lo deja en width:auto, pero conserva los 15px de padding lateral de Bootstrap. Se anulan para que el aire lateral lo ponga EXCLUSIVAMENTE el .content (32px). Si no, quedarían 32+15 = 47px y el contenido no cuadraría con la captura. ⚠ La regla va DELIBERADAMENTE ACOTADA a ".content-page > .content > .container". ".container" a secas también alcanzaría al de la TOPBAR (cabecera.php:622-623 →
) y movería 15px los iconos de la barra superior, que es territorio de data21-shell.css. Verificado: en las 44 vistas con .container, TODAS lo escriben como hijo directo de .content. */ .content-page > .content > .container{ width:auto; padding-left:0; padding-right:0; } /* ═══ 2 · REJILLA — NO TOCAR ════════════════════════════════════════════════ ⚠ PROHIBIDO escribir aquí (ni en ningún otro fichero del tema) reglas para .row ni para el padding de las .col-*. core.css:422-474 baja el gutter de Bootstrap de 15px a 10px: .row { margin-left:-10px; margin-right:-10px } .col-*-* { padding-left:10px; padding-right:10px } TODO el cálculo de anchos de campo de data21-forms.css depende de esos 10px: 540px (capa B, ancho de columna) = 520px (control) + 2 × 10px de padding. Subir el gutter a los 12px del --d21-e3 de la maqueta afectaría a 150 filas y descuadraría los 495 form-group. Se queda en 10px: DESVIACIÓN DELIBERADA ya documentada y aceptada en la especificación. ⚠⚠ HALLAZGO MEDIDO CON PLAYWRIGHT (afecta a TODO el tema, no solo a este fichero): el gutter negativo del .row NO ESTÁ ACTIVO en el panel. assets/plugins/maquetador/maquetadorEstilo.css (cargado en cabecera.php:23, DESPUÉS de bootstrap y de core.css) declara para toda la aplicación: .row{ margin:0px; padding:0px; } Comprobado en el DOM: div.row → computed margin-left = 0px. Consecuencias reales: · el .col-*-12 conserva sus 10px de padding y NADIE se los compensa, así que el contenido arranca a 32+10 = 42px del borde del .content (la maqueta lo dibuja a 32px). Es una desviación de 10px, uniforme y simétrica en los dos lados: se ve como un marco algo más generoso, no como un fallo. NO se corrige aquí porque la única forma de hacerlo sería tocar .row (prohibido) o restarle 10px al padding del .content (rompería las vistas cuyo contenido no va dentro de una columna). · entre dos columnas hermanas el hueco es de 20px, no de 20-20=0. Es un fichero de plugin: PROHIBIDO editarlo (regla "NO TOCAR PLUGINS"). Queda documentado para que la decisión la tome el cliente, no un agente. ─────────────────────────────────────────────────────────────────────────── */ /* ═══ 3 · CABECERA DE PÁGINA ════════════════════════════════════════════════ Maqueta: .tit-pag + .page-title (24px/700) + .page-sub (13.5px tenue) Marcado real (54-55 repeticiones idénticas), dentro de .row > .col-sm-12:
…

Título

Subtítulo

Los botones van ANTES en el HTML y suben a la derecha por el float. ─────────────────────────────────────────────────────────────────────────── */ /* core.css:126 → font-size:20px, font-weight:400, line-height:28px, margin-top:7px, padding-bottom:8px y un border-bottom:1px solid #e4e7ed. Misma especificidad (0,1,0): ganamos por orden de carga, sin !important. */ .page-title{ font-size:var(--d21-txt-titulo); /* 24px */ font-weight:700; color:var(--d21-texto); letter-spacing:-.3px; line-height:1.25; border-bottom:0; /* fuera la línea gris de core.css:126 */ padding-bottom:0; margin:0 0 var(--d21-e5); /* 24px por debajo cuando NO hay subtítulo */ } /* El margin-top NEGATIVO (4 - 24 = -20px) es el truco de la especificación: · si HAY subtítulo (58 de las 60 vistas) se come los 24px del título y el subtítulo queda a 4px, como en la maqueta (.page-sub{margin:var(--e1) 0 0}); · si NO lo hay (2 vistas), el título conserva intactos sus 24px. Por eso no hace falta ninguna regla ".page-title + .page-title-alt". */ .page-title-alt{ font-size:var(--d21-txt-sub); /* 13.5px */ color:var(--d21-texto-suave); margin:calc(var(--d21-e1) - var(--d21-e5)) 0 var(--d21-e5); line-height:1.45; } /* El HTML lleva class="text-muted page-title-alt". .text-muted (core.css:553, #98a6ad) es propiedad de data21-components.css. Esta regla de 0,2,0 asegura el color del subtítulo pase lo que pase con .text-muted y en cualquier orden de carga. AVISO A components: no declares color en ".text-muted.page-title-alt". */ .text-muted.page-title-alt{ color:var(--d21-texto-suave); } /* ═══ 4 · TÍTULO DE BLOQUE DENTRO DE TARJETA ════════════════════════════════ Marcado real:

…

core.css:143 → 16px/600, letter-spacing .04em y line-height:16px (que corta los descendentes de las "g" y las "p": subirlo a 1.4 es parte del arreglo). OJO: el margen efectivo NO lo da esta regla, lo da la utilidad m-t-0/m-b-20 que el HTML siempre acompaña y que lleva !important. Por eso el punto 6 (reescala de utilidades) es lo que de verdad cambia el aire de estos títulos. ─────────────────────────────────────────────────────────────────────────── */ .header-title{ font-size:15px; font-weight:700; letter-spacing:.02em; line-height:1.4; color:var(--d21-texto); text-transform:none; margin-bottom:var(--d21-e4); } /* ═══ 5 · TARJETA ═══════════════════════════════════════════════════════════ Maqueta líneas 140-141. Es el cambio de una sola regla con más impacto del proyecto: 86 usos de .card-box. core.css:347 → padding:10px, border:0, border-radius:0, sin sombra. Misma especificidad (0,1,0): ganamos por orden, sin !important. ─────────────────────────────────────────────────────────────────────────── */ .card-box{ background:var(--d21-superficie); border:1px solid var(--d21-borde); border-radius:var(--d21-r-l); /* 14px */ box-shadow:var(--d21-sombra); padding:var(--d21-e5); /* 24px (antes 10px) */ margin-bottom:var(--d21-e5); /* 24px (antes 20px) */ } /* (a) Tarjeta anidada: panel.php mete .card-box dentro de .card-box. Sin esto se apilarían dos sombras y el dashboard quedaría sucio. */ .card-box .card-box{ box-shadow:none; } /* (b) El card-box TRANSPARENTE de panel.php:41
El style inline solo mata background y border: se quedaría con 14px de radio, la sombra y 24px de padding flotando en el aire sobre el fondo. Se neutraliza por atributo (0,2,0 + inline). Los !important son necesarios porque hay que vencer también nuestra propia regla base y cualquier utilidad de padding o margen con !important que caiga encima. */ .card-box[style*="background:none"], .card-box[style*="background: none"]{ box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin-bottom:0 !important; } /* (c) Las tarjetas-botón del dashboard SÍ llevan el tratamiento completo. Van DESPUÉS de (a) porque están anidadas dentro del card-box transparente y (a) les habría quitado la sombra de reposo. height:100% las iguala dentro de la fila de Isotope. NOTA: Isotope (panel.php:505) calcula posiciones al arrancar; como el tema se carga en el , las alturas ya son las nuevas cuando corre. No hay que disparar isotope('layout'). */ .item-menu .card-box{ height:100%; box-shadow:var(--d21-sombra); transition:box-shadow var(--d21-t), transform var(--d21-t); } .item-menu .card-box:hover{ box-shadow:var(--d21-sombra-alta); transform:translateY(-2px); } /* ═══ 6 · REESCALA DE LAS UTILIDADES DE ESPACIADO ═══════════════════════════ Es LA ÚNICA forma de subir el ritmo vertical del panel: core.css:168-255 las define TODAS con !important y el HTML las usa más de 350 veces (m-b-20 sola son 136 usos: es el separador de bloques estándar del panel). Se respetan los nombres — el marcado de las 42 vistas no cambia — y se reasignan los valores a la escala de la maqueta. El !important es obligatorio: las originales ya lo llevan y tienen la misma especificidad (0,1,0), así que sin él la que ganaría sería la de core.css. ─────────────────────────────────────────────────────────────────────────── */ /* cero */ .m-0 { margin:0 !important; } .m-t-0{ margin-top:0 !important; } .m-b-0{ margin-bottom:0 !important; } .p-0 { padding:0 !important; } .p-t-0{ padding-top:0 !important; } .p-b-0{ padding-bottom:0 !important; } /* 5px → --d21-e1 (4px) */ .m-t-5{ margin-top:var(--d21-e1) !important; } .m-b-5{ margin-bottom:var(--d21-e1) !important; } .m-l-5{ margin-left:var(--d21-e1) !important; } .m-r-5{ margin-right:var(--d21-e1) !important; } /* 10px → --d21-e2 (8px) */ .m-t-10{ margin-top:var(--d21-e2) !important; } .m-b-10{ margin-bottom:var(--d21-e2) !important; } .m-l-10{ margin-left:var(--d21-e2) !important; } .m-r-10{ margin-right:var(--d21-e2) !important; } .p-t-10{ padding-top:var(--d21-e2) !important; } .p-b-10{ padding-bottom:var(--d21-e2) !important; } /* 15px → --d21-e4 (16px) */ .m-t-15{ margin-top:var(--d21-e4) !important; } .m-b-15{ margin-bottom:var(--d21-e4) !important; } .m-l-15{ margin-left:var(--d21-e4) !important; } .m-r-15{ margin-right:var(--d21-e4) !important; } /* 20px → --d21-e5 (24px) ← el salto que da el aire de la maqueta */ .m-t-20{ margin-top:var(--d21-e5) !important; } .m-b-20{ margin-bottom:var(--d21-e5) !important; } /* 30px → --d21-e6 (32px) */ .m-t-30{ margin-top:var(--d21-e6) !important; } .m-b-30{ margin-bottom:var(--d21-e6) !important; } /* 40px → --d21-e7 (48px) */ .m-t-40{ margin-top:var(--d21-e7) !important; } /* padding */ .p-20{ padding:var(--d21-e5) !important; } /* 20 → 24 */ .p-30{ padding:var(--d21-e6) !important; } /* 30 → 32 */ /* sin !important: la original de core.css:192 tampoco lo lleva y hoy tiene CERO usos en las 42 vistas. No hay razón para escalar la prioridad. */ .p-l-r-10{ padding-left:var(--d21-e3); /* 10 → 12 */ padding-right:var(--d21-e3); } /* ═══ 7 · BARRA DE BOTONES DE CABECERA (#botonesEdicion) ════════════════════ ESTE BLOQUE ES PROPIEDAD EXCLUSIVA DE ESTE FICHERO. data21-components.css tiene PROHIBIDO escribir ninguna regla que contenga #botonesEdicion. Marcado real, repetido 54-55 veces sin variación: Tres problemas que resolver: (a) el style="width:180px" INLINE reparte 90px por botón; con el padding de la maqueta (10px 18px) "Guardar" se partiría en dos líneas; (b) .btn-group-justified fuerza display:table + table-layout:fixed y sus hijos a display:table-cell;width:1% — hay que anularlo SOLO AQUÍ (en el resto de la app las otras 55 botoneras justified se respetan); (c) bootstrap.min.css está parcheado con ".btn-sm{margin-top:10px; margin-bottom:10px}" y eso descuadra la barra. ⚠ ROMPEDOR #1 — PROHIBIDO poner display:inline-flex en .btn a secas. La maqueta lo hace (línea 46) pero en el panel hay 55 botoneras .btn-group-justified que dependen de display:table-cell. Aquí el hijo va inline-block, no flex. ─────────────────────────────────────────────────────────────────────────── */ #botonesEdicion{ width:auto !important; /* !important: vence el style="width:180px" INLINE */ float:right; display:inline-flex; /* #id (1,0,0) > .btn-group-justified (0,1,0): sin !important */ align-items:center; gap:var(--d21-e2); /* 8px, como .tit-pag .btns de la maqueta */ table-layout:auto; border-collapse:separate; vertical-align:middle; margin-bottom:var(--d21-e5) !important; /* !important: la clase m-b-20 del HTML ya lo lleva */ } /* 1,1,0 vence al 0,2,0 de ".btn-group-justified>.btn": no hace falta !important */ #botonesEdicion > .btn{ display:inline-block; float:none; width:auto; vertical-align:middle; } /* mata el margin-left:-1px que .btn-group pone entre botones pegados; el separador ahora es el gap del contenedor. 1,2,0 > 0,3,0 de bootstrap */ #botonesEdicion > .btn + .btn{ margin-left:0; } /* ── JERARQUÍA DE LA BARRA: "Volver" DEJA DE SER EL BOTÓN MÁS LLAMATIVO ───── El marcado de las 55 cabeceras es Volver ← navegación inocua Guardar ← acción principal Verificado que los 58 .btn-danger que hay dentro de #botonesEdicion son TODOS el "Volver" (LABEL_VOLVER): no hay ningún borrado escondido en esa barra. Con el tema, "Volver" quedaba como el ÚNICO botón sólido de vistas como clientes.php — rojo, arriba a la derecha — mientras "Eliminar", que sí destruye un registro, era una pastilla blanca con un punto de 6px en la botonera del grid. El mismo rojo #f05050 significaba "salir de aquí" y "destruir un registro" según la pantalla, y la jerarquía estaba invertida. Aquí "Volver" baja a botón secundario neutro (blanco, borde gris) y el rojo se reserva para lo destructivo. "Guardar" se queda verde y pasa a ser el único botón sólido de la barra, que es lo que la maqueta dibuja. NO se toca .btn-danger a secas: los 44 botones rojos que hay fuera de esta barra (ELIMINAR de las galerías, "Ver PDF"…) siguen igual. !important: motivo (b) — components.css escribe background-color, border y color con !important en .btn-danger; este selector (1,2,0) los vence. FRONTERA 2 respetada: #botonesEdicion es de este fichero, no de components. */ #botonesEdicion > .btn.btn-danger, #botonesEdicion > .btn.btn-danger:active, #botonesEdicion > .btn.btn-danger.active{ background-color:var(--d21-superficie) !important; border:1px solid var(--d21-borde-fuerte) !important; color:var(--d21-texto-suave) !important; } #botonesEdicion > .btn.btn-danger:hover, #botonesEdicion > .btn.btn-danger:focus{ background-color:var(--d21-superficie-4) !important; border-color:var(--d21-texto-tenue) !important; color:var(--d21-texto) !important; } #botonesEdicion > .btn.btn-danger i{ color:var(--d21-texto-tenue); } /* anula el parche ".btn-sm{margin-top:10px;margin-bottom:10px}" SOLO aquí y sube el botón al tamaño de la maqueta (.nuevo .btn{padding:10px 18px}). 1,2,0 vence al 0,1,0 de .btn-sm: sin !important. */ #botonesEdicion > .btn.btn-sm{ padding:10px 18px; font-size:var(--d21-txt-campo); line-height:1.4; margin-top:0; margin-bottom:0; } /* ═══ 8 · FLOATS, CLEARFIX Y RESTOS DE MAQUETACIÓN ══════════════════════════ */ /* Se dejan tal cual: Bootstrap ya los declara con !important y el layout de las 54 cabeceras depende de ellos. Documentados para que nadie los "limpie". */ .pull-right{ float:right; } .pull-left { float:left; } /* .clearfix — NO TOCAR. Por los formularios hay decenas de
que son parches de float del maquetador original. Algunos rompen el ritmo vertical, pero OTROS separan de verdad dos bloques flotados: ocultarlos o anular su margin-top haría que campos contiguos se solapen. Se quedan exactamente como están. Anotado como deuda visual conocida. */ /* .tmcontent — div de trabajo que pie.php:6 cuela como
. Al ser una columna con 10px de padding lateral añade altura muerta al final de TODAS las páginas, justo debajo del footer, así que hay que sacarlo del flujo. ⚠ NO SE PUEDE USAR display:none. El div NO está vacío en runtime: · clientes_documentos.php:268-278 y :349-352 · c2.php:68 inyectan ahí por JS los de Chart.js del informe de cumplimiento (doc_10B), los renderizan y los convierten con canvas.toDataURL() para subirlos a ajax/upload_chart.php ANTES de enviar el formulario que genera el documento. Con el padre en display:none el canvas queda a 0×0 y toDataURL() devuelve la cadena literal 'data:,' (6 bytes) — el documento sale sin gráficas. Medido en vivo: dentro de .tmcontent {canvasW:0, canvasH:0, dataUrlLen:6}; en un contenedor visible {canvasW:1290, dataUrlLen:31710}. Solución: se saca de la vista SIN quitarle la caja. Chart.js necesita que el contenedor tenga ancho > 0 para dimensionar el canvas, así que se le da un ancho fijo generoso y se manda fuera del viewport. */ .tmcontent{ position:absolute; left:-99999px; top:0; width:1000px; height:auto; overflow:visible; padding:0; /* clip nunca: recortaría el canvas que Chart.js va a serializar */ } /* ═══ 9 · PANTALLA DE ACCESO (control/index.php) ═══════════════════════════ index.php NO incluye cabecera.php: cargaba solo bootstrap/core/components/ icons/pages/responsive y se había quedado fuera del rediseño, con el logo TEAL logo_dark.png (#217f99) y el botón ROSA .btn-pink (#fb6d9d). El producto tenía dos identidades y la primera que veía el cliente era la equivocada. Ahora index.php carga las 5 hojas del tema, usa logo_1.png (el DATA21 negro + naranja #eb8500, 512×512) y el botón pasa a .btn-info, que el tema ya pinta con el naranja de marca. Aquí solo va lo propio de esa página: no hay topbar, ni sidebar, ni .content-page, así que ningún selector de este bloque se cruza con shell. ─────────────────────────────────────────────────────────────────────────── */ .account-pages{ background:var(--d21-fondo); /* mata el ../images/agsquare.png de pages.css:1836 */ } /* El ancho (420px) y el 90% de <768px ya los da pages.css:1841 y responsive.css:43. NO se redeclaran: .wrapper-page la usa también solo_empresas.php, que va dentro de la cáscara normal. */ .wrapper-page > .card-box{ padding:var(--d21-e6) var(--d21-e5) var(--d21-e5); border:1px solid var(--d21-borde); border-radius:var(--d21-r-l); box-shadow:var(--d21-sombra-alta); } .wrapper-page .panel-heading{ padding:0 0 var(--d21-e5); border:0; background:transparent; } .wrapper-page .panel-heading h3{ font-size:18px; font-weight:600; color:var(--d21-texto); margin:var(--d21-e4) 0 0; } .wrapper-page .panel-body{ padding:0; } .wrapper-page .form-horizontal{ margin-top:0 !important; } /* (c) .m-t-20 lleva !important */ .wrapper-page .form-group{ margin-bottom:var(--d21-e4); } .wrapper-page label[for="recordarme"]{ font-weight:400; font-size:var(--d21-txt-sm); color:var(--d21-texto-suave); margin:0; } .wrapper-page .btn-block{ height:42px; font-weight:600; letter-spacing:.4px; } /* El logo de acceso. logo_1.png es un lienzo 512×512 con la marca en el bbox (9,184)-(496,294): el 57% del alto es transparente. En vez de crear un asset nuevo (prohibido tocar assets/images/) se recorta por CSS con object-fit:cover. escala de cover = 220/512 = 0,4297 → imagen renderizada 220×220 centro de la marca en la imagen = y 239 × 0,4297 = 102,7 px para llevarlo al centro de una caja de 52px hace falta un offset de 26 − 102,7 = −76,7 px sobre un desbordamiento de 220 − 52 = 168 px → object-position vertical = 76,7 / 168 = 45,6 % Resultado medido: la marca se dibuja a 209×47 px, en negro + #eb8500. */ .wrapper-page .d21-logo-acceso{ display:inline-block; width:220px; height:52px; object-fit:cover; object-position:center 45.6%; } /* ═══════════════════════════════════════════════════════════════════════════ FIN data21-layout.css Nada de lo que hay aquí toca .btn (fuera de #botonesEdicion), .form-*, .topbar, .side-menu, .footer, .content-page a secas, .flexigrid, .modal ni .nav-tabs. Esos selectores son de otros ficheros del tema. ═══════════════════════════════════════════════════════════════════════════ */