/* ═════════════════════════════════════════════════════════════════════════
   rediseno.css — NUEVO DISEÑO de MUERMO (2026-10). Se carga SOLO si la cookie `diseno=nuevo` está activa, después de
   app.css; con el interruptor apagado este archivo no existe para el navegador.

   Estrategia (segura y reversible):
   1) app.css ya está construido sobre variables (--bg, --panel, --accent…) y ~150 plantillas dependen de esos nombres.
      Acá se REMAPEAN esas variables a los temas nuevos: todas las pantallas cambian de paleta sin tocar su HTML.
   2) Se afinan componentes concretos (tarjetas, botones, tablas, formularios) y se agrega el encabezado nuevo (.nd-*).
   Todo está acotado a html[data-ui="nuevo"] para no filtrarse al diseño anterior.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Temas: remapean las variables que ya usa app.css ─────────────────── */
html[data-ui="nuevo"][data-theme="claro"] {
    color-scheme: light;
    --bg: #f3f5fb; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f6f7fb;
    --border: #e2e6f0; --text: #1a1f2e; --muted: #59627c;
    --error: #c0322b; --error-bg: rgba(192, 50, 43, 0.10);
    --ok: #167a4a; --ok-bg: rgba(22, 122, 74, 0.12);
    --warn: #7a4c00; --warn-bg: rgba(143, 90, 0, 0.13);
    --nd-shadow: 0 1px 2px rgba(20, 28, 60, 0.06), 0 6px 20px rgba(20, 28, 60, 0.07);
    --nd-topbar: #ffffff; --nd-topbar-text: #1a1f2e; --nd-border-strong: #cfd5e4;
}
html[data-ui="nuevo"][data-theme="oscuro"] {
    color-scheme: dark;
    --bg: #181b27; --bg-elev: #1f2333; --panel: #222637; --panel-2: #1d2130;
    --border: #333a54; --text: #e9ecf6; --muted: #a0a8c4;
    --error: #ff8a82; --error-bg: rgba(255, 138, 130, 0.14);
    --ok: #5fd69b; --ok-bg: rgba(95, 214, 155, 0.14);
    --warn: #ffc766; --warn-bg: rgba(255, 199, 102, 0.14);
    --nd-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.28);
    --nd-topbar: #1f2333; --nd-topbar-text: #e9ecf6; --nd-border-strong: #444c6c;
}
html[data-ui="nuevo"][data-theme="contraste"] {
    color-scheme: light;
    --bg: #ffffff; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f2f2f2;
    --border: #000000; --text: #000000; --muted: #2b2b2b;
    --error: #a30000; --error-bg: #ffe0e0; --ok: #005a24; --ok-bg: #d6f5e1; --warn: #5c3b00; --warn-bg: #ffe9a8;
    --nd-shadow: none; --nd-topbar: #000000; --nd-topbar-text: #ffffff; --nd-border-strong: #000000;
}

/* Acentos. --accent es el color de FONDO de botones/etiquetas (siempre legible con texto blanco); --accent-light es el
   color de TEXTO/enlaces y por eso cambia según el tema. */
