/* ============================================================
   QOSTUM · css/reskin-2026.css — piel correctiva compartida
   Cargar DESPUÉS de theme.css en app, gantt, catalogos, dashboard,
   login, subscription, curso, cedula-unitaria (NO en index.html).
   Solo PIEL (color, fondo, borde, sombra, radio). Cero métrica.
   Lo que aquí no alcanza (!important locales, JS, style= inline)
   lo resuelve scripts/aplicar-actualizacion-2026.js.
   ============================================================ */

/* ── 03 · Hover sin salto en acciones (tarjetas y CTAs de landing quedan fuera) ── */
html:not([data-theme="x"]) button:hover:not(.card):not(.action-card):not(.action-card-button):not(.pricing-cta):not(.main-action-buttons *),
.btn:hover, .btn-control:hover, .btn-primary:hover, .btn-secondary:hover, .btn-neutral:hover, .btn-danger:hover,
.modal-hbtn:hover, .pp-btn:hover, .subs-btn:hover, .subs-btn-secondary:hover, .btn-editar-info:hover,
.btn-quick-save:hover, .btn-quick-open:hover, .ap-btn:hover, .btn-block-ampliar:hover, .gi-paso-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── 04 · Checkboxes y radios: paloma SIEMPRE blanca, sin accent-color ──
   ─────────────────────────────────────────────────────────────────────────
   EXCEPCIÓN DOCUMENTADA a la regla «cero métrica» de este archivo, y la
   única: aquí se les quita el `appearance` nativo para poder pintarlos con
   los colores de la marca, y eso DESTRUYE el tamaño intrínseco que el
   navegador les daba. Un control sin `appearance` y sin `width` no es un
   cuadradito: es una caja vacía que se estira con lo que la rodee. Si el
   tamaño no viaja junto al `appearance:none`, cada página tiene que
   inventarlo y no lo hace igual.

   Lo que se veía sin esto, medido en Chromium el 2026-09-17: siete tamaños
   distintos solo en Presupuestos, radios de 56,3 × 14 px y de 10 × 6, y media
   docena de reglas locales con `!important` peleando por arreglar lo suyo.

   16 px es el tamaño nativo y ya era el de 19 de los 35 controles. El
   `flex: 0 0 auto` es lo que impide que un contenedor flex los estire o los
   aplaste; el `padding: 0`, que el relleno de los campos de texto les coma
   la caja.

   Va dentro de `:where()` a propósito: eso le deja especificidad CERO, así
   que es un SUELO, no una imposición. Cualquier regla local —`.ver-radio` a
   18 px, `.param-res-radio` a 15— sigue ganando sin necesidad de
   `!important`. Lo que un sitio ya no puede es quedarse SIN tamaño. */
:where(input[type="checkbox"]:not(.q-native),
       input[type="radio"]:not(.q-native)) {
  width: 16px; height: 16px;
  min-width: 16px; min-height: 16px;
  flex: 0 0 auto;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}
