/* MAIN SITE CSS */ /* TOKENS DE LAYOUT --page-gutter: canal horizontal de la pagina. Lo consume la cabecera para que logo y menu caigan sobre las mismas lineas verticales que el contenido. Valor por defecto = el canal del sitio (home, landings, docs). Las paginas de aplicacion lo redefinen en su propio skeleton; asi no hace falta tocar esta regla. */ :root { --page-gutter: 6em; /* --page-measure: ancho maximo del contenido que se LEE o se ESCRIBE (prosa, formularios) dentro de un shell a sangre. No se le pone tope al shell: las tablas y listados quieren todo el ancho que haya. El tope es del contenido. Mismo numero que --d-read de docs.css a proposito: es la medida del producto. */ --page-measure: 46rem; } /* Paginas de aplicacion (menu izquierdo + rejilla): el canal lo marca la rejilla, no el sitio. .75rem del .col de Materialize + 1.5rem del contenido = 2.25rem. Lo activa el skeleton con data-layout="app" en el . */ [data-layout="app"] { --page-gutter: 2.25rem; } /* 1em 1.5rem, no 1.5rem: en los cuatro lados el menu creceria 16px por fila. */ [data-layout="app"] .left_menu li a { padding: 1em 1.5rem; } header { padding:0 var(--page-gutter); } #cabecera .logo { margin-top:2px; } #cabecera a { color: #444; } #nav ul li { float:none !important; } #contenido .logo { font-size:6em; line-height:0.8em; } #cabecera li { margin-bottom:0rem; } nav { background-color:transparent !important; color:#444 !important; } /* La hamburguesa (nav a.sidenav-trigger) solo es visible a <=992px, que es el breakpoint de Materialize. El padding del header tiene que cambiar en ESE punto y a un valor constante, no a 800px y a 0: si no, entre 800 y 992 la hamburguesa hereda los 6em y se va muy a la derecha, y por debajo de 800 se pega al borde. 1.5rem = el mismo canal que el contenido. 2026-07-23 */ @media only screen and (max-width: 992px) { /* Se redefine el TOKEN, no el padding: si se fija el padding aqui, las paginas de aplicacion pierden su canal y vuelven al del sitio. Orden importante: :root y [data-layout] empatan a (0,1,0), gana el ultimo. */ :root { --page-gutter: 1.5rem; } /* .col 0.75rem + article 1rem = 1.75rem */ [data-layout="app"] { --page-gutter: 1.75rem; } } @media only screen and (max-width: 800px) { nav li a { margin-left:0px !important; margin-right:0px !important; } } #columna li { float:none; } #timeline .section { /*padding:0px !important;*/ padding:0px; } /* STEP GUIDES */ ol > li { margin:20px 0px; } ol > li img { margin:20px 0px; border: 1px solid #ddd; } /* FOOTER */ footer li { margin-bottom:0.5em; } /* REMOVE MATERIALIZE */ .box_form > select, .box_form div > select:not(.dependent-sub) { display:block !important; } div.box_functions_form code { border-radius:4px; border-style:solid; border-width:1px; border-color:#888; color:#444; padding:3px 4px; } ul.plain { margin-left: 50px; } ul.plain > li { list-style-type: circle !important; } p strong, li strong { font-weight:bold !important; } div > input { opacity: 1 !important; pointer-events:auto !important; position: relative !important; } div > input[type=radio] { margin-right: 10px !important; } /* ============================================================================= COMPONENTES COMPARTIDOS ----------------------------------------------------------------------------- Hasta hoy la misma superficie existia con cinco nombres y tres formas (.set_card, .tool_card, .mem_pane, .skl_pane, .agent_chat_card), y .btn_save estaba declarada DOS veces con rellenos distintos: 9px 20px en Ajustes y 9px 18px en Herramientas. Misma clase, dos valores, dos ficheros. Van con [data-layout="app"] por CASCADA, no por capricho: los