html[data-ui="nuevo"][data-accent="morado"]    { --accent: #5646c9; --accent-2: #6c5de0; --accent-dark: #3f31a8; --accent-light: #5646c9; }
html[data-ui="nuevo"][data-accent="oceano"]    { --accent: #0b6fc0; --accent-2: #1d86d6; --accent-dark: #08568f; --accent-light: #0b6fc0; }
html[data-ui="nuevo"][data-accent="bosque"]    { --accent: #167a4a; --accent-2: #1f9a62; --accent-dark: #0f5c37; --accent-light: #167a4a; }
html[data-ui="nuevo"][data-accent="atardecer"] { --accent: #bd4a14; --accent-2: #d65d27; --accent-dark: #8f3609; --accent-light: #bd4a14; }
html[data-ui="nuevo"][data-theme="oscuro"][data-accent="morado"]    { --accent: #6a5cf0; --accent-2: #7d70f5; --accent-dark: #5546d6; --accent-light: #a79bff; }
html[data-ui="nuevo"][data-theme="oscuro"][data-accent="oceano"]    { --accent: #1370bf; --accent-2: #2f93e6; --accent-dark: #0e5a9c; --accent-light: #6bbcff; }
html[data-ui="nuevo"][data-theme="oscuro"][data-accent="bosque"]    { --accent: #17804e; --accent-2: #27a06a; --accent-dark: #10663c; --accent-light: #5fd69b; }
html[data-ui="nuevo"][data-theme="oscuro"][data-accent="atardecer"] { --accent: #c4521a; --accent-2: #db6730; --accent-dark: #a14112; --accent-light: #ff9a62; }
html[data-ui="nuevo"][data-theme="contraste"][data-accent] { --accent: #0030c7; --accent-2: #0030c7; --accent-dark: #001f85; --accent-light: #0030c7; }
html[data-ui="nuevo"] { --nd-grad: linear-gradient(160deg, var(--accent), var(--accent-dark)); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* ── Base ─────────────────────────────────────────────────────────────── */
html[data-ui="nuevo"] { font-size: var(--nd-fs, 15px); }
html[data-ui="nuevo"] body { background: var(--bg); font-size: 0.93rem; font-variant-numeric: tabular-nums;
    transition: background-color 0.25s ease, color 0.25s ease; }
html[data-ui="nuevo"] h1 { font-size: 1.5rem; letter-spacing: -0.015em; }
html[data-ui="nuevo"] :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
html[data-ui="nuevo"][data-theme="contraste"] :focus-visible { outline: 4px solid #ffbf00; }
html[data-ui="nuevo"] ::selection { background: var(--accent-soft); }

/* ── Encabezado nuevo ─────────────────────────────────────────────────── */
.nd-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; height: 58px;
    background: var(--nd-topbar); color: var(--nd-topbar-text); border-bottom: 1px solid var(--border); box-shadow: var(--nd-shadow); }
html[data-theme="contraste"] .nd-topbar { border-bottom: 3px solid #ffbf00; }
.nd-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; letter-spacing: 0.02em; font-size: 1.1rem;
    color: inherit; text-decoration: none; flex: none; }
.nd-brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.nd-empresa { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border: 1px solid var(--nd-border-strong);
    border-radius: 999px; font-size: 0.82rem; color: inherit; text-decoration: none; flex: none; max-width: 16rem; }
.nd-empresa-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-empresa:hover { background: var(--accent-soft); }
.nd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.nd-caret { opacity: 0.6; font-size: 0.8em; }
.nd-spacer { flex: 1; }
.nd-menu ~ .nd-spacer { display: none; }      /* con menú, es él quien absorbe el ancho libre */

/* Menú horizontal con desplegables (los grupos de cada área) */
.nd-menu { display: flex; align-items: stretch; align-self: stretch; flex: 1 1 0; min-width: 0; margin-left: 0.4rem; white-space: nowrap; }
.nd-mi { position: relative; display: flex; align-items: stretch; flex: none; }
.nd-mi[hidden] { display: none !important; }
.nd-mt { display: flex; align-items: center; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none;
    padding: 0 0.75rem; cursor: pointer; font-size: 0.86rem; font-weight: 600; color: inherit; opacity: 0.88; text-decoration: none; transform: none; }
.nd-mt:hover { background: none; opacity: 1; transform: none; box-shadow: none; filter: none; }
button.nd-mt::after { content: "▾"; font-size: 0.7em; margin-left: 0.35rem; opacity: 0.6; }
.nd-mi:hover > .nd-mt, .nd-mi.open > .nd-mt, .nd-mi.activo > .nd-mt, .nd-mt.activo { opacity: 1; border-bottom-color: var(--accent-2); }
.nd-mi.activo > .nd-mt, .nd-mt.activo { font-weight: 700; }
.nd-drop { display: none; position: absolute; top: 100%; left: 0; min-width: 270px; max-height: 72vh; overflow-y: auto; padding: 0.4rem;
    background: var(--panel); color: var(--text); border: 1px solid var(--nd-border-strong); border-radius: 12px; box-shadow: var(--nd-shadow); z-index: 70; }
.nd-mi.open > .nd-drop { display: block; animation: nd-pop 0.16s ease; }
@media (hover: hover) { .nd-mi:hover > .nd-drop { display: block; animation: nd-pop 0.16s ease; } }
.nd-drop a { display: flex; align-items: center; gap: 0.6rem; padding: 0.48rem 0.7rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.86rem; white-space: nowrap; }
.nd-drop a:hover { background: var(--accent-soft); }
.nd-drop a.activo { background: var(--accent-soft); color: var(--accent-light); font-weight: 700; }
.nd-drop .nd-ico { width: 1.3rem; text-align: center; flex: none; }
.nd-drop .nd-grp { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0.55rem 0.7rem 0.15rem; }
@keyframes nd-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Botones del extremo derecho */
.nd-acciones { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.nd-pop { position: relative; }
.nd-iconbtn { background: none; border: 1px solid var(--nd-border-strong); color: inherit; border-radius: 10px; width: 38px; height: 38px; padding: 0;
    cursor: pointer; display: grid; place-items: center; font-size: 1.05rem; box-shadow: none; transform: none; }
.nd-iconbtn:hover { background: var(--accent-soft); box-shadow: none; transform: none; filter: none; }
.nd-iconbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.nd-avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; font-weight: 700; font-size: 0.85rem; color: #fff;
    background: var(--nd-grad); box-shadow: none; transform: none; }
.nd-avatar:hover { box-shadow: 0 0 0 3px var(--accent-soft); transform: none; filter: none; }
.nd-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 330px; padding: 1rem; background: var(--panel); color: var(--text);
    border: 1px solid var(--nd-border-strong); border-radius: 16px; box-shadow: var(--nd-shadow); z-index: 80; }
.nd-panel[hidden] { display: none; }
.nd-panel h4 { margin: 0.2rem 0 0.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.nd-panel-user { width: 270px; padding: 0.5rem; }
.nd-panel-user a, .nd-panel-user .nd-salir { display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 0.86rem; background: none; border: 0; box-shadow: none; text-align: left; cursor: pointer; font-weight: 500; transform: none; }
.nd-panel-user a:hover, .nd-panel-user .nd-salir:hover { background: var(--accent-soft); filter: none; transform: none; box-shadow: none; }
.nd-user-cab { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; }
.nd-super { align-self: flex-start; margin-top: 0.3rem; background: #f59e0b; color: #1a1a1a; font-weight: 700; font-size: 0.68rem; padding: 0.12rem 0.5rem; border-radius: 999px; }
.nd-sep { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; }
.nd-panel-user form { margin: 0; }
.nd-temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; }
.nd-tema { border: 2px solid var(--border); border-radius: 12px; padding: 0.45rem; background: var(--panel-2); color: var(--text); cursor: pointer; text-align: center;
    font-size: 0.76rem; font-weight: 500; box-shadow: none; transform: none; }
.nd-tema:hover { transform: none; box-shadow: none; filter: none; border-color: var(--accent); }
.nd-tema[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nd-tema i { display: block; height: 34px; border-radius: 7px; margin-bottom: 0.3rem; border: 1px solid rgba(0, 0, 0, 0.12); }
.nd-t-claro i { background: linear-gradient(180deg, #fff 35%, #f3f5fb 35%); }
.nd-t-oscuro i { background: linear-gradient(180deg, #222637 35%, #181b27 35%); }
.nd-t-contraste i { background: linear-gradient(180deg, #000 35%, #fff 35%); }
.nd-acentos { display: flex; gap: 0.55rem; margin-bottom: 0.9rem; }
.nd-acento { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--panel); box-shadow: 0 0 0 2px var(--nd-border-strong); cursor: pointer; padding: 0; transform: none; }
.nd-acento:hover { transform: none; filter: none; }
.nd-acento[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--text); }
.nd-acento[data-acento="morado"] { background: #5646c9; } .nd-acento[data-acento="oceano"] { background: #0b6fc0; }
.nd-acento[data-acento="bosque"] { background: #167a4a; } .nd-acento[data-acento="atardecer"] { background: #bd4a14; }
.nd-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; font-size: 0.86rem; }
.nd-seg { display: inline-flex; border: 1px solid var(--nd-border-strong); border-radius: 10px; overflow: hidden; }
.nd-seg button { border: 0; border-radius: 0; background: transparent; color: var(--text); padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.82rem; font-weight: 500; box-shadow: none; transform: none; }
.nd-seg button:hover { background: var(--accent-soft); transform: none; box-shadow: none; filter: none; }
.nd-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Migas y «Volver» */
.nd-contexto { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1.2rem; background: var(--panel-2); border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.nd-migas { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; color: var(--muted); }
.nd-migas a { color: var(--accent-light); text-decoration: none; } .nd-migas a:hover { text-decoration: underline; }
.nd-migas b { color: var(--text); }
.nd-sepm { opacity: 0.6; }
.nd-volver { background: var(--panel); color: var(--accent-light); border: 1px solid var(--border); border-radius: 8px; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; margin-right: 0.4rem; box-shadow: none; transform: none; }
.nd-volver:hover { background: var(--accent-soft); box-shadow: none; transform: none; filter: none; }

/* ── Riel lateral: delgado, se expande al pasar el mouse ──────────────── */
html[data-ui="nuevo"] .shell { align-items: flex-start; }
.nd-riel { width: 64px; flex: none; background: var(--panel); border-right: 1px solid var(--border); padding: 0.6rem 0.5rem; overflow: hidden; position: sticky; top: 58px;
    height: calc(100vh - 58px); transition: width 0.22s ease; z-index: 40; }
.nd-riel:hover, .nd-riel:focus-within { width: 232px; box-shadow: var(--nd-shadow); }
.nd-riel a { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.7rem; border-radius: 10px; text-decoration: none; color: var(--text); white-space: nowrap; font-size: 0.88rem; }
.nd-riel a .nd-ico { width: 1.4rem; text-align: center; flex: none; }
.nd-riel a:hover { background: var(--accent-soft); }
.nd-riel a.act { background: var(--accent-soft); color: var(--accent-light); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.nd-riel a.nd-no-contratado { opacity: 0.55; }
.nd-tx { opacity: 0; transition: opacity 0.15s; }
.nd-riel:hover .nd-tx, .nd-riel:focus-within .nd-tx { opacity: 1; }
.nd-tit { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0.9rem 0.8rem 0.3rem; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
.nd-riel:hover .nd-tit, .nd-riel:focus-within .nd-tit { opacity: 1; }

/* ── Pantalla completa: el contenido ocupa todo; arriba quedan solo los menús ── */
html.nd-fs .nd-riel, html.nd-fs .nd-contexto { display: none; }
html.nd-fs[data-ui="nuevo"] main, html.nd-fs[data-ui="nuevo"] .shell aside + main { max-width: none; margin-top: 0.8rem; padding: 0 1rem; }

/* ── Componentes existentes, afinados ─────────────────────────────────── */
html[data-ui="nuevo"] main { margin-top: 1.2rem; }
html[data-ui="nuevo"] .panel { background: var(--panel); border-radius: 16px; box-shadow: var(--nd-shadow); padding: 1.3rem 1.4rem; }
html[data-theme="contraste"] .panel { border: 2px solid #000; }
html[data-ui="nuevo"] main button, html[data-ui="nuevo"] main .btn { background: var(--nd-grad); color: #fff; border-radius: 10px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-ui="nuevo"] main button:hover, html[data-ui="nuevo"] main .btn:hover { filter: brightness(1.06); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent); }
html[data-ui="nuevo"] main button.secondary, html[data-ui="nuevo"] main .btn.secondary { background: var(--panel); color: var(--accent-light); border: 1px solid var(--nd-border-strong); box-shadow: none; }
html[data-ui="nuevo"] main button.secondary:hover, html[data-ui="nuevo"] main .btn.secondary:hover { background: var(--accent-soft); box-shadow: none; }
html[data-ui="nuevo"] main button.danger, html[data-ui="nuevo"] main .btn.danger { background: transparent; color: var(--error); border: 1px solid var(--error); box-shadow: none; }
html[data-ui="nuevo"] input, html[data-ui="nuevo"] select, html[data-ui="nuevo"] textarea { border-color: var(--nd-border-strong); border-radius: 10px; background: var(--panel); }
html[data-ui="nuevo"] input:focus, html[data-ui="nuevo"] select:focus, html[data-ui="nuevo"] textarea:focus { border-color: var(--accent); }
/* La regla de arriba redondea TODO input a 10 px: un checkbox de 1 rem quedaba como un círculo diminuto, casi invisible y sin
   marca al activarlo (caso real: el consentimiento del Portal del Trabajador en el celular). Cuadro con esquinas suaves, radio
   redondo y color de acento para que se vea marcado. */
html[data-ui="nuevo"] input[type="checkbox"] { border-radius: 4px; accent-color: var(--accent); }
html[data-ui="nuevo"] input[type="radio"] { border-radius: 50%; accent-color: var(--accent); }
html[data-ui="nuevo"] table.lista th { background: var(--panel-2); border-bottom: 1px solid var(--nd-border-strong); }
html[data-ui="nuevo"] table.lista td { padding: var(--nd-pad-y, 0.6rem) 0.6rem; }
html[data-ui="nuevo"][data-dens="compacta"] { --nd-pad-y: 0.3rem; }
html[data-ui="nuevo"] table.lista tbody tr:nth-child(even) { background: transparent; }
html[data-ui="nuevo"] table.lista tbody tr:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
/* El balance del asiento lo pinta el JS de las plantillas con color:green / color:red fijos (ilegibles en tema oscuro). */
html[data-ui="nuevo"] #balance-diario[style*="green"] { color: var(--ok) !important; font-weight: 600; }
html[data-ui="nuevo"] #balance-diario[style*="red"] { color: var(--error) !important; font-weight: 600; }
html[data-ui="nuevo"] main .lineas-btn-eliminar { background: none; box-shadow: none; color: var(--muted); border-radius: 8px; }
html[data-ui="nuevo"] main .lineas-btn-eliminar:hover { background: var(--error-bg); color: var(--error); filter: none; box-shadow: none; }
html[data-ui="nuevo"] #muermina-btn { color: #fff; background: var(--accent); }
html[data-ui="nuevo"] .ti-barra .ti-buscar { background: var(--panel-2); }

html[data-ui="nuevo"] main .dropdown-item, html[data-ui="nuevo"] main button.dropdown-item { background: none; color: var(--text); box-shadow: none; border: 0;
    border-radius: 8px; filter: none; transform: none; font-weight: 500; text-align: left; }
html[data-ui="nuevo"] main .dropdown-item:hover { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
html[data-ui="nuevo"] main .dropdown-item .sub { color: var(--muted); font-weight: 400; }

/* Botones DENTRO de las filas de las tablas: contorno, no relleno (una columna entera de botones llenos pesa demasiado) */
html[data-ui="nuevo"] main table.lista td .btn:not(.danger),
html[data-ui="nuevo"] main table.lista td button:not(.danger):not(.lineas-btn-eliminar):not(.nd-volver),
html[data-ui="nuevo"] main table.lista td .details-edit.dropdown > summary {
    background: var(--panel); color: var(--accent-light); border: 1px solid var(--nd-border-strong); box-shadow: none; font-weight: 600; }
html[data-ui="nuevo"] main table.lista td .btn:not(.danger):hover,
html[data-ui="nuevo"] main table.lista td button:not(.danger):not(.lineas-btn-eliminar):hover,
html[data-ui="nuevo"] main table.lista td .details-edit.dropdown > summary:hover { background: var(--accent-soft); filter: none; box-shadow: none; }
html[data-ui="nuevo"] #filtro-cuentas { min-width: 300px; }

/* Colores fijos que algunas plantillas escriben en su HTML (texto de éxito/error/aviso): se pasan a los del tema para que
   no pierdan contraste en claro, oscuro ni alto contraste. Solo color de texto; fondos y gráficos no se tocan. */
html[data-ui="nuevo"] main [style*="color:#4ade80"],
html[data-ui="nuevo"] main [style*="color: #4ade80"],
html[data-ui="nuevo"] main [style*="color:#2ecc71"],
html[data-ui="nuevo"] main [style*="color: #2ecc71"],
html[data-ui="nuevo"] main [style*="color:#2e7d32"],
html[data-ui="nuevo"] main [style*="color: #2e7d32"] { color: var(--ok) !important; }
html[data-ui="nuevo"] main [style*="color:#f44336"],
html[data-ui="nuevo"] main [style*="color: #f44336"],
html[data-ui="nuevo"] main [style*="color:#e74c3c"],
html[data-ui="nuevo"] main [style*="color: #e74c3c"],
html[data-ui="nuevo"] main [style*="color:#c62828"],
html[data-ui="nuevo"] main [style*="color: #c62828"],
html[data-ui="nuevo"] main [style*="color:#B3261E"],
html[data-ui="nuevo"] main [style*="color: #B3261E"],
html[data-ui="nuevo"] main [style*="color:#b3261e"],
html[data-ui="nuevo"] main [style*="color: #b3261e"],
html[data-ui="nuevo"] main [style*="color:#f87171"],
html[data-ui="nuevo"] main [style*="color: #f87171"] { color: var(--error) !important; }
html[data-ui="nuevo"] main [style*="color:#f39c12"],
html[data-ui="nuevo"] main [style*="color: #f39c12"],
html[data-ui="nuevo"] main [style*="color:#e0a800"],
html[data-ui="nuevo"] main [style*="color: #e0a800"],
html[data-ui="nuevo"] main [style*="color:#b8860b"],
html[data-ui="nuevo"] main [style*="color: #b8860b"],
html[data-ui="nuevo"] main [style*="color:#7a5a00"],
html[data-ui="nuevo"] main [style*="color: #7a5a00"],
html[data-ui="nuevo"] main [style*="color:#b45309"],
html[data-ui="nuevo"] main [style*="color: #b45309"],
html[data-ui="nuevo"] main [style*="color:#fbbf24"],
html[data-ui="nuevo"] main [style*="color: #fbbf24"] { color: var(--warn) !important; }

html[data-ui="nuevo"] main [style*="color:#7f8c8d"],
html[data-ui="nuevo"] main [style*="color: #7f8c8d"],
html[data-ui="nuevo"] main [style*="color:#666666"],
html[data-ui="nuevo"] main [style*="color: #666666"],
html[data-ui="nuevo"] main [style*="color:#666"],
html[data-ui="nuevo"] main [style*="color: #666"] { color: var(--muted) !important; }

/* Cabecera de página: el título empuja las acciones a la derecha */
html[data-ui="nuevo"] .panel-header h1 { margin-right: auto; }
html[data-ui="nuevo"] .panel > h1:first-child { margin-bottom: 0.9rem; }

/* «Más acciones ▾» (rediseno.js::agruparAcciones) */
.nd-masacc { position: relative; display: inline-block; }
.nd-masacc .nd-drop { display: none; min-width: 300px; right: 0; left: auto; top: calc(100% + 6px); max-width: 92vw; white-space: normal; }
.nd-masacc.nd-abierto > .nd-drop { display: block; animation: nd-pop 0.16s ease; }
.nd-masacc .nd-drop > * { display: block; margin: 0.15rem 0; width: 100%; }
.nd-masacc .nd-drop form { margin: 0; }
.nd-masacc .nd-drop button, .nd-masacc .nd-drop .btn { width: 100%; text-align: left; justify-content: flex-start; background: none; color: var(--text); border: 0;
    box-shadow: none; font-weight: 500; border-radius: 8px; padding: 0.55rem 0.7rem; transform: none; }
.nd-masacc .nd-drop button:hover, .nd-masacc .nd-drop .btn:hover { background: var(--accent-soft); filter: none; transform: none; box-shadow: none; }

/* Estados vacíos */
.nd-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding: 2.4rem 1rem; margin: 0.6rem 0;
    border: 1px dashed var(--nd-border-strong); border-radius: 14px; background: var(--panel-2); color: var(--muted); font-size: 0.95rem; }
.nd-vacio-ico { font-size: 2.1rem; margin-bottom: 0.35rem; opacity: 0.85; }

@media (max-width: 900px) {
    .nd-riel { display: none; }
    .nd-empresa-nombre { max-width: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-drop, .nd-riel, .nd-tx, .nd-tit { animation: none !important; transition: none !important; }
}

/* ── Panel lateral de edición (rediseno.js::panelLateral): los formularios de los <details class="details-edit"> se abren acá ── */
.nd-drawer-fondo { position: fixed; inset: 0; background: rgba(10, 14, 28, 0.45); z-index: 900; opacity: 0; transition: opacity 0.18s ease; }
.nd-drawer-fondo.nd-vis { opacity: 1; }
.nd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 901; display: flex; flex-direction: column;
    background: var(--panel); color: var(--text); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.28); border-left: 1px solid var(--nd-border-strong);
    transform: translateX(100%); transition: transform 0.2s ease; }
.nd-drawer.nd-vis { transform: none; }
html[data-theme="contraste"] .nd-drawer { border-left: 3px solid #000; }
.nd-drawer-cab { display: flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--border); }
.nd-drawer-cab h2 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nd-drawer-x { background: none !important; color: var(--muted) !important; border: 0 !important; box-shadow: none !important; font-size: 1.5rem; line-height: 1;
    padding: 0.1rem 0.5rem; cursor: pointer; border-radius: 8px; }
.nd-drawer-x:hover { background: var(--accent-soft) !important; color: var(--text) !important; }
.nd-drawer-cuerpo { flex: 1; overflow-y: auto; padding: 1.1rem; }
.nd-drawer-cuerpo > form, .nd-drawer-cuerpo > .details-edit-body, .nd-drawer-cuerpo > .dropdown-menu {
    position: static !important; width: auto !important; min-width: 0 !important; max-height: none !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.nd-drawer-cuerpo .campo-grid { grid-template-columns: 1fr !important; }
.nd-drawer-cuerpo label { white-space: normal; }
/* La fila con el botón de guardar queda fija abajo, siempre a la vista aunque el formulario sea largo */
.nd-drawer-cuerpo form > div:last-child:has(button[type="submit"]) { position: sticky; bottom: -1.1rem; margin: 0 -1.1rem -1.1rem !important; padding: 0.8rem 1.1rem !important;
    background: var(--panel); border-top: 1px solid var(--border); display: flex; gap: 0.6rem; flex-wrap: wrap; z-index: 2; }
html[data-ui="nuevo"] .nd-drawer button { background: var(--nd-grad); color: #fff; border-radius: 10px; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-ui="nuevo"] .nd-drawer button.secondary, html[data-ui="nuevo"] .nd-drawer button.nd-cancelar { background: var(--panel); color: var(--accent-light);
    border: 1px solid var(--nd-border-strong); box-shadow: none; }
html[data-ui="nuevo"] .nd-drawer button.danger { background: transparent; color: var(--error); border: 1px solid var(--error); box-shadow: none; }
html[data-ui="nuevo"] .nd-drawer .nd-drawer-x { background: none; box-shadow: none; }
html.nd-drawer-abierto { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .nd-drawer, .nd-drawer-fondo { transition: none; } }