/* ============================================================================
   TEMA PROCA D para PROCA PPR nativo — OPCIONAL y REVERSIBLE (solo piel).
   Se activa con `?tema=d` (o localStorage 'ppr-tema' = 'd'); ver tema.js.
   Todo cuelga de `html[data-tema="d"]`: sin ese atributo ninguna regla de este
   archivo aplica y la app se ve exactamente como con styles.css.
   NO toca DOM, ids, clases, tamaños ni posiciones: solo color, tipografía,
   superficie, borde, radio y sombra.
   Origen de los tokens: editor-ui-estilo/core/src/styles.css (rama feat/ui-estilo),
   la hoja compartida por PROCA D y su app PPR. Tabla con archivo:linea en
   TEMA-PROCA-D.md. Los valores marcados "derivado" NO existen tal cual en
   PROCA D: son ajustes de contraste (>= 4.5:1 para texto) o equivalentes
   funcionales, calculados con la misma rampa tinta.
   ============================================================================ */

/* ---- Tipografia IBM Plex, local (sin internet). Subconjunto latin. -------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/ibm-plex/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/ibm-plex/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/ibm-plex/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/ibm-plex/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/ibm-plex/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* ---- Tokens ---------------------------------------------------------------- */
html[data-tema="d"]{
  /* paleta tinta / neutros frios (core/src/styles.css:29-38) */
  --pd-ink:#1b2740;
  --pd-ink-hover:#3a4a66;
  --pd-ink-text:#26313f;
  --pd-ink-muted:#6a7684;              /* iconos en reposo (>= 3:1) */
  --pd-text-muted:#566170;             /* derivado: texto secundario >= 4.5:1 sobre panel-3 y sobre cristal; #6a7684 da 4.19:1 en panel-2 */
  --pd-hair:rgba(27,39,64,.10);
  --pd-hair-soft:rgba(27,39,64,.06);
  --pd-hair-strong:rgba(27,39,64,.14);
  --pd-line-input:rgba(27,39,64,.28);  /* derivado: borde de campos y sliders, mas legible que hair-strong */
  --pd-ink-tint:rgba(27,39,64,.08);
  --pd-ink-tint-soft:rgba(27,39,64,.06);
  /* superficies (core/src/styles.css:41-45, 58-61). Alfa subida (.82/.9 -> .92/.96,
     derivado) para que el texto cumpla 4.5:1 aunque el visor de atras sea oscuro. */
  --pd-glass:rgba(255,255,255,.92);
  --pd-glass-panel:rgba(255,255,255,.96);
  --pd-shadow:0 8px 30px rgba(27,39,64,.10);
  --pd-shadow-strong:0 14px 42px rgba(27,39,64,.14);
  --pd-bg:#ffffff;
  --pd-panel-2:#f1f4f7;
  --pd-panel-3:#e2e8ee;
  --pd-canvas-bg:radial-gradient(135% 125% at 50% 20%,#ffffff 0%,#f2f5f8 58%,#e6ecf1 100%);
  /* metricas (core/src/styles.css:78-79) */
  --pd-radius:10px;
  --pd-radius-sm:8px;
  /* senal funcional (core/src/styles.css:75) + su version de texto (derivado, 7:1) */
  --pd-danger:#ff9f43;
  --pd-warning-text:#8a4500;
  /* tipografia (core/src/styles.css:54-55) */
  --pd-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pd-mono:'IBM Plex Mono',ui-monospace,'Cascadia Code','Segoe UI Mono',monospace;

  /* variables propias de PPR, remapeadas para que todo `var(--…)` herede el tema */
  --bg:var(--pd-bg);
  --panel:var(--pd-glass-panel);
  --line:var(--pd-hair-strong);
  --border:var(--pd-hair);
  --text:var(--pd-ink-text);
  --muted:var(--pd-text-muted);
  --accent:var(--pd-ink);
  --warning:var(--pd-warning-text);

  color-scheme:light;
  font-family:var(--pd-sans);
  color:var(--pd-ink-text);
  background:var(--pd-bg);
}
html[data-tema="d"] body{background:var(--pd-bg);color:var(--pd-ink-text);font-family:var(--pd-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-tema="d"] *{scrollbar-color:rgba(27,39,64,.28) transparent}
html[data-tema="d"] ::selection{background:var(--pd-ink);color:#fff}

/* ---- Foco visible (PROCA D no define foco propio: se anade para accesibilidad) -- */
html[data-tema="d"] :is(button,a,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--pd-ink)!important;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,255,255,.9)}
html[data-tema="d"] #viewport:focus-visible,html[data-tema="d"] #canvas:focus-visible{outline:none!important;box-shadow:none}
html[data-tema="d"] #sectionCanvas:focus-visible{outline:2px solid #a3e6dd!important;outline-offset:-2px;box-shadow:none}

/* ---- Cabecera ---------------------------------------------------------------- */
html[data-tema="d"] .app-header{background:var(--pd-glass-panel);color:var(--pd-ink-text);border-bottom:1px solid var(--pd-hair-strong);box-shadow:none}
html[data-tema="d"] .brand{color:var(--pd-ink);font-weight:600;letter-spacing:.03em}
html[data-tema="d"] .arch-toolbar{border:1px solid var(--pd-hair);border-radius:12px;background:transparent}
html[data-tema="d"] .arch-toolbar button[data-loaded=true]::after{color:var(--pd-ink)}
html[data-tema="d"] .case-button #dirtyDot,html[data-tema="d"] #saveButton #dirtyDot{color:var(--pd-ink)}
html[data-tema="d"] #saveButton[data-state=pending]{border-color:var(--pd-ink-muted)}

/* ---- Botones: caja "btn" de PROCA D (core/src/styles.css:231-274) --------------- */
html[data-tema="d"] :is(.button,.icon-button,.tool-button,.point-edit-button,.tooth-choice,.section-toggle){
  background:var(--pd-panel-2);color:var(--pd-ink-text);border:1px solid var(--pd-hair-strong);
  border-radius:var(--pd-radius);box-shadow:none;transition:background .16s ease,border-color .16s ease,color .16s ease}
html[data-tema="d"] :is(.icon-button,.tool-button,.view-button){border-radius:9px}
html[data-tema="d"] :is(.button,.icon-button,.tool-button,.point-edit-button,.tooth-choice,.section-toggle):hover:not(:disabled){
  background:var(--pd-panel-3);border-color:var(--pd-line-input);color:var(--pd-ink)}
html[data-tema="d"] button:disabled{opacity:.38}
/* red de seguridad: cualquier boton sin regla propia no hereda el hover oscuro de styles.css */
html[data-tema="d"] button:hover:not(:disabled){background:var(--pd-ink-tint-soft);border-color:var(--pd-line-input);color:var(--pd-ink)}

/* En clusters flotantes los botones son planos, sin caja, como `.toolbar .btn` (styles.css:156-167) */
html[data-tema="d"] :where(.app-header,.steps,.view-modes,.trace-tools,.retention-tools,.survey-tools,.cleanup-tools,.brush-toolbar,.drawing-bar,.curve-bar,.arch-toolbar,.section-header,.section-panel,.layer-sliders) :is(.button,.icon-button,.tool-button,.view-button){
  background:transparent;border-color:transparent}
html[data-tema="d"] :where(.app-header,.steps,.view-modes,.trace-tools,.retention-tools,.survey-tools,.cleanup-tools,.brush-toolbar,.drawing-bar,.curve-bar,.arch-toolbar,.section-header,.section-panel,.layer-sliders) :is(.button,.icon-button,.tool-button,.view-button):hover:not(:disabled){
  background:var(--pd-ink-tint-soft);border-color:transparent;color:var(--pd-ink)}

/* Botones sin caja propia */
html[data-tema="d"] :is(.stage-nav-next,.layer-eye,.dialog-heading button,.case-info-edit,.object-row,.layer-toggle){color:var(--pd-text-muted)}
html[data-tema="d"] .layer-toggle{color:var(--layer-color)}
html[data-tema="d"] :is(.stage-nav-next,.layer-eye,.dialog-heading button,.case-info-edit,.object-row,.layer-toggle):hover:not(:disabled){background:var(--pd-ink-tint-soft);color:var(--pd-ink);border-color:transparent}
html[data-tema="d"] .layer-toggle:hover:not(:disabled){color:var(--layer-color);border-color:var(--pd-line-input)}
html[data-tema="d"] .stage-nav-next{color:var(--pd-ink-hover)}
html[data-tema="d"] .object-row{color:var(--pd-ink-text)}

/* Primario: tinta solida (styles.css:265-274) */
html[data-tema="d"] :is(.button,.icon-button,.tool-button,.point-edit-button,.tooth-choice).primary,
html[data-tema="d"] .process-panel>button,
html[data-tema="d"] #trimApply{
  background:var(--pd-ink);color:#fff;border-color:var(--pd-ink);font-weight:600}
html[data-tema="d"] :is(.button,.icon-button,.tool-button,.point-edit-button,.tooth-choice).primary:hover:not(:disabled),
html[data-tema="d"] .process-panel>button:hover:not(:disabled),
html[data-tema="d"] #trimApply:hover:not(:disabled){
  background:var(--pd-ink-hover);border-color:var(--pd-ink-hover);color:#fff}
html[data-tema="d"] .process-panel>button{min-height:40px}
html[data-tema="d"] #trimApply:disabled{opacity:.38}

/* Activo/seleccionado: relleno de tinta + borde de tinta (styles.css:260-264, 276-280).
   El borde anade una senal que no depende solo del color. */
html[data-tema="d"] :is(button,.step,.object-row,.layer-item).active:not(.layer-toggle),
html[data-tema="d"] button[aria-pressed="true"]:not(.layer-toggle),
html[data-tema="d"] .app-header button.active,
html[data-tema="d"] .arch-toolbar button.active,
html[data-tema="d"] #designModeButton.active,
html[data-tema="d"] .curve-menu[open]>summary{
  background:var(--pd-ink-tint)!important;color:var(--pd-ink)!important;border-color:var(--pd-ink)!important}
html[data-tema="d"] .layer-toggle[aria-pressed="true"]{background:var(--pd-ink-tint)}
html[data-tema="d"] .arch-toolbar button.active,html[data-tema="d"] .step.active{font-weight:600}

/* ---- Superficies flotantes: receta de cristal (styles.css:126-146, 299-315) ---- */
html[data-tema="d"] :is(.steps,.view-modes,.trace-tools,.retention-tools,.survey-tools,.cleanup-tools,.layer-sliders,.brush-toolbar,.drawing-bar,.curve-bar,.transform-hint,.section-toggle){
  background:var(--pd-glass);color:var(--pd-ink-text);border:1px solid var(--pd-hair);border-radius:14px;
  box-shadow:var(--pd-shadow);backdrop-filter:none;scrollbar-color:rgba(27,39,64,.28) transparent}
html[data-tema="d"] :is(.floating-panel,.stage-panel,.inspector,.process-panel,.section-panel,.case-info){
  background:var(--pd-glass-panel);color:var(--pd-ink-text);border:1px solid var(--pd-hair);border-radius:14px;
  box-shadow:var(--pd-shadow);backdrop-filter:none}
html[data-tema="d"] .section-toggle{border-radius:10px;font-weight:600}
html[data-tema="d"] .transform-hint{border-radius:10px;border-color:var(--pd-hair-strong)}
html[data-tema="d"] .trim-actions{border-left:1px solid var(--pd-hair-strong)}
html[data-tema="d"] .survey-tools .rotation-field{border-left:1px solid var(--pd-hair)}

/* ---- Menu de etapas (equivalente del riel de herramientas, styles.css:343-419) --- */
html[data-tema="d"] .step{color:var(--pd-ink-muted);border-radius:9px}
html[data-tema="d"] .step.complete{color:var(--pd-ink)}
html[data-tema="d"] .step:hover:not(:disabled){background:var(--pd-ink-tint-soft);color:var(--pd-ink);border-color:transparent}
html[data-tema="d"] .step.complete:after{background:var(--pd-ink)}

/* ---- Panel de proceso / parametros ------------------------------------------- */
html[data-tema="d"] .stage-panel h2{font-weight:600;color:var(--pd-ink)}
html[data-tema="d"] .stage-panel p,html[data-tema="d"] .dialog-description{color:var(--pd-ink-text)}
html[data-tema="d"] .process-panel h2{font-family:var(--pd-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--pd-text-muted)}
html[data-tema="d"] .process-panel details{border-top:1px solid var(--pd-hair)}
html[data-tema="d"] .process-panel summary{color:var(--pd-ink-text)}
html[data-tema="d"] .eyebrow{font-family:var(--pd-mono);color:var(--pd-text-muted);letter-spacing:.08em;text-transform:uppercase}

/* ---- Campos, etiquetas, numeros ---------------------------------------------- */
html[data-tema="d"] :is(.field label,.field-value,.stat-pair,.inspector summary span,.vector-fields>span,.case-row small,.appearance-version,.help-note,.mask-actions>span,.corrugation-panel>summary span,.viewport-hint,.viewport-footer,.viewport-footer span,.order-field){color:var(--pd-text-muted)}
html[data-tema="d"] :is(.inspector summary,.appearance-row,.corrugation-panel>summary,.survey-title){color:var(--pd-ink-text)}
html[data-tema="d"] .object-inspector h3{color:var(--pd-ink);font-weight:600;border-top:1px solid var(--pd-hair)}
html[data-tema="d"] .object-inspector h3:first-child{border-top:0}
html[data-tema="d"] .field .input-wrap>span{color:var(--pd-text-muted)}
html[data-tema="d"] :is(.slider-field>output,.survey-angle output,.curve-section-dimension output,.brush-toolbar output,.field output){
  font-family:var(--pd-mono);font-variant-numeric:tabular-nums;color:var(--pd-ink-text)}
html[data-tema="d"] .curve-bar-label,html[data-tema="d"] .drawing-bar>span{color:var(--pd-ink)}
html[data-tema="d"] .warnings,html[data-tema="d"] .warning-text,html[data-tema="d"] .help-note.warning{color:var(--pd-warning-text)}
html[data-tema="d"] .empty-list{opacity:1;color:var(--pd-text-muted)}

html[data-tema="d"] :is(input[type=number],input[type=text],select,.dialog-input,.dialog-select,.orientation-select,.rotation-field input[type=number],.section-position input[type=number]){
  background:var(--pd-panel-2);color:var(--pd-ink-text);border:1px solid var(--pd-line-input);border-radius:var(--pd-radius-sm)}
html[data-tema="d"] input[type=number]{font-family:var(--pd-mono);font-variant-numeric:tabular-nums}
html[data-tema="d"] option{background:#fff;color:var(--pd-ink-text)}
html[data-tema="d"] .appearance-row input[type=color]{background:var(--pd-panel-2);border:1px solid var(--pd-line-input);border-radius:var(--pd-radius-sm)}
html[data-tema="d"] input[type=checkbox]{accent-color:var(--pd-ink)}

/* Deslizadores: pista 4 px + pulgar de tinta (styles.css:1081-1088; tamanos sin cambio) */
html[data-tema="d"] input[type=range]{accent-color:var(--pd-ink)}
html[data-tema="d"] :is(.slider-field>input[type=range],.survey-angle input[type=range],.curve-section-dimension input[type=range],.field input[type=range]){background:transparent}
html[data-tema="d"] :is(.slider-field>input[type=range],.survey-angle input[type=range],.curve-section-dimension input[type=range],.field input[type=range])::-webkit-slider-runnable-track{background:var(--pd-line-input);border:1px solid var(--pd-hair-strong);border-radius:4px}
html[data-tema="d"] :is(.slider-field>input[type=range],.survey-angle input[type=range],.curve-section-dimension input[type=range],.field input[type=range])::-webkit-slider-thumb{background:var(--pd-ink);border:1px solid #fff;box-shadow:0 0 0 1px #fff,0 1px 4px rgba(27,39,64,.35)}
html[data-tema="d"] :is(.slider-field>input[type=range],.survey-angle input[type=range],.curve-section-dimension input[type=range])::-moz-range-track{background:var(--pd-line-input);border:1px solid var(--pd-hair-strong);border-radius:4px}
html[data-tema="d"] :is(.slider-field>input[type=range],.survey-angle input[type=range],.curve-section-dimension input[type=range])::-moz-range-thumb{background:var(--pd-ink);border:1px solid #fff;box-shadow:0 0 0 1px #fff,0 1px 4px rgba(27,39,64,.35)}
html[data-tema="d"] .layer-opacity input,html[data-tema="d"] .section-position input[type=range]{accent-color:var(--pd-ink)}

/* ---- Inspector, capas, objetos ------------------------------------------------ */
html[data-tema="d"] .visibility-slider>span{color:var(--pd-ink-text)}
html[data-tema="d"] .layer-item.visible{background:var(--pd-ink-tint-soft);color:var(--pd-ink-text);border-color:var(--pd-hair)}
html[data-tema="d"] .object-row.active .object-icon{color:var(--pd-ink)}
html[data-tema="d"] .object-icon{color:var(--pd-ink-muted)}
html[data-tema="d"] .case-row,html[data-tema="d"] .export-link{background:var(--pd-panel-2);color:var(--pd-ink-text);border:1px solid var(--pd-hair-strong);border-radius:var(--pd-radius-sm)}
html[data-tema="d"] .case-row:hover,html[data-tema="d"] .export-link:hover{background:var(--pd-panel-3);border-color:var(--pd-line-input)}
html[data-tema="d"] .delete-button{background:#fff;color:var(--pd-ink-text);border-color:var(--pd-danger)}
html[data-tema="d"] .delete-button:hover:not(:disabled){background:rgba(255,159,67,.16);border-color:var(--pd-danger);color:var(--pd-ink-text)}
html[data-tema="d"] .corrugation-panel{border:1px solid var(--pd-hair-strong)}
html[data-tema="d"] .mask-preview canvas{border:1px solid var(--pd-hair-strong)}
html[data-tema="d"] .thickness-readout,html[data-tema="d"] .thickness-readout span:nth-child(n){color:var(--pd-ink-text)}
html[data-tema="d"] .empty-import{background:var(--pd-panel-2);color:var(--pd-ink);border:1px dashed var(--pd-ink-muted)}
html[data-tema="d"] .vector-fields{border-top:1px solid var(--pd-hair)}

/* ---- Menu de curvas / paleta de piezas (styles.css:299-315, 4: curve-menu) ------ */
html[data-tema="d"] .curve-menu>summary{background:var(--pd-panel-2);color:var(--pd-ink-text);border:1px solid var(--pd-hair-strong);border-radius:9px}
html[data-tema="d"] .curve-menu>summary:hover{background:var(--pd-panel-3)}
html[data-tema="d"] #traceTools #curveMenu{border-top:1px solid var(--pd-hair)}
html[data-tema="d"] .curve-menu-types{background:var(--pd-glass-panel);border:1px solid var(--pd-hair);border-radius:12px;box-shadow:var(--pd-shadow-strong);backdrop-filter:none}
html[data-tema="d"] #traceTools #curveMenuTypes{background:none;border:0;box-shadow:none}
html[data-tema="d"] .curve-menu-types>details+details{border-top:1px solid var(--pd-hair)}
html[data-tema="d"] .curve-menu-types summary:hover{background:var(--pd-ink-tint-soft)}
html[data-tema="d"] .curve-menu-types summary:after,html[data-tema="d"] .curve-menu-types summary small,html[data-tema="d"] .object-type>summary>small,html[data-tema="d"] .spline-backup{color:var(--pd-text-muted)}
html[data-tema="d"] .curve-menu-types summary>span:first-child{color:var(--pd-ink-text)}
html[data-tema="d"] .object-type{border-bottom:1px solid var(--pd-hair)}

/* ---- Barras de herramientas especificas ------------------------------------- */
html[data-tema="d"] .trim-count{background:var(--pd-ink-tint);color:var(--pd-ink);border:1px solid var(--pd-hair-strong);font-family:var(--pd-mono)}
html[data-tema="d"] .sculpt-shortcut kbd{font-family:var(--pd-mono);opacity:.8}
html[data-tema="d"] .survey-tools .survey-colors i{font-family:var(--pd-mono)}
html[data-tema="d"] .spline-context kbd{font-family:var(--pd-mono)}

/* ---- Tarjeta de caso (styles.css:164-174) ---------------------------------------- */
html[data-tema="d"] .case-info dt{font-family:var(--pd-mono);font-weight:500;color:var(--pd-text-muted)}
html[data-tema="d"] .case-info dd{font-weight:500;color:var(--pd-ink)}
html[data-tema="d"] .case-info-edit{color:var(--pd-text-muted)}
html[data-tema="d"] .case-info-edit:hover{background:var(--pd-ink-tint);color:var(--pd-ink)}
html[data-tema="d"] #caseName{color:var(--pd-ink-text)}

/* ---- Seccion 2D ---------------------------------------------------------------
   El lienzo de la seccion se pinta en oscuro desde section-view.js (fillStyle '#0b0d0f'
   y trazos claros): se respeta ese interior; solo se viste el marco. */
html[data-tema="d"] .section-panel{border-radius:14px;box-shadow:var(--pd-shadow)}
html[data-tema="d"] .section-header{border-bottom:1px solid var(--pd-hair)}
html[data-tema="d"] .section-header strong{font-family:var(--pd-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--pd-text-muted)}
html[data-tema="d"] .section-position{border-top:1px solid var(--pd-hair);color:var(--pd-text-muted)}
html[data-tema="d"] .section-position input[type=number]{font-family:var(--pd-mono)}

/* ---- Dialogos y panel de opciones (styles.css:133-135) ------------------------------ */
html[data-tema="d"] dialog{background:var(--pd-glass-panel);color:var(--pd-ink-text);border:1px solid var(--pd-hair);border-radius:14px;box-shadow:var(--pd-shadow-strong);scrollbar-color:rgba(27,39,64,.28) transparent}
html[data-tema="d"] dialog::backdrop{background:rgba(27,39,64,.28);backdrop-filter:blur(3px)}
html[data-tema="d"] .dialog-heading h2{font-weight:600;color:var(--pd-ink)}
html[data-tema="d"] #dialog.options-panel{border-radius:12px;box-shadow:var(--pd-shadow-strong)}
html[data-tema="d"] #dialog.options-panel .dialog-heading{background:#fff}
html[data-tema="d"] .tab-overlay{background:rgba(255,255,255,.96);color:var(--pd-ink-text)}

/* ---- Notificaciones: franja inferior reservada (styles.css:70-71, 85-93) --------------- */
html[data-tema="d"] :is(.toast,.toast.warning,.toast.error,.preview-warning,.busy-overlay){
  background:var(--pd-glass-panel);color:var(--pd-ink-text);border:0;border-top:1px solid var(--pd-hair-strong);
  box-shadow:none;font-family:var(--pd-mono);letter-spacing:.02em}
html[data-tema="d"] :is(.toast.warning,.preview-warning){border-top:2px solid var(--pd-danger)}
html[data-tema="d"] .toast.error{border-top:2px solid var(--pd-danger)}
/* el estado no depende solo del color del borde: se antepone un simbolo */
html[data-tema="d"] :is(.toast.error,.toast.warning,.preview-warning)::before{content:"\26A0\00a0";color:var(--pd-warning-text)}
html[data-tema="d"] .notification-progress{background:var(--pd-hair-strong)}
html[data-tema="d"] .notification-progress>span{background:var(--pd-ink)}
html[data-tema="d"] .spinner{border-color:var(--pd-hair-strong);border-top-color:var(--pd-ink)}
html[data-tema="d"] .busy-overlay strong{font-weight:600}
html[data-tema="d"] .drop-overlay{background:rgba(255,255,255,.88);border:2px dashed var(--pd-ink);color:var(--pd-ink)}

/* ---- Menu radial y menu contextual (styles.css:98-108). Los sectores del menu radial
   se pintan con atributos SVG (pie-menu.js): las reglas CSS los sobreescriben. ----------- */
html[data-tema="d"] .ppr-pie g[role=menuitem] path{fill:#fff;stroke:var(--pd-line-input)}
html[data-tema="d"] .ppr-pie g[role=menuitem] text{fill:var(--pd-ink-text);font-family:var(--pd-sans)}
html[data-tema="d"] .ppr-pie g[role=menuitem][aria-current=true] path{fill:var(--pd-ink);stroke:var(--pd-ink)}
html[data-tema="d"] .ppr-pie g[role=menuitem][aria-current=true] text{fill:#fff}
html[data-tema="d"] .ppr-pie>span{background:var(--pd-glass-panel)!important;color:var(--pd-ink)!important;text-shadow:none!important;font-family:var(--pd-sans)!important;border:1px solid var(--pd-hair);border-radius:8px;padding:2px 4px}
html[data-tema="d"] .ppr-pie button{background:var(--pd-glass-panel);color:var(--pd-ink);border-color:var(--pd-line-input);box-shadow:var(--pd-shadow)}
html[data-tema="d"] .ppr-pie button.active{background:var(--pd-ink);color:#fff;border-color:var(--pd-ink)}
html[data-tema="d"] .pie-label{background:var(--pd-glass-panel);color:var(--pd-ink);border:1px solid var(--pd-hair-strong)}
html[data-tema="d"] .spline-context{background:var(--pd-glass-panel);color:var(--pd-ink-text);border:1px solid var(--pd-hair);border-radius:12px;box-shadow:var(--pd-shadow-strong)}
html[data-tema="d"] .spline-context button{color:var(--pd-ink-text);background:none;border:0}
html[data-tema="d"] .spline-context button:hover,html[data-tema="d"] .spline-context button:focus-visible{background:var(--pd-ink-tint);color:var(--pd-ink)}

/* ---- Indicador de GPU, gizmo, ejes -------------------------------------------------------
   Los colores de estado del indicador son SENAL FUNCIONAL (verde/ambar); solo se
   oscurece el borde para que se lea sobre fondo claro. El estado ya tiene texto
   accesible (aria-label). */
html[data-tema="d"] .gpu-light{background:var(--pd-ink-faint,#8a95a1);border:1px solid var(--pd-ink-muted);box-shadow:none}
html[data-tema="d"] .gpu-light[data-state=active]{background:#53f396;border-color:#1b7f46;box-shadow:0 0 0 3px rgba(83,243,150,.28)}
html[data-tema="d"] .gpu-light[data-state=software]{background:#e7ac49;border-color:#8a5a0a;box-shadow:0 0 0 3px rgba(231,172,73,.28)}
html[data-tema="d"] .view-gizmo{background:var(--pd-ink-tint-soft)}
html[data-tema="d"] .gizmo-axis{background:var(--axis-color);color:#13232b;border-color:var(--axis-color)}
html[data-tema="d"] .gizmo-center{background:var(--pd-glass-panel);color:var(--pd-ink);border:1px solid var(--pd-line-input)}
html[data-tema="d"] .gizmo-axis:hover:not(:disabled){background:var(--axis-color);border-color:var(--axis-color);color:#13232b;filter:brightness(1.12)}
html[data-tema="d"] .gizmo-center:hover:not(:disabled){background:var(--pd-panel-3);color:var(--pd-ink)}
html[data-tema="d"] .empty-import:hover:not(:disabled){background:var(--pd-panel-3);border-color:var(--pd-ink)}

/* ---- Opcional dentro del opcional: visor claro de PROCA D ----------------------------------
   OFF por omision. Se activa con `?visor=claro` (tema.js pone data-visor="claro").
   app.js pinta el fondo del visor con style inline (selector de color de Opciones);
   por eso esta regla usa !important: mientras este modo este activo, el selector de
   fondo de Opciones no tiene efecto visible. Con `?visor=oscuro` (o quitando el
   tema) vuelve a mandar app.js. Degradado = --canvas-bg de core/src/styles.css:48. */
html[data-tema="d"][data-visor="claro"] #viewport{background:var(--pd-canvas-bg)!important}
html[data-tema="d"][data-visor="claro"] .empty-import{background:var(--pd-glass-panel)}

/* ---- Movimiento reducido: sin transiciones ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html[data-tema="d"] :is(button,.button,.icon-button){transition:none}
}
html[data-tema="d"] .app-header{border:1px solid var(--pd-hair-strong);box-shadow:var(--pd-shadow)}
html[data-tema="d"] .app-header .arch-toolbar{border:0;border-left:1px solid var(--pd-hair-strong);border-radius:0}
html[data-tema="d"] .project-menu .project-actions{background:var(--pd-glass-panel);box-shadow:var(--pd-shadow-strong)}