:root{ --gap: 1rem; --header-bg: #E0E7FF; --header-border: #C7D2FE; --header-link: #111827; --header-hover-bg: #DBE2FF } .grid{ display:grid; gap:var(--gap) } .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) } .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) } .grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) } .card{ border:1px solid #e5e7eb; border-radius:12px; padding:1rem; background:#fff } .toolbar{ display:flex; gap:.5rem; align-items:center; justify-content:space-between; margin-bottom:1rem } table.striped tbody tr:nth-child(odd){ background:#f9fafb } .muted{ color:#6b7280 } /* Apilar verticalmente elementos */ .stack{ display:flex; flex-direction: column; gap: var(--gap); } /* Diálogos más anchos y responsivos */ dialog > article { max-width: 96vw; } /* Mejoras para el submenú de Catálogos con Pico v2 */ header nav details[role="list"] { position: relative; display: inline-block; vertical-align: middle; } header nav details[role="list"] > summary { cursor: pointer; display: inline-flex; align-items: center; margin: 0; line-height: 1.1; } header nav details[role="list"] > summary::-webkit-details-marker { display: none; } header nav details[role="list"][open] > ul[role="listbox"] { position: absolute; background: var(--pico-card-background-color,#fff); border: 1px solid #e5e7eb; border-radius: 8px; padding: .25rem 0; margin-top: .25rem; z-index: 10; top: 100%; } header nav details[role="list"] > ul[role="listbox"] li a { display: block; padding: .5rem 1rem; } header nav details[role="list"] > ul[role="listbox"] li a:hover { background: #f3f4f6; } /* Tema claro/oscuro básico usando data-theme en */ html[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; } html[data-theme="dark"] .card { background: #111827; border-color: #1f2937; } html[data-theme="dark"] table.striped tbody tr:nth-child(odd){ background:#0b1220 } html[data-theme="dark"] a { color: #93c5fd; } /* Helpers de íconos y alineación */ .with-icon { display: inline-flex; align-items: center; gap: .4rem; } .with-icon > i { font-size: 1.05rem; line-height: 1; width: 1.1rem; text-align: center; } .with-icon > span { line-height: 1; } /* Botones de acción con ícono pequeños */ .icon-btn { display:inline-flex; align-items:center; justify-content:center; gap:.25rem; padding:.3rem .4rem; border-radius:8px; line-height:1; } .icon-btn i { font-size:.9rem; width:1rem; text-align:center; } table td .icon-btn + .icon-btn { margin-left:.25rem; } table td.actions { display:flex; gap:.25rem; justify-content:flex-start; align-items:center; } /* Botones pequeños para toolbars */ .btn-sm { padding: .35rem .6rem; font-size: .85rem; line-height: 1.1; border-radius: 8px; } .btn-sm.with-icon > i { font-size: .95rem; width: 1rem; } /* Tamaño compacto por defecto para botones en tablas y paginadores */ table button, table .btn, table .icon-btn { padding: .3rem .45rem; font-size: .85rem; line-height: 1.1; border-radius: 8px; } table button i, table .icon-btn i { font-size: .9rem; width: 1rem; } #pager button { padding: .35rem .6rem; font-size: .85rem; line-height: 1.1; border-radius: 8px; } /* Input de búsqueda más compacto */ .search-input { width: 14rem; max-width: 50vw; } /* Input compacto (altura reducida) */ .input-sm { padding: .35rem .5rem !important; font-size: .85rem; line-height: 1.1; border-radius: 8px; } /* Badge para mostrar caja asignada */ .badge { background: var(--primary); color: var(--primary-inverse); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; } /* Badge secundario */ .badge.secondary { background: var(--secondary); color: var(--secondary-inverse); } /* Header con color distintivo */ .app-header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); border-radius: 12px; margin-top: .75rem; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(0,0,0,.05); } .app-header nav { padding: .5rem .75rem; } .app-header a, .app-header summary, .app-header strong { color: var(--header-link); } .app-header nav ul li a, .app-header nav summary { padding: .35rem .6rem; border-radius: 8px; } .app-header nav ul li a:hover, .app-header nav summary:hover { background: var(--header-hover-bg); text-decoration: none; } /* Forzar misma altura y alineación entre enlaces y summary */ .app-header nav ul li a, .app-header nav summary { display: inline-flex; align-items: center; gap: .4rem; line-height: 1; height: 2rem; /* altura uniforme */ padding: .25rem .55rem; /* padding uniforme */ box-sizing: border-box; white-space: nowrap; } header nav details[role="list"] > summary { margin: 0; list-style: none; } header nav details[role="list"] > summary::marker { content: ''; } header nav details[role="list"] { margin: 0; padding: 0; } /* Estado activo del menú */ .app-header nav ul li a.active, .app-header nav summary.active { background: var(--header-hover-bg); font-weight: 600; } /* Tema oscuro para header */ html[data-theme="dark"] { --header-bg: #1a2036; --header-border: #283046; --header-link: #E5E7EB; --header-hover-bg: #222a4a } html[data-theme="dark"] .app-header { box-shadow: 0 1px 0 rgba(255,255,255,.05); }