/* Odude: estructura y componentes. Tres anchos (KTD10): PC >= 1024 px, tablet 600-1023 px, celular < 600 px. */
:root {
  --marron: #3e302a;
  --marron-claro: #6b5448;
  --texto: #2b2b2b;
  --texto-suave: #666;
  --borde: #d9d6d3;
  --fondo: #f5f4f2;
  --superficie: #fff;
  --riel: #ebe8e5;
  --error: #a3261d;
  --exito: #2f6b3a;
  --info: #3b5b7a;
  --franja-alto: 56px;
  --columna-ancho: 72px;
  --submenu-alto: 44px;
  /* Los colores que se personalizan (core/tema.py) llegan en un <style> de la página y reemplazan estos. */
  --sobre-principal: #fff;
  --franja: #fff;
  --texto-franja: #2b2b2b;
  --radio: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
a { color: var(--marron-claro); }
img { max-width: 100%; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

/* Fondo gris texturizado del login (el mismo del index anterior). */
.fondo-gris {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background-color: #6b6b6b;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, #7a7a7a 0%, #5a5a5a 70%, #4a4a4a 100%);
  background-attachment: fixed;
}
/* Tarjeta clara: el marrón del logo sobre el gris medio no tiene contraste suficiente. */
.tarjeta-acceso {
  width: min(400px, 100%); padding: clamp(24px, 6vw, 40px);
  background: rgba(250, 248, 246, 0.96); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.tarjeta-acceso__logo { margin: 0 0 24px; }
.tarjeta-acceso__logo img { display: block; width: 100%; height: auto; }
.tarjeta-acceso__titulo { margin: 0 0 8px; font-size: 20px; }
.tarjeta-acceso__texto { margin: 0 0 14px; color: var(--texto-suave); overflow-wrap: anywhere; }
.tarjeta-acceso__pie { margin: 18px 0 0; text-align: center; font-size: 14px; }
.tarjeta-acceso__pie a { color: var(--marron); }

/* Formularios y botones */
.formulario { display: grid; gap: 14px; }
.formulario--angosto { max-width: 440px; }
.campo { display: grid; gap: 4px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input:not([type=checkbox]):not([type=radio]):not([type=color]), .campo select, .campo textarea {
  width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); min-height: 42px;
}
.campo select[multiple] { min-height: 140px; }
.campo input[type=color] { width: 72px; min-height: 42px; padding: 3px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); cursor: pointer; }
.campo--error input, .campo--error select { border-color: var(--error); }
.campo__ayuda { color: var(--texto-suave); font-size: 13px; }
.campo__ayuda ul { margin: 4px 0 0; padding-left: 18px; }
.campo__error { color: var(--error); font-size: 13px; }
.requerido { color: var(--error); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px;
  font: inherit; font-weight: 600; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto);
  text-decoration: none; cursor: pointer;
}
.boton--primario { background: var(--marron); border-color: var(--marron); color: var(--sobre-principal); }
.boton--peligro { color: var(--error); }
.boton--ancho { width: 100%; }
.boton--chico { min-height: 34px; padding: 0 10px; font-size: 14px; }
.boton:disabled { opacity: .6; cursor: progress; }
.aviso { padding: 10px 12px; border-radius: 6px; border: 1px solid; margin: 0 0 12px; }
.aviso p { margin: 0; }
.aviso--error { color: var(--error); border-color: #e4b7b3; background: #fbeeed; }
.aviso--success { color: var(--exito); border-color: #b7d8bd; background: #eef7ef; }
.aviso--info, .aviso--warning { color: var(--info); border-color: #bccde0; background: #eef3f8; }

/* Estructura de la interfaz */
.estructura {
  display: grid; min-height: 100vh;
  /* minmax(0, 1fr): el contenido ancho (tablas, campos) no ensancha la página más allá de la pantalla. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--franja-alto) 1fr;
  grid-template-areas: "franja franja" "navegacion contenido";
}
.franja {
  grid-area: franja; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--franja); color: var(--texto-franja); border-bottom: 1px solid var(--borde);
}
.franja__menu { display: none; min-width: 42px; min-height: 42px; font-size: 20px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 6px; }
.franja__marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; font-size: 17px; min-width: 0; }
.franja__marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Los íconos de las apps son oscuros: sobre una pastilla clara se ven con cualquier color de franja. */
.franja__marca img { box-sizing: content-box; padding: 3px; border-radius: 7px; background: #fff; }
.franja__espacio { flex: 1; }
.navegacion { grid-area: navegacion; display: flex; position: sticky; top: var(--franja-alto); height: calc(100vh - var(--franja-alto)); }
.contenido { grid-area: contenido; padding: 24px; min-width: 0; }
.titulo { font-size: 22px; margin: 0 0 16px; }
.velo { position: fixed; inset: var(--franja-alto) 0 0 0; background: rgba(0, 0, 0, 0.35); z-index: 15; }

/* Menú de usuario */
.menu-usuario { position: relative; }
.menu-usuario summary { color: inherit; list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 42px; padding: 0 6px; border-radius: 6px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario__inicial { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--marron); color: var(--sobre-principal); font-weight: 700; box-shadow: 0 0 0 2px var(--texto-franja); }
.menu-usuario__opciones {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); display: grid; z-index: 40;
}
.menu-usuario__opciones a, .menu-usuario__opciones button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; font: inherit; color: var(--texto); text-decoration: none; border-radius: 6px; cursor: pointer;
}
.menu-usuario__opciones a:hover, .menu-usuario__opciones button:hover { background: var(--fondo); }
.menu-usuario__opciones form { margin: 0; }


/* Columna de apps */
.columna-apps { width: var(--columna-ancho); background: var(--riel); border-right: 1px solid var(--borde); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; overflow-y: auto; }
.columna-apps__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--texto); text-decoration: none; font-size: 22px; border: 2px solid transparent; }
.columna-apps__icono:hover { background: var(--superficie); }
.columna-apps__icono[aria-current="page"] { background: var(--superficie); border-color: var(--marron); }
.columna-apps__icono img { width: 28px; height: 28px; }
.columna-apps__nombre { display: none; }

/* Menú superior de la app: sus funciones, en la franja junto al nombre */
.menu-app { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-left: 12px; overflow-x: auto; scrollbar-width: none; }
.menu-app::-webkit-scrollbar { display: none; }
.menu-app a { display: flex; align-items: center; padding: 0 12px; color: inherit; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.menu-app a:hover { background: rgba(127, 127, 127, .14); }
.menu-app a[aria-current="page"] { font-weight: 700; border-bottom-color: currentColor; }

/* Tablet y celular: el menú de la app baja a una segunda fila que se desliza de lado. */
@media (max-width: 1023px) {
  .con-submenu { --franja-alto: calc(56px + var(--submenu-alto)); }
  .franja { flex-wrap: wrap; row-gap: 0; }
  .franja > :not(.menu-app) { height: 56px; }
  .franja .menu-usuario, .franja .filtro, .franja .franja__menu { align-self: center; height: auto; }
  .menu-app { order: 10; flex: 1 0 100%; height: var(--submenu-alto); margin: 0 -16px; padding: 0 8px; border-top: 1px solid var(--borde); }
}
/* Celular: la columna de apps va detrás del botón ☰, con el nombre de cada app. */
@media (max-width: 599px) {
  .estructura { grid-template-columns: minmax(0, 1fr); grid-template-areas: "franja" "contenido"; }
  .con-columna .franja__menu { display: inline-flex; align-items: center; justify-content: center; }
  .navegacion { position: fixed; left: 0; top: var(--franja-alto); bottom: 0; height: auto; z-index: 20; transform: translateX(-100%); transition: transform .2s; }
  .menu-abierto .navegacion { transform: none; }
  .columna-apps { width: 220px; align-items: stretch; padding: 12px 8px; }
  .columna-apps__icono { width: auto; justify-content: start; grid-auto-flow: column; gap: 12px; padding: 0 12px; }
  .columna-apps__nombre { display: inline; font-size: 15px; font-weight: 600; }
  .contenido { padding: 16px; }
  .franja { padding: 0 8px; column-gap: 6px; }
  .menu-app { margin: 0 -8px; }
  .menu-usuario__nombre { display: none; }
}

/* Página de inicio: íconos con su nombre visible */
.apps-inicio { list-style: none; margin: 16px auto; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; }
.app-inicio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px; border-radius: 12px; color: var(--texto); text-decoration: none; text-align: center; }
.app-inicio:hover { background: var(--superficie); }
.app-inicio__icono { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.app-inicio__nombre { font-weight: 600; }
.vacio { color: var(--texto-suave); }

@media (max-width: 599px) {
  .apps-inicio { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .app-inicio__icono { width: 64px; height: 64px; }
}

/* Filtro de empresa y sede */
.filtro { display: flex; gap: 6px; align-items: center; margin: 0; min-width: 0; flex-shrink: 1; }
.filtro select { font: inherit; font-size: 14px; min-height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--borde); border-radius: 18px; background-color: var(--fondo); max-width: 200px; text-overflow: ellipsis; }
@media (max-width: 599px) {
  .filtro select { max-width: 96px; min-width: 0; font-size: 13px; padding: 0 20px 0 8px; }
  .franja__marca { flex: 1 1 auto; }
  .franja__espacio { display: none; }
}

/* Listas, fichas y paginación */
.encabezado { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.encabezado .titulo { margin: 0; }
.encabezado .acciones { margin: 0; }
.encabezado form { margin: 0; }
.subtitulo { font-size: 17px; margin: 24px 0 8px; }
.migas { margin: 0 0 6px; font-size: 14px; }
.migas a { color: var(--texto-suave); text-decoration: none; }
.etiqueta { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--riel); color: var(--texto-suave); vertical-align: middle; }
.busqueda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.busqueda input, .busqueda select { font: inherit; min-height: 42px; padding: 0 11px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); }
.busqueda input { flex: 1 1 200px; }
.tabla-contenedor { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: 13px; color: var(--texto-suave); font-weight: 600; background: var(--fondo); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla a { font-weight: 600; }
.tabla .inactivo td { color: var(--texto-suave); }
.ficha-datos.inactivo dd { color: var(--texto-suave); }
/* Pestañas dentro de una función (p. ej. Correo, SMS y WhatsApp en Conectores); se deslizan de lado en celular. */
.pestanas { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { padding: 10px 14px; color: inherit; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { background: rgba(127, 127, 127, .14); }
.pestanas a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--marron); }
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; }
.formulario--ficha {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 24px; align-items: start;
}
/* Lo que no es un campo simple ocupa toda la fila: avisos, botones y listas de casillas. */
.formulario--ficha > .aviso, .formulario--ficha > .acciones, .formulario--ficha > .campo:has(input[type=checkbox]) { grid-column: 1 / -1; }
.formulario--ficha .campo ul, .campo ul.lista-permisos, .campo div > ul { list-style: none; margin: 0; padding: 0; }
.campo input[type=checkbox] { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.campo__casilla { display: block; margin-bottom: 6px; font-weight: normal; }

/* Apariencia: logo e ícono vigentes */
.marca-vista-previa { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; margin: 0 0 16px; }
.marca-vista-previa__item { margin: 0; display: grid; gap: 6px; justify-items: start; color: var(--texto-suave); font-size: 14px; }
.marca-vista-previa__logo { display: block; width: 240px; max-width: 100%; height: auto; }
.marca-vista-previa__icono { display: block; width: 64px; height: 64px; }
.campo [id^="id_sedes"] > div, .campo [id^="id_permissions"] > div { padding: 5px 0; }
.campo #id_permissions { max-height: 360px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 6px; padding: 8px 12px; }
.campo__titulo { font-weight: 600; font-size: 14px; }
.lista-permisos--solo-lectura li { padding: 5px 0; color: var(--texto-suave); }
.foto-usuario { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; border: 1px solid var(--borde); }
/* Formset en línea dentro de una ficha (p. ej. las variantes de un producto): ocupa toda la fila; las filas
   inactivas se ven atenuadas pero se pueden editar y reactivar. */
.formulario--ficha > .formset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.formset .tabla td { vertical-align: top; }
.formset .tabla input:not([type=checkbox]), .formset .tabla select { width: 100%; min-width: 7em; }
.formset .tabla .inactivo td { opacity: .6; }
/* Casillas de un campo de selección múltiple (asignaciones del catálogo): en columnas. */
.campo > div:has(> div > label > input[type=checkbox]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 4px 16px; }
.foto-producto { display: block; max-width: 160px; max-height: 160px; object-fit: cover; border-radius: var(--radio); margin-bottom: 12px; border: 1px solid var(--borde); }
/* Productos y precios de una sede: un bloque por producto; guardar y quitar el precio en la misma fila. */
.producto-en-sede { margin: 0 0 16px; }
.producto-en-sede > .encabezado { margin-bottom: 6px; }
.producto-en-sede__nombre { font-size: 16px; margin: 0; }
.precio-en-sede { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.precio-en-sede input { font: inherit; width: 9em; min-height: 34px; padding: 0 8px; border: 1px solid var(--borde); border-radius: 6px; }

/* En celular, cada fila de la tabla se ve como una tarjeta. */
@media (max-width: 599px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
  .tabla td { border: 0; padding: 2px 0; }
  .tabla td:not(:first-child)::before { content: attr(data-columna) ": "; color: var(--texto-suave); font-size: 13px; }
  .formulario--ficha { padding: 14px; }
}
.busqueda__fecha { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texto-suave); }
.cambios summary { cursor: pointer; font-size: 13px; color: var(--marron-claro); }
.cambios ul { margin: 6px 0 0; padding-left: 16px; font-size: 13px; }
.ficha-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 20px; }
.ficha-datos dt { color: var(--texto-suave); }
.ficha-datos dd { margin: 0; font-weight: 600; }
/* Aplicaciones: ícono junto al nombre y ofertas de "activar primero" dentro de un aviso. */
.icono-app { vertical-align: middle; margin-right: 6px; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso li form { margin: 4px 0; }

/* Botón "Ir a…" de la franja y paleta de comandos (Cmd/Ctrl + K) */
.franja__buscar { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; font: inherit; font-size: 14px; color: inherit; background: rgba(127, 127, 127, .12); border: 1px solid rgba(127, 127, 127, .25); border-radius: 18px; cursor: pointer; }
.franja__buscar:hover { background: rgba(127, 127, 127, .2); }
kbd, .atajo { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 5px; border: 1px solid rgba(127, 127, 127, .4); border-radius: 4px; }
.paleta { width: min(560px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 96px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3); color: var(--texto); background: var(--superficie); overflow: hidden; }
.paleta[open] { display: flex; flex-direction: column; }
.paleta::backdrop { background: rgba(0, 0, 0, .35); }
.paleta__buscar { font: inherit; font-size: 17px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--borde); outline: none; background: transparent; }
.paleta__resultados { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.paleta__resultados li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.paleta__resultados li[aria-selected="true"] { background: var(--fondo); box-shadow: inset 3px 0 0 var(--marron); }
.paleta__titulo { font-weight: 600; }
.paleta__grupo { margin-left: auto; font-size: 13px; color: var(--texto-suave); }
.paleta__vacio { margin: 0; padding: 16px 18px; color: var(--texto-suave); }
.paleta__ayuda { margin: 0; padding: 8px 18px; font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--borde); }
@media (max-width: 1023px) {
  .franja__buscar-texto, .franja__buscar .atajo { display: none; }
  .franja__buscar { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 599px) {
  .paleta { margin-top: 64px; }
  .paleta__ayuda { display: none; }
}

/* Permisos del rol con el widget del admin de Django (FilteredSelectMultiple): sus variables, con los colores de Odude. */
.selector {
  --body-fg: var(--texto); --body-bg: var(--superficie); --body-quiet-color: var(--texto-suave);
  --border-color: var(--borde); --hairline-color: var(--borde); --darkened-bg: var(--riel);
  --selected-bg: var(--riel); --primary: var(--marron); --secondary: var(--marron-claro); --accent: var(--marron);
  --header-bg: var(--marron); --header-link-color: var(--sobre-principal); --button-fg: var(--sobre-principal);
  --link-fg: var(--marron-claro); --breadcrumbs-fg: var(--sobre-principal);
  --close-button-bg: var(--marron-claro); --close-button-hover-bg: var(--marron);
  display: flex; gap: 8px; align-items: stretch; width: 100%; max-width: 1100px; float: none;
}
/* El campo de permisos ocupa todo el ancho de la ficha y su etiqueta queda arriba (SelectFilter2 inserta el widget
   antes de la etiqueta). */
.formulario--ficha > .campo:has(> .selector) { grid-column: 1 / -1; }
.campo:has(> .selector) > label { order: -1; }
.selector .selector-available, .selector .selector-chosen { flex: 1; min-width: 0; width: auto; }
.selector .selector-available .selector-available-title, .selector .selector-chosen .selector-chosen-title { padding: 8px 10px; }
.selector .selector-available-title { background: var(--riel); color: var(--texto); }
.selector .selector-chosen-title { background: var(--marron); color: var(--sobre-principal); }
.selector .selector-available-title label, .selector .selector-chosen-title label { font-weight: 600; font-size: 14px; }
.selector .helptext { font-size: 12px; margin: 4px 0 0; }
.selector select { width: 100%; min-height: 18rem; }
.selector h2 { font-size: 14px; }
.selector .selector-filter input { width: 100%; box-sizing: border-box; }
@media (max-width: 599px) {
  .selector { flex-direction: column; }
  .selector ul.selector-chooser { flex-direction: row; justify-content: center; margin: 4px auto; }
  .selector .selector-chooser li .selector-add, .selector .selector-chooser li .selector-remove { transform: rotate(90deg); }
}
/* Logo e ícono de Apariencia: siempre en una fila completa, tengan o no la casilla "Quitar" (si no, el campo cambia de
   ancho al cargar una imagen), con el selector de archivo de un ancho legible. */
.formulario--ficha > .campo:has(input[name=logo]), .formulario--ficha > .campo:has(input[name=favicon]) { grid-column: 1 / -1; }
.campo input[name=logo], .campo input[name=favicon] { max-width: 480px; }