/* ============================================ theme/default/css/style.css Estilos base. Personalizable por sitio/tema. TODO lo que se personaliza por cliente/tema vive en las variables de :root de aqui abajo. No hace falta tocar nada mas adelante en el archivo para cambiar colores. BOTONES: --btn-bg acepta tanto un color solido (ej: #333333) como un degradado (ej: linear-gradient(135deg, #ff6a00, #ee0979)). Ambos funcionan igual, es la misma propiedad CSS "background" por debajo. ============================================ */ :root { /* Paleta general del sitio -- gris neutro con acento azul-slate frio, para que combine con los tonos azules/morados del encabezado en vez de pelearse con el. */ --color-primary: rgba(247, 0, 255, 0.58); --color-primary-hover: rgba(185,0,191,0.58); --color-bg: #edf3fc; /* Fondo REAL de la pagina (body) -- color solido, degradado, o url('...') a una imagen tileada. Empieza igual que --color-bg de arriba (mismo aspecto que ya tenia el sitio) hasta que se elija algo distinto desde el Editor Visual. */ --page-bg: #edf3fc; /* Solo se pone en "repeat" cuando --page-bg es una imagen -- ver el comentario grande junto a "background:" en el body, mas abajo. */ --page-bg-repeat: no-repeat; --color-card-bg: rgba(255, 255, 255, 0.51); /* Texto/fuente/enlaces DENTRO de las tarjetas -- afectan a TODAS las tarjetas del sitio (laterales y centrales por igual), una sola variable compartida por cada una. Los encabezados (h1/h2/ h3) y los enlaces FUERA de tarjetas nunca las usan -- siguen en --color-primary como siempre. */ --card-text-color: #1e2328; --card-link-color: #0f8fff; /* Encabezados de tarjeta -- INDEPENDIENTES de --color-primary (el color de marca que usan breadcrumb/botones/encabezados fuera de tarjetas). Arranca en el mismo morado, para que se vea igual hasta que se elija algo distinto. Sin tamano por default (queda "inherit" via el respaldo de la regla CSS) -- h1/h2/h3 conservan su jerarquia natural de tamanos hasta que se elija uno explicito, que entonces aplica IGUAL a los 3 (se trata como "el titulo de la tarjeta", un solo concepto, no 3 tamanos independientes). */ --card-heading-color: #5493ff; --card-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --card-font-size: 16px; /* Mismo motivo que --page-bg-repeat -- si --color-card-bg trae un degradado, sin esto se corta en bandas horizontales. Solo se pone en "repeat" cuando --color-card-bg es una imagen. */ --color-card-bg-repeat: no-repeat; /* Footer -- variables PROPIAS, independientes de --color-card-bg/ --card-text-color/etc (las tarjetas). El footer tiene su propio fondo, su propio color de texto, su propio color de enlaces, y su propia imagen si se elige -- nunca comparte con las tarjetas, aunque el mecanismo (los 5 iconos) sea identico. Arrancan en blanco solido / texto oscuro / mismo morado de marca para los enlaces -- mismo aspecto que ya tenia el footer antes de que existiera esta paleta. */ --footer-bg: #4f91ba; --footer-bg-repeat: no-repeat; --footer-text-color: #ffffff; --footer-link-color: #ffffff; --footer-font-family: Arial, Helvetica, sans-serif; --footer-font-size: 12px; --color-border: #d9dde3; --color-text: #1e2328; --color-text-muted: #6b7280; /* Menu del header (.site-nav) -- fondo y color de texto de los links. El fondo acepta rgba() para conservar el efecto de vidrio esmerilado (semitransparente) sobre el banner. Ambas se editan desde el Editor Visual (iconos de paleta del menu). */ --menu-bg: linear-gradient(to bottom, rgba(223,64,255,0.46), rgba(212,0,255,0.46) 50%, rgba(159,0,191,0.46)); --menu-text: #ffffff; /* Hover de los links del menu y fondo del submenu -- SOLIDOS (nunca degradado), calculados por el servidor como un tono 25% mas claro de --menu-bg cada vez que ese color cambia, para que siempre vayan a juego sin importar que color elijas para el menu. */ --menu-hover-bg: rgba(223,64,255,0.46); --menu-submenu-bg: rgba(223,64,255,0.46); /* Circulo del logo (header.tpl) -- SOLO el matiz RGB, SIN alpha. header.tpl arma el color final como rgba(var(--x), N) con su PROPIA opacidad fija por cada tamano de pantalla (mas fuerte en escritorio, mas discreta en movil) -- eso NUNCA se toca aqui, solo el tono/color base se comparte entre los 3 breakpoints. */ --logo-border-rgb: 255, 255, 255; --logo-shadow-rgb: 188, 163, 255; /* Campos de formulario (inputs) - blanco solido con borde gris clarito, letras oscuras */ --input-bg: #ffffff; --input-text: #1e2328; --input-border: #9d00ff; --input-border-focus: #f7a3ff; --input-placeholder: #9ca3af; /* Botones: cambia --btn-bg por un color solido o un linear-gradient(...) — ambos casos funcionan igual */ --btn-bg: rgba(188, 163, 255, 0.59); --btn-bg-hover: rgba(141,122,191,0.59); --btn-shadow: 0 6px 20px rgba(188, 163, 255, 0.35); --btn-border: 1px solid rgba(255, 255, 255, 0.15); --btn-text: #8b00cb; --btn-radius: 50px; /* Tramo ACTUAL del breadcrumb (el ultimo, el que muestra donde estas parado) -- el servidor la recalcula cada vez que se guarda --btn-bg: mismo degradado invertido si --btn-bg tiene uno, o un tono mas oscuro si es solido. Nunca se edita directo, es siempre derivada. */ --btn-bg-current: rgba(141,122,191,0.59); /* Mensajes */ --color-error-bg: #fdecea; --color-error-border: #f5b7b1; --color-error-text: #c0392b; --color-success-bg: #eafaf1; --color-success-border: #a9dfbf; --color-success-text: #1e8449; --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 8px; /* ============================================ Paleta "Vivos" para la extension de Graficas (ApexCharts) -- 12 tonos solidos estandar. Canvas/SVG no puede leer estas variables directo -- ChartColorsHelper.php (PHP, servidor) las lee con una regex y las manda ya resueltas como hex. Las otras 2 paletas del selector NO viven aqui: - "Tonalidades del sitio" se CALCULA en PHP a partir de --color-primary y --color-primary-hover de arriba (aclarando/ oscureciendo) -- cambiar esas 2 variables ya actualiza esa paleta sola, sin tocar nada mas. - "Bootstrap 5" son los 9 colores oficiales de Bootstrap, fijos por definicion (no tiene caso hacerlos "personalizables" via CSS, dejarian de ser los colores de Bootstrap) -- viven como constante en PHP. ============================================ */ --chart-vivos-1: #dc3545; --chart-vivos-2: #e83e8c; --chart-vivos-3: #fd7e14; --chart-vivos-4: #ffc107; --chart-vivos-5: #6c757d; --chart-vivos-6: #84cc16; --chart-vivos-7: #198754; --chart-vivos-8: #20c997; --chart-vivos-9: #0dcaf0; --chart-vivos-10: #0d6efd; --chart-vivos-11: #6610f2; --chart-vivos-12: #d63384; --menu-bg-base: rgba(212, 0, 255, 0.46); --menu-bg-gradient: 1; --menu-bg-invert: 1; --input-border-base: #9d00ff; --input-border-gradient: 0; --input-border-invert: 0; --input-border-focus-base: #f7a3ff; --input-border-focus-gradient: 0; --input-border-focus-invert: 0; --color-primary-base: rgba(247, 0, 255, 0.58); --color-primary-gradient: 0; --color-primary-invert: 0; --btn-bg-base: rgba(188, 163, 255, 0.59); --btn-bg-gradient: 0; --btn-bg-invert: 0; --btn-text-base: #8b00cb; --btn-text-gradient: 0; --btn-text-invert: 0; --card-link-color-base: #0f8fff; --card-link-color-gradient: 0; --card-link-color-invert: 0; --footer-bg-base: #4f91ba; --footer-bg-gradient: 0; --footer-bg-invert: 0; --footer-link-color-base: #ffffff; --footer-link-color-gradient: 0; --footer-link-color-invert: 0; --card-heading-font-size: 18px; --color-card-bg-base: rgba(255, 255, 255, 0.51); --color-card-bg-gradient: 0; --color-card-bg-invert: 0; --comment-root-bg-base: #f400e4; --comment-root-bg-gradient: 0; --comment-root-bg-invert: 0; --comment-reply-bg-base: #b300ff; --comment-reply-bg-gradient: 0; --comment-reply-bg-invert: 0; } * { box-sizing: border-box; } html { /* SIN fondo aqui a proposito -- vive en el body (ver abajo). min-height (no height) para que la caja pueda crecer con el contenido en vez de quedarse fija a una pantalla de alto. */ min-height: 100%; } body { font-family: var(--font-base); /* El fondo vive AQUI (no en html) -- y SOLO aqui, nunca en los dos lados a la vez: ponerlo en ambos hacia que un color con transparencia se apilara en dos capas donde las cajas se traslapan, viendose dos tonos distintos del mismo color. El fondo vive AQUI (no en html) -- el body con min-height:100% + display:flex CRECE hasta el alto real del contenido, asi que un degradado (que se dibuja del tamano exacto de su caja) cubre toda la pagina. En html no funcionaba: su caja se quedaba en una pantalla de alto y el degradado se cortaba ahi (el color solido si se veia bien porque un solido se pinta en toda la caja sin importar el tamano -- por eso fallaba SOLO con degradado). --page-bg-repeat SOLO se pone en "repeat" cuando --page-bg es una imagen (lo pone el JS al elegirla) -- para color/degradado se queda en no-repeat, si no un degradado se corta en un tile chico y se repite en bandas horizontales visibles. SIN background-attachment:fixed a proposito -- eso dejaria una imagen pegada a la ventana en vez de deslizarse tileandose junto con la pagina. */ background: var(--page-bg); background-repeat: var(--page-bg-repeat, no-repeat); color: var(--color-text); margin: 0; padding: 0; line-height: 1.5; min-height: 100%; display: flex; flex-direction: column; /* NECESARIO para que la barra de iconos del fondo de pagina (.nx-page-bg-bar, position:absolute) ancle su posicion aqui -- sin esto, se ancla al elemento raiz del documento en vez del body. display:flex/flex-direction no le afectan a esto para nada. */ position: relative; } /* ---------- Header ---------- */ .site-header { background: var(--color-card-bg); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .site-header-inner { max-width: 960px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; } .site-logo { font-weight: bold; font-size: 20px; color: var(--color-text); text-decoration: none; } .site-logo img { max-height: 40px; } .site-nav { position: absolute; top: 90%; display: flex; align-items: center; gap: 6px; background: var(--menu-bg); padding: 8px 10px; border-radius: 50px; backdrop-filter: blur(3px); z-index: 100; } .site-nav-align-right { right: 24px; left: auto; transform: translateY(-50%); } .site-nav-align-left { left: 24px; right: auto; transform: translateY(-50%); } .site-nav-align-center { left: 50%; right: auto; transform: translate(-50%, -50%); } .nx-nav-item-has-sub { position: relative; display: inline-flex; } .nx-nav-submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--menu-submenu-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 0; min-width: 160px; z-index: 50; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); margin-top: 0; overflow: hidden; } .nx-nav-item-has-sub:hover .nx-nav-submenu { display: block; } .nx-nav-submenu a { display: block; padding: 8px 14px; white-space: nowrap; font-size: 14px; color: var(--btn-text); text-decoration: none; border-radius: 0; } .nx-nav-submenu a:hover { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); color: var(--btn-text); transform: none; } .site-nav a, .site-nav .nx-nav-parent-label { margin-left: 0; padding: 8px 18px; border-radius: 50px; color: var(--menu-text); text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease; } .site-nav a:hover, .site-nav .nx-nav-parent-label:hover { background: var(--menu-hover-bg); color: #000000; transform: scale(1.05); } /* ---------- Boton de hamburguesa (solo movil) ---------- */ .nx-mobile-menu-toggle { display: none; } /* ---------- Main / cards ---------- */ .site-main { max-width: 480px; margin: 48px auto; padding: 0 20px; flex: 1 0 auto; width: 100%; box-sizing: border-box; } .card { background: var(--color-card-bg); background-repeat: var(--color-card-bg-repeat, no-repeat); /* --card-text-color/--card-font-family/--card-font-size afectan a TODAS las tarjetas del sitio a la vez (laterales y centrales por igual) -- misma variable compartida, no una por tarjeta. inherit como respaldo -- si nunca se ha elegido nada, se ve exactamente igual que antes (heredado normal del body). */ color: var(--card-text-color, inherit); font-family: var(--card-font-family, inherit); font-size: var(--card-font-size, inherit); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 32px; } /* Encabezados de tarjeta -- variables PROPIAS (--card-heading-color/--card-heading-font-size), independientes de --color-primary (que sigue siendo el color del breadcrumb/botones/ encabezados FUERA de tarjetas) -- mas especifico que ".card" solo (clase + etiqueta vs nomas clase), le gana en la cascada a proposito. El respaldo es --color-primary, para que se vea igual que siempre hasta que se elija un color distinto. */ .card h1, .card h2, .card h3 { color: var(--card-heading-color, var(--color-primary)); font-size: var(--card-heading-font-size, inherit); } /* Enlaces DENTRO de una tarjeta -- variable PROPIA (--card-link-color), independiente de --color-primary (que sigue siendo el color de enlaces en el resto del sitio, fuera de tarjetas). Mas especifico que la regla global "a { color: ... }", le gana adentro de una tarjeta. */ .card a { color: var(--card-link-color, var(--color-primary)); } /* Texto justificado en cualquier parrafo/lista dentro de una tarjeta - aplica tanto a bloques normales como a lo que se cargue por Markdown (marked.js genera

/

  • normales, que ya heredan esto solos). hyphens:auto es OBLIGATORIO aqui - sin el, el justificado en columnas angostas deja huecos blancos feos entre palabras. */ .card p, .card li { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /* El
    que genera Markdown (---) rompe la lectura como raya visual - se deja nomas como espacio en blanco entre secciones, sin linea. */ .card hr { border: none; height: 24px; margin: 0; } .text-center { text-align: center; } h1, h2, h3 { margin-top: 0; color: var(--color-primary); } a { color: var(--color-primary); } a:hover { color: var(--color-primary-hover); } /* ---------- Formularios ---------- */ label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; color: var(--color-text); } input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 10px 12px; margin-bottom: 16px; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); border-radius: 4px; font-size: 14px; font-family: var(--font-base); } input::placeholder, textarea::placeholder { color: var(--input-placeholder); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--input-border-focus); } /* ---------- Botones ---------- */ /* Personalizar SOLO cambiando --btn-bg / --btn-bg-hover / --btn-text / --btn-shadow / --btn-border arriba en :root. --btn-bg y --btn-bg-hover aceptan color solido o degradado, es la misma propiedad "background". */ button, .btn, input[type="submit"] { padding: 10px 22px; border: var(--btn-border); border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-text); cursor: pointer; font-size: 14px; font-weight: 600; font-family: var(--font-base); margin-top: 6px; box-shadow: var(--btn-shadow); transform: scale(1); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease; } button:hover, .btn:hover, input[type="submit"]:hover { background: var(--btn-bg-hover); opacity: 0.95; transform: scale(1.05); } .btn { display: inline-block; margin: 6px 6px 0 6px; } /* ---------- Mensajes ---------- */ .errors { background: var(--color-error-bg); border: 1px solid var(--color-error-border); color: var(--color-error-text); padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; } .errors ul { margin: 0; padding-left: 18px; } .success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; } .success a { color: var(--color-success-text); font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { /* Fondo/texto/fuente PROPIOS, independientes de --color-card-bg (las tarjetas) -- paleta dedicada del footer, ver los 5 iconos flotantes mas abajo en layout_render.php. */ background: var(--footer-bg); background-repeat: var(--footer-bg-repeat, no-repeat); color: var(--footer-text-color); font-family: var(--footer-font-family); font-size: var(--footer-font-size); border-top: 1px solid var(--color-border); margin-top: 60px; flex-shrink: 0; } .site-footer a { color: var(--footer-link-color, var(--color-primary)); } .site-footer-inner { max-width: 960px; margin: 0 auto; padding: 20px; text-align: center; } /* ---------- NXCaptcha ---------- */ .nxc-wrap { margin-bottom: 4px; } /* ================================================== Layouts (paginas/articulos) - 3 columnas ================================================== */ /* .site-main viene fijo a 480px (perfecto para login/registro). Las paginas que necesitan mas espacio (como los layouts de 3 columnas) le pasan 'main_class' => 'site-main-wide' al header.tpl explicitamente - nada de adivinar por CSS que contenido trae adentro. 90% del ancho REAL del dispositivo (no un px fijo) - responsive de verdad en cualquier pantalla: celular, tablet, monitor grande, lo que sea. */ .site-main-wide { max-width: 90% !important; width: 90% !important; margin-top: 0 !important; } .site-header-inner-wide { max-width: 100% !important; width: 100% !important; } /* Envuelve la tabla de 3 columnas. Aqui vive el gap horizontal real de la pagina (izquierda/derecha) - a proposito FUERA de .card, para que la regla ".card > *" (mas abajo) nunca lo pueda pisar sin querer. El contenido debe llenar la mayor parte de la pantalla - los extremos son solo un respiro chico, no un tercio del ancho. */ .nx-layout-outer { max-width: 1800px; margin: 24px auto; padding: 0 8px; box-sizing: border-box; } /* ================================================== Breadcrumb - Inicio > Categoria > ... > Titulo. Estilo "flechas interconectadas" (punta triangular a la derecha, muesca triangular a la izquierda que encaja con la punta de la anterior - como una K al reves). El envoltorio de una categoria con submenu (.nx-breadcrumb- item-has-sub) NUNCA lleva clip-path/overflow el mismo - eso recortaria tambien al submenu que vive adentro. La forma vive en el de adentro; el envoltorio solo da posicion. ================================================== */ .nx-breadcrumb { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; background: none; border: none; padding: 0; margin: 16px 0; } .nx-breadcrumb-sep { display: none; } .nx-breadcrumb > a, .nx-breadcrumb > span:not(.nx-breadcrumb-item-has-sub), .nx-breadcrumb-item-has-sub > a { display: inline-flex; align-items: center; padding: 10px 28px 10px 30px; background: var(--btn-bg); color: var(--btn-text); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; position: relative; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); } .nx-breadcrumb > a:hover { filter: brightness(1.12); color: var(--btn-text); text-decoration: none; } /* El primero de la cadena (Inicio) no recibe nada de otro lado - lado izquierdo plano, sin muesca. */ .nx-breadcrumb > a:first-child, .nx-breadcrumb-item-has-sub:first-child > a { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left: 18px; } /* Todos menos el primero se traslapan 16px para que la muesca de uno encaje exacto con la punta del anterior, sin dejar hueco entre ellos. */ .nx-breadcrumb > *:not(:first-child) { margin-left: -16px; } /* El tramo actual (el ultimo) - mismo rosa, pero en degradado vertical en vez de plano, para distinguirlo sin dejar de verse parte de la misma cadena de flechas. */ .nx-breadcrumb > a:last-child, .nx-breadcrumb > span:last-child:not(.nx-breadcrumb-item-has-sub), .nx-breadcrumb-item-has-sub:last-child > a { /* SIN fondo especial por default -- se ve exactamente igual que "Inicio" y las demas categorias hasta que le pasas el mouse encima (ver :hover mas abajo). Antes se veia siempre distinto, como si estuviera permanentemente "seleccionado" -- eso confundia, porque parecia que esa categoria era la pagina actual aunque no lo fuera. */ } .nx-breadcrumb > a:last-child:hover, .nx-breadcrumb > span:last-child:not(.nx-breadcrumb-item-has-sub):hover, .nx-breadcrumb-item-has-sub:last-child > a:hover { /* --btn-bg-current -- se recalcula del lado del SERVIDOR cada vez que se guarda el color de fondo del breadcrumb (--btn-bg): si ese tiene degradado marcado, aqui se guarda el MISMO degradado pero invertido (arriba<->abajo). Si es un color solido, aqui se guarda un tono mas oscuro del mismo color -- SOLO se ve al pasar el mouse por el tramo actual, para confirmar "aqui estas parado" sin que se vea permanentemente distinto al resto. */ background: var(--btn-bg-current); filter: none; } /* El envoltorio de una categoria con subcategorias - a proposito SIN clip-path/overflow aqui (eso recortaria al submenu de adentro). Solo da la posicion relativa para que el submenu se pueda anclar. */ .nx-breadcrumb-item-has-sub { position: relative; display: inline-flex; } .nx-breadcrumb-submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--btn-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 0; min-width: 160px; z-index: 50; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); margin-top: 0; } .nx-breadcrumb-item-has-sub:hover .nx-breadcrumb-submenu { display: block; } .nx-breadcrumb-submenu a { display: block; padding: 8px 14px; white-space: nowrap; font-size: 13px; color: var(--btn-text); text-decoration: none; } .nx-breadcrumb-submenu a:hover { background: rgba(255, 255, 255, 0.15); color: var(--btn-text); } /* Un renglon dentro de un submenu - si esa hija a su vez tiene hijas propias (nietas de la categoria original), se le agrega su propio flyout hacia la DERECHA (no hacia abajo, para no encimarse con el resto del submenu). Con el limite de 3 niveles, esto nunca necesita otro nivel mas de anidacion. */ .nx-breadcrumb-submenu-item { position: relative; } .nx-breadcrumb-submenu-item > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; white-space: nowrap; font-size: 13px; color: var(--btn-text); text-decoration: none; } .nx-breadcrumb-submenu-item > a:hover { background: rgba(255, 255, 255, 0.15); } .nx-breadcrumb-flyout-arrow { opacity: 0.8; font-size: 11px; } .nx-breadcrumb-submenu-flyout { display: none; position: absolute; top: -6px; left: 100%; margin-left: 4px; background: var(--btn-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 0; width: max-content; min-width: 160px; z-index: 60; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } .nx-breadcrumb-submenu-item-has-sub:hover > .nx-breadcrumb-submenu-flyout { display: block; } .nx-layout-table { width: 100%; border-collapse: collapse; } .nx-layout-side-cell { width: 180px; vertical-align: top; } .nx-layout-side-cell-left { padding-right: 16px; } .nx-layout-side-cell-right { padding-left: 16px; } .nx-layout-content-cell { vertical-align: top; } .nx-layout-content-cell img, .nx-layout-side-cell img { max-width: 100%; height: auto; } /* El .card comun trae padding:32px, pensado para un formulario de login de 480px de ancho. En una columna de 180px eso se come mas de un tercio del espacio util - aqui se reduce SOLO para las cards que viven dentro del layout, sin tocar el padding del login/registro. */ .nx-layout-side-cell .card, .nx-layout-content-cell .card { padding: 10px; } /* El bloque de contenido puede venir de CUALQUIER editor (Summernote, o lo que sea que se use despues) y puede traer su propio ancho, margen o padding fijo pensado para vivir suelto en una pagina ancha - eso choca con el espacio real del contenedor donde lo pongamos. Esto OBLIGA a que el bloque siempre llene el 100% real que le demos y respete el padding de la .card (no el suyo propio), sin importar que etiqueta o que medidas traiga escritas por dentro. */ .card > * { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ================================================== Tablas escritas a mano dentro de un Bloque de Contenido (via el boton de tabla del editor) -- mismo estilo visual que ya usa la extension Tablas (extensions/tablas/render.php), para que TODAS las tablas del sitio se vean homogeneas sin importar de donde vengan. Mismas variables CSS del sitio, asi que cada cliente la ve con SU color de marca, no uno fijo. Las tablas de la extension Tablas van con estilo inline (style="" en cada elemento) y un inline siempre le gana a cualquier regla de hoja de estilos -- por eso esto nunca les pisa nada, aunque el selector sea amplio. OJO con ".card > *" de arriba: fuerza padding:0 !important a CUALQUIER hijo directo de .card (asi le llega la tabla a un visitante normal, sin ningun div envolviendo). Por eso el padding real de esta tabla vive en las celdas (th/td), nunca en el mismo -- .card > * jamas lo toca porque nunca le puso padding al
    de por si. ================================================== */ .card table, .nx-layout-plain table { border-collapse: separate; border-spacing: 0; border-radius: calc(var(--radius) * 2); overflow: hidden; border: 2px solid var(--color-primary); background: var(--color-card-bg); font-family: var(--font-base); box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 15%, transparent); } .card table thead tr, .nx-layout-plain table thead tr { background: linear-gradient(180deg, var(--color-primary), var(--color-primary-hover)); } .card table th, .nx-layout-plain table th { padding: 18px 20px; text-align: center; color: #ffffff; font-size: 18px; font-weight: 700; } .card table td, .nx-layout-plain table td { padding: 16px 20px; text-align: center; color: var(--card-text-color, var(--color-text)); border-bottom: 1px solid var(--color-border); } .card table tbody tr:last-child td, .nx-layout-plain table tbody tr:last-child td { border-bottom: none; } .card table tbody tr:nth-child(even) td, .nx-layout-plain table tbody tr:nth-child(even) td { background: var(--color-bg); } @media (max-width: 768px) { /* En celular las columnas laterales NO se despliegan (ni se apilan abajo) - se ocultan por completo. Solo se ve el contenido central. */ .nx-layout-side-cell { display: none !important; } .nx-layout-table, .nx-layout-table tbody, .nx-layout-table tr, .nx-layout-content-cell { display: block !important; width: 100% !important; } /* En celular el gap grande de escritorio no tiene sentido - un margen chico basta y deja mas espacio real para el contenido. */ .nx-layout-outer { padding: 0 16px; } /* ---------- Menu movil: hamburguesa + dropdown vertical ---------- El