input[type="checkbox"]:not(.q-native) {
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; position: relative;
  accent-color: auto;
}
input[type="checkbox"]:not(.q-native):hover { border-color: #D97D55; }
input[type="checkbox"]:not(.q-native):checked { background: #D97D55; border-color: #D97D55; }
input[type="checkbox"]:not(.q-native):checked::after {
  content: ''; position: absolute; left: 50%; top: 45%; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -55%) rotate(45deg); pointer-events: none;
}
/* Estado INTERMEDIO (selección parcial). El guion es blanco, así que la caja
   tiene que ir en naranja como la marcada: tal cual venía, era blanco sobre
   blanco y no se veía nada. En Catálogos —`.sel-box`, que ya traía
   `appearance:none` sin regla para este estado— una selección parcial se veía
   idéntica a ninguna selección. Se arregla aquí, no en cada módulo. */
input[type="checkbox"]:not(.q-native)[data-indeterminate="indeterminate"],
input[type="checkbox"]:not(.q-native):indeterminate { background: #D97D55; border-color: #D97D55; }
input[type="checkbox"]:not(.q-native)[data-indeterminate="indeterminate"]::after,
input[type="checkbox"]:not(.q-native):indeterminate::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; background: #fff; border: none; transform: translate(-50%, -50%);
}
input[type="radio"]:not(.q-native) {
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid #d1d5db; border-radius: 50%; background: #fff; cursor: pointer; position: relative;
}
input[type="radio"]:not(.q-native):hover { border-color: #D97D55; }
input[type="radio"]:not(.q-native):checked { border-color: #D97D55; border-width: 5px; }
/* checkboxes de selección de capítulo (antes azul #5B7C99) → naranja de marca, como el resto */
.capitulo-checkbox input[type="checkbox"]:checked { background-color: #D97D55 !important; border-color: #D97D55 !important; }
.capitulo-checkbox input[type="checkbox"]:hover { border-color: #D97D55; }
.capitulo-checkbox input[type="checkbox"]:focus-visible { outline-color: #4886A8; }
html[data-theme="dark"] input[type="checkbox"]:not(.q-native):not(:checked),
html[data-theme="dark"] input[type="radio"]:not(.q-native):not(:checked) { background: var(--qd-surface); border-color: var(--qd-border); }

/* ── 01 · Toggles de Gantt en pastel (nunca sólido) ── */
.gantt-toolbar .btn.btn-tracking { background:#EAF0F5 !important; color:#3E6A8E !important; border:1px solid #D4E1EC !important; }
.gantt-toolbar .btn.btn-tracking.active { background:#D4E1EC !important; color:#2C4A66 !important; border-color:#B8CBD9 !important; }
html[data-theme="dark"] .gantt-toolbar .btn.btn-tracking { background:var(--qd-surface-2) !important; color:#A8C8DE !important; border-color:var(--qd-border) !important; }
html[data-theme="dark"] .gantt-toolbar .btn.btn-tracking.active,
html[data-theme="dark"] .btn-tracking.active { background:rgba(111,160,192,.18) !important; color:#A8C8DE !important; border-color:#6FA0C0 !important; }

/* ── 01 · Títulos de sección que iban en azul → gris cálido ── */
html:not([data-theme="dark"]) .desglose-seccion-titulo,
html:not([data-theme="dark"]) .detalle-title,
html:not([data-theme="dark"]) .cmp-sec-title { color:#524B40 !important; }
html:not([data-theme="dark"]) .desglose-accent-it { border-left-color:#4886A8 !important; }

/* ── 05 · Callout único ── */
.q-callout, .aviso-prueba, .gx-aviso-ojo, .doc-solo-pantalla, .calc-budget-note, .res-info-banner {
  background: var(--callout-bg, #FBF6F0) !important; border: 1px solid var(--callout-border, #F6D9C6) !important;
  color: var(--callout-text, #7A4A2E) !important; border-radius: 8px;
}
.q-callout svg, .aviso-prueba svg, .gx-aviso-ojo svg, .doc-solo-pantalla svg, .calc-budget-note svg, .res-info-banner svg { color: currentColor !important; }

/* ── 07 · Suscripción: sin gradientes azules; tarjeta plana con filete azul acero ── */
.subs-plan-header, .plan-header, .subscribe-modal .payment-section h4 { background-image: none !important; }
[style*="linear-gradient(135deg, #5B7C99"], [style*="linear-gradient(90deg, #5B7C99"] { background-image: none !important; background-color: #4886A8 !important; }

/* ── 08 · Sombras Tailwind → escala cálida ── */
.card, .action-card, .project-card, .modal-content, .menu-dropdown, .qty-popover, .toast {
  --shadow-tw-md: var(--shadow-md); --shadow-tw-lg: var(--shadow-lg);
}
.toast { box-shadow: var(--shadow-toast, 0 16px 40px -14px rgba(31,36,48,.32)) !important; }

/* ── 09 · Fondo de página unificado ── */
html:not([data-theme="dark"]) body { background-color: #FDFCFA; }
html[data-theme="dark"] body::before {
  background-image: linear-gradient(to right, rgba(255,255,255,.015) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.015) 1px, transparent 1px) !important;
}

/* ── 10 · Foco visible unificado ── */
*:focus-visible:not(select):not(input):not(textarea) { outline: 2px solid var(--color-secondary, #4886A8); outline-offset: 2px; }