/* Dimensiones dentro de Ajustes de la consola: sólo lo que .card, .fila, .chip y button.sec no traen. */
#dm-app [hidden] { display: none !important; }
#dm-app h3 { margin: 0; font-size: 15px; font-weight: 600; }
#dm-lista { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
#dm-app .dm-msg { min-height: 1.3em; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
#dm-app .dm-msg.err { color: var(--rojo); }
#dm-form { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
#dm-form .fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 10px 0 0; }
#dm-form .dm-grow { flex: 1 1 220px; margin: 0; }
#dm-app label.dm-chk { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; line-height: 1.2; }
#dm-app label.dm-chk input, #dm-app .dm-sw input[type=checkbox], #dm-app .li-attr[type=checkbox], #dm-app .li-cat { width: auto; }

/* La tarjeta de cada dimensión */
.dm-card { border: 1px solid var(--line); border-radius: var(--radio); padding: 14px 16px; background: hsl(var(--mutedbg) / .45); }
.dm-card.retirada { opacity: .65; }
.dm-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dm-orden { display: flex; flex-direction: column; }
.dm-titulo { flex: 1 1 14rem; min-width: 0; }
.dm-titulo h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-titulo code { font-size: 12px; color: var(--muted); font-weight: 400; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dm-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: hsl(var(--mutedbg)); color: var(--muted); border: 1px solid var(--line); }
.dm-chip.ok { background: hsl(var(--success-bg)); color: var(--verde); border-color: transparent; }
.dm-chip.warn { background: var(--ambarBg); color: var(--ambar); border-color: transparent; }
.dm-usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; margin-top: 12px; }
.dm-sw { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: calc(var(--radio) - 2px); background: var(--card); cursor: pointer; line-height: 1.3; font-weight: 400; }
.dm-sw:has(input:checked) { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .06); }
.dm-sw.off { cursor: default; opacity: .55; }
.dm-sw input { margin-top: 2px; flex: none; }
.dm-sw-txt { display: flex; flex-direction: column; gap: 3px; }
.dm-sw-txt b { font-size: 13px; font-weight: 600; }
.dm-sw-txt small { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Botones de icono (orden, retirar, renombrar) */
#dm-app .li-ico, #dm-app .li-ico:hover { background: transparent; border: 0; box-shadow: none; padding: 3px 6px; color: var(--muted); cursor: pointer; line-height: 1; }
#dm-app .li-ico:hover { color: var(--txt); }
#dm-app .li-ico:disabled { opacity: .3; cursor: default; }
#dm-app .li-del:hover { color: var(--rojo); }
button.dm-opciones { padding: 5px 12px; font-size: 13px; }
button.dm-opciones[aria-expanded="true"] { color: hsl(var(--primary)); }

/* Opciones de una dimensión */
#dm-app .tbl-marco { margin-top: 12px; border: 1px solid var(--line); border-radius: calc(var(--radio) - 2px); overflow: hidden; background: var(--card); }
#dm-app .li-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
#dm-app .li-tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); background: transparent; }
#dm-app .li-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
#dm-app .li-tbl tbody tr:last-child td, #dm-app .li-tbl tfoot td { border-bottom: 0; }
#dm-app .li-tbl .li-acc { text-align: right; white-space: nowrap; width: 9rem; }
#dm-app .li-tbl tr.li-off .li-edit { color: var(--muted); }
#dm-app .li-tbl input.li-edit, #dm-app .li-tbl tfoot input { width: 100%; }
.li-attrs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#dm-app select.li-attr { width: auto; max-width: 16rem; }
.li-fuera { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; line-height: 1.2; }
.li-cats { display: inline-block; }
.li-cats > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.li-cats-cuerpo { max-height: 14rem; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 4px 12px; padding: 6px 0; }

/* Tarjeta compacta: una sola fila (orden, nombre, interruptores, Detalles, retirar) */
.dm-card { padding: 9px 14px; }
.dm-cab { gap: 8px 14px; flex-wrap: wrap; }
.dm-titulo { flex: 1 1 11rem; }
.dm-titulo h3 { align-items: center; }
#dm-lista .dm-usos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.dm-sw.dm-sw-c { padding: 0; border: 0; background: none; align-items: center; gap: 6px; }
.dm-sw.dm-sw-c:has(input:checked) { background: none; }
.dm-sw.dm-sw-c .dm-sw-txt b { font-size: 13px; font-weight: 500; white-space: nowrap; }
.dm-sw.dm-sw-c input { margin: 0; }

/* Modal «Detalles» */
dialog.dm-modal { width: min(78rem, 96vw); max-height: 88vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radio); padding: 18px 20px; background: var(--card); color: var(--txt); }
dialog.dm-modal::backdrop { background: rgb(0 0 0 / .45); }
.dm-mod-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dm-mod-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dm-mod-nombre label { margin: 0; font-weight: 600; font-size: 13px; }
.dm-mod-nombre input { flex: 1 1 14rem; width: auto; }
.dm-mod-t { margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
#dm-lista .dm-usos.dm-usos-modal, .dm-usos-modal { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; }

.dm-mod-cab .dm-x svg { width: 20px; height: 20px; }

.dm-chips.dm-chips-fila { margin: 0; justify-content: flex-end; flex: 0 1 auto; }

/* Opciones en el modal: una fila por opción, con sus controles en línea y alineados */
.dm-modal .li-tbl { table-layout: fixed; }
.dm-modal .li-tbl th:first-child, .dm-modal .li-tbl td:first-child { width: 17rem; }
.dm-modal .li-tbl th:last-child, .dm-modal .li-tbl td:last-child { width: 6.5rem; }
.dm-modal .li-tbl td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.dm-modal .li-tbl tbody tr:hover { background: rgb(128 128 128 / .06); }
.dm-modal .li-tbl tr.li-off td { opacity: .6; }
.dm-modal .li-tbl input.li-edit:disabled { background: transparent; border-color: transparent; padding-left: 0; font-weight: 500; opacity: 1; -webkit-text-fill-color: currentColor; }
.dm-modal .li-attrs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.dm-modal .li-attrs .li-attrs { display: contents; }
.dm-modal select.li-attr { width: auto; min-width: 13rem; max-width: 100%; }
.dm-modal .li-fuera { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.dm-modal input.li-attr[type=number] { width: 6rem; flex: none; }
.dm-modal .li-cats > summary { padding: 4px 10px; border: 1px solid rgb(128 128 128 / .35); border-radius: 99px; list-style-position: inside; }
.dm-modal .li-cats[open] { flex-basis: 100%; }
.dm-modal .li-tbl tfoot td { background: rgb(128 128 128 / .05); }
.dm-modal .li-acc { text-align: right; }

/* Campos de cada opción: título arriba, control, y debajo qué hace */
.dm-modal .li-attrs { align-items: flex-start; gap: 10px 20px; }
.dm-modal .dm-campo { display: flex; flex-direction: column; gap: 4px; width: 15rem; }
.dm-modal .dm-campo-t { font-size: 12px; font-weight: 600; }
.dm-modal .dm-campo small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.dm-modal .dm-campo select, .dm-modal .dm-campo input[type=number] { width: 100%; min-width: 0; }
.dm-modal .dm-campo .li-fuera { white-space: normal; }
.dm-modal .li-cats { display: block; }
.dm-modal .li-cats[open] { flex-basis: auto; }
.dm-modal .dm-cats-pie { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.dm-modal .li-cats-cuerpo { max-height: 11rem; }
.dm-modal .dm-campo:has(.li-cats[open]) { width: 32rem; max-width: 100%; }
.dm-mod-ayuda { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }

.dm-mod-dep { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px; }
.dm-mod-dep label { margin: 0; font-weight: 600; font-size: 13px; }
.dm-mod-dep select { width: auto; min-width: 14rem; }
.dm-mod-dep small { flex-basis: 100%; color: var(--muted); font-size: 12px; }

/* Matriz de dependencias: filas = opciones de la dimensión, columnas = opciones de la anterior. */
.dm-mx-marco { overflow: auto; max-height: 60vh; border: 1px solid rgb(128 128 128 / .35); border-radius: 8px; }
.dm-mx { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.dm-mx th, .dm-mx td { padding: 2px 6px; border-bottom: 1px solid rgb(128 128 128 / .2); background: var(--bg, Canvas); text-align: center; }
.dm-mx thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; max-width: 7rem; }
.dm-mx tbody th { position: sticky; left: 0; z-index: 1; text-align: left; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.dm-mx .dm-mx-esq { left: 0; z-index: 3; text-align: left; position: sticky; font-weight: 600; }
.dm-mx-b { all: unset; cursor: pointer; font: inherit; font-weight: 600; color: inherit; overflow-wrap: anywhere; }
.dm-mx-b:hover:not(:disabled) { text-decoration: underline; }
.dm-mx-b:disabled { cursor: default; }
.dm-mx-c { margin: 0; cursor: pointer; }
.dm-mx-sin { color: var(--warn, #b45309); }
.dm-mx-sin[hidden] { display: none; }