/* KAVITOR — calculadora.css: módulo de la calculadora en el design system.
   R1: el CSS clásico entra por <link> normales (sin capa) y este módulo se carga DESPUÉS
   → sus reglas ganan por orden a igualdad de especificidad. R2 re-viste aquí las calc-*
   con tokens y los links legacy van muriendo. */

/* --- AJUSTES R1 (encaje bajo el chrome kavitor) --- */
/* El layout clásico restaba el navbar viejo de 56px; el kv-nav mide 64px. */
body.calc-page .calc-layout { height: calc(100vh - 64px); }
/* Chrome dark-first: el fondo base lo pone el token aunque Bootstrap opine. */
body.calc-page { background: var(--bg-base); }
/* Plex en TODA la página (Bootstrap imponía Segoe al body; paridad tipográfica con la home) */
body.calc-page { font-family: var(--font-ui); }

/* (El escudo del chrome vive ahora en kavitor.shield.css — compartido, lo carga el head partial.) */

/* ══════════════ R2 — RE-VESTIDO calc-* con tokens (sin capa: gana al legacy) ══════════════ */

/* --- Sidebar de configuración --- */
.calc-sidebar { background: var(--bg-surface); border-right: var(--bw-1) solid var(--border-subtle); }
.calc-sidebar-header { border-bottom: var(--bw-1) solid var(--border-subtle); }
.calc-sidebar-title { color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.calc-sidebar-subtitle { color: var(--text-secondary); font-size: var(--fs-xs); }
.calc-section-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.margins-panel { background: var(--bg-sunken); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-control); }
.calc-config-toggle { color: var(--text-primary); }
.calc-config-toggle i { color: var(--selection-indicator); }

/* --- Inputs del sistema (pisan Bootstrap+legacy dentro del calc; valor editable = 15px §5) --- */
/* !important TRANSICIONAL (excepcion documentada §8.3): el legacy calculadora.css declara
   background/border/color con !important en valores blanco-alpha (invisibles en tema claro).
   Estas marcas mueren con ese archivo en R3. */
.calc-page .form-control, .calc-page .form-select, .calc-page .calc-textarea, .calc-page .input-group-text {
  background: var(--bg-sunken) !important; color: var(--text-primary) !important;
  border: var(--bw-1) solid var(--control-border, var(--border)) !important; border-radius: var(--radius-control);
}
.calc-page .form-control, .calc-page .form-select { font-size: 15px; padding-block: .28rem; } /* compacto: Bootstrap traía .375rem */
/* Cotas y unidades del alta en mono tabular (§5: el valor editable es numérico técnico) */
.calc-add-form .fg-dim .form-control, .calc-add-form .fg-und .form-control { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Separador × entre Ancho y Alto: notación de cota (500 × 300) */
.calc-add-form .fg-x { align-self: flex-end; display: flex; align-items: center; height: 34px; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-sm); user-select: none; }
.calc-page .form-control::placeholder, .calc-page .calc-textarea::placeholder { color: var(--text-muted) !important; }
.calc-page .form-control:focus, .calc-page .form-select:focus, .calc-page .calc-textarea:focus {
  outline: var(--bw-2) solid var(--focus-ring); outline-offset: 1px;
  border-color: var(--border-strong); box-shadow: none;
}
.calc-page .form-label { color: var(--text-secondary) !important; font-size: var(--fs-xs); }
.calc-page .calc-add-form label { color: var(--text-secondary) !important; } /* labels del alta sin clase form-label (legacy blanco-alpha) */
.calc-page .input-group-text { color: var(--text-secondary); font-size: var(--fs-sm); }

/* --- Fondo de puntos (el patron que gusta, tokenizado para AMBOS temas) --- */
.calc-main {
  background-color: var(--bg-base);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--selection-indicator) 15%, transparent) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

/* --- Añadir pieza: cabecera + tabs --- */
.calc-add-header { background: var(--bg-surface); border-bottom: var(--bw-1) solid var(--border-subtle); }
.calc-section-title { color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.calc-section-title i { color: var(--selection-indicator); }
.calc-tab-btn { background: transparent; border: 0; border-bottom: var(--bw-2) solid transparent; border-radius: 0; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.calc-tab-btn:hover { color: var(--text-primary); background: transparent; }
.calc-tab-btn.active { color: var(--text-primary); border-bottom-color: var(--selection-indicator); background: transparent; }
.calc-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.calc-hint i { color: var(--selection-indicator); }

/* --- Alertas (§7: nunca solo color) --- */
.calc-alert { border: var(--bw-1) solid var(--border); border-radius: var(--radius-control); background: var(--bg-raised); color: var(--text-primary); }
.calc-alert-danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface)); }
.calc-alert-danger i { color: var(--danger); }
.calc-alert-close { background: transparent; border: 0; color: var(--text-secondary); }
.calc-alert-close:hover { color: var(--text-primary); }

/* --- Badge de área --- */
.stats-badge { background: var(--bg-raised); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-control); color: var(--text-secondary); }
.stats-badge .stats-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: var(--fw-medium); }
.stats-badge i { color: var(--selection-indicator); }

/* --- Tabla de piezas — TRANSPARENTE sobre el fondo de puntos (petición 2026-07-19): sin caja, solo líneas de plano --- */
/* La barra del título va INTEGRADA como la de "Añadir pieza" (superficie sólida); el thead sí queda transparente. */
.calc-list-header { background: var(--bg-surface); border-bottom: var(--bw-1) solid var(--border-subtle); }
.calc-table-wrap { background: transparent; border: 0; }
.calc-table { background: transparent; }
.calc-table thead tr { background: transparent; border-bottom: 0; } /* legacy pintaba un degradado azul aquí */
/* Cabecera esmerilada: sticky (ya lo era) + frost para que al scrollear las filas pasen por debajo legibles */
.calc-table thead th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-secondary); background: color-mix(in srgb, var(--bg-base) 80%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-bottom: var(--bw-1) solid var(--border); padding: .5rem 1.25rem; }
.calc-table tbody td { background: transparent; border-bottom: var(--bw-1) solid var(--border); color: var(--text-primary); padding: .55rem 1.25rem; } /* compactado: legacy usaba .85rem */
.calc-table tbody tr:last-child td { border-bottom: var(--bw-1) solid var(--border); } /* sin caja, la última fila también cierra su línea */
.calc-table tbody tr:hover td { background: var(--hover-bg); }
.table-inline-input { background: transparent; border: var(--bw-1) solid transparent; border-radius: var(--radius-control); color: var(--text-primary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); padding-block: 3px; }
.table-inline-input:hover { border-color: var(--border); }
.table-inline-input:focus { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 0; background: var(--bg-sunken); }
.calc-action-btn { background: transparent; border: 0; border-radius: var(--radius-control); color: var(--text-muted); }
.calc-action-btn:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.calc-action-btn--copy:hover { color: var(--selection-indicator); background: var(--selection-wash); } /* duplicar = azul, no rojo */
/* Acciones en reposo casi invisibles: la tabla se lee limpia y aparecen al entrar en la fila (Linear) */
.calc-table .calc-action-btn { opacity: .35; transition: opacity .12s var(--ease); }
.calc-table tr:hover .calc-action-btn, .calc-table .calc-action-btn:focus-visible { opacity: 1; }
@media (hover: none) { .calc-table .calc-action-btn { opacity: 1; } } /* táctil: siempre visibles */

/* Fila recién añadida: entra con wash azul que se desvanece (feedback §7) */
@keyframes kv-row-in { from { background-color: color-mix(in srgb, var(--kv-blue-400) 18%, transparent); } to { background-color: transparent; } }
.calc-table tbody tr { animation: kv-row-in .6s var(--ease); }

/* Chip del sistema activo (cabecera del sidebar) */
.calc-chip-sys { display: inline-block; margin-left: var(--sp-3); padding: 1px var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; color: var(--selection-indicator); border: var(--bw-1) solid color-mix(in srgb, var(--selection-indicator) 45%, transparent); border-radius: var(--radius-control); vertical-align: 2px; }

/* Empty state con linework propio */
.calc-empty-art { width: 120px; height: 56px; margin: 0 auto var(--sp-4); display: block; }
.calc-empty-art .cea-sheet { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.calc-empty-art .cea-piece { fill: color-mix(in srgb, var(--text-muted) 12%, transparent); stroke: var(--text-muted); stroke-width: 1; }
.calc-empty-art .cea-piece--hint { stroke: var(--selection-indicator); stroke-dasharray: 3 3; fill: var(--selection-wash); }

/* --- CALCULAR al fondo del sidebar (columna flex: config crece y scrollea, botón anclado) --- */
.calc-sidebar { display: flex; flex-direction: column; }
#calcConfigBody { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.calc-sidebar .calc-footer { margin-top: auto; padding: var(--sp-5); position: static; }
.calc-sidebar .btn-calcular { width: 100%; height: var(--control-lg); }
.calc-footer { background: var(--bg-surface); border-top: var(--bw-1) solid var(--border-subtle); }

/* --- Responsive de obra (≤960px): táctil de verdad --- */
@media (max-width: 960px) {
  body.calc-page .calc-layout { height: auto; min-height: calc(100vh - 64px); flex-direction: column; display: flex; }
  /* inputs a 16px (iOS no hace zoom) y controles de 44px (§5 touch) */
  .calc-page .form-control, .calc-page .form-select { font-size: 16px; min-height: 44px; }
  .calc-page .calc-textarea { font-size: 16px; }
  .calc-tab-btn { padding: var(--sp-4) var(--sp-5); min-height: 44px; }
  .table-inline-input { min-height: 40px; font-size: 15px; }
  .calc-action-btn { min-width: 44px; min-height: 44px; }
  .calc-add-form .fg-x { display: none; } /* en columna apilada el × pierde el sentido */
  .calc-table-wrap { overflow-x: auto; }
  /* CALCULAR = barra fija inferior, zona del pulgar */
  .calc-sidebar .calc-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; box-shadow: var(--elev-2); }
  .calc-main { padding-bottom: 88px; } /* que la tabla no muera bajo la barra */
}
.btn-calcular { background: var(--action-primary-bg); color: var(--on-accent); border: 0; border-radius: var(--radius-control); font-weight: var(--fw-semibold); letter-spacing: .04em; box-shadow: none; }
.btn-calcular:hover { background: var(--action-primary-hover); }
.btn-calcular:disabled { opacity: .45; }
.calc-page .btn-danger { background: var(--danger); border-color: var(--danger); }
.calc-page .btn-secondary { background: var(--bg-overlay); border-color: var(--border); color: var(--text-primary); }
.calc-page .btn-primary { background: var(--action-primary-bg); border-color: var(--action-primary-bg); }


/* ═══════════════════════════════════════════════════════════════════════════
   CALCULADORA PÚBLICA (sin registro)
   Todo va bajo .calc-page--publica: la calculadora de pago comparte estos
   ficheros y no debe notar ni un píxel de estos ajustes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero + herramienta = UNA pantalla exacta. La tabla de piezas ya tiene scroll
   propio, así que dentro de la calculadora no hay que scrollear; el scroll de
   página empieza directamente en el contenido de abajo. */
.calc-page--publica .calc-tool-viewport {
    display: flex;
    flex-direction: column;
    /* 65px = navbar de Kavitor. Ojo: la app asume 56 en .calc-layout, pero el navbar
       público es más alto y la herramienta se salía 9px — justo lo que provoca esa
       barra de scroll molesta que parece un bug de maquetación. */
    height: calc(100vh - 65px);
    min-height: 34rem;            /* en pantallas muy bajas, prima poder usarla */
}
.calc-page--publica .calc-tool-viewport .calc-layout {
    height: auto;                 /* anula el calc(100vh) de la app */
    flex: 1;
    min-height: 0;                /* imprescindible para que el hijo scrollee */
}

/* Cabecera SEO: una pantalla de app no necesita H1, pero una página que debe
   rankear vive de él. Compacta, para no robarle sitio a la herramienta. */
.calc-page--publica .calc-seo-hero {
    flex: 0 0 auto;
    max-width: 76rem;
    width: 100%;
    margin: 0 auto;
    /* El aire de abajo separa el subtítulo del cuerpo de la calculadora: sin él, el
       texto y la barra de herramientas se tocaban y parecían el mismo bloque. */
    padding: 1rem 1.25rem 1.15rem;
}
/* Mismo acento de color que los h1 de montaje/materiales (.doc-hero h1 .accent). */
.calc-page--publica .calc-seo-hero h1 .accent { color: var(--action-primary-bg); }
.calc-page--publica .calc-seo-hero h1 {
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: .25rem 0 .3rem;
    line-height: 1.2;
}
.calc-page--publica .calc-seo-hero p {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: none;   /* a todo el ancho: acotarlo partía la frase en dos líneas */
    margin: 0;
}

/* Pista de scroll: sin ella una pantalla completa parece el final de la página
   y el contenido de abajo no se lee nunca. */
.calc-page--publica .calc-scroll-cue {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .55rem 1rem;
    font-size: .78rem;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border-top: var(--bw-1, 1px) solid var(--border-subtle, rgba(255,255,255,.08));
}
.calc-page--publica .calc-scroll-cue:hover { color: var(--text-primary); }
.calc-page--publica .calc-scroll-cue i { transition: transform .2s ease; }
.calc-page--publica .calc-scroll-cue:hover i { transform: translateY(2px); }

/* Con la altura fija de la pantalla, el panel de "añadir pieza" (que crece con el
   resultado de una importación) se comía el listado: la lista pedía 290px y se
   quedaba en 42. Se le pone techo y scroll propio, y se le garantiza sitio a la
   lista — que es lo que el usuario necesita ver después de importar. */
.calc-page--publica .calc-add-header {
    max-height: 58%;
    overflow-y: auto;
}
.calc-page--publica .calc-scroll { min-height: 9rem; }

/* Contador de cuota: siempre visible, en alerta al llenarse. */
.calc-chip-cuota {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .3px;
    /* Tokens, no hex: el azul a fuego no era el de marca y en claro se quedaba en
       3,62 de contraste. Mismo patrón que .calc-chip-sys, 117 líneas más arriba. */
    color: var(--selection-indicator);
    background: var(--selection-wash);
    border: var(--bw-1) solid color-mix(in srgb, var(--selection-indicator) 45%, transparent);
}
.calc-chip-cuota.is-full {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

/* ── Contenido SEO bajo la herramienta ─────────────────────────────────────
   El ancho, el ritmo, la tipografía y las tarjetas los pone publicas.css
   (.doc-wrap / .doc-section / .doc-rule / .doc-related__card), EXACTAMENTE igual
   que en montaje y materiales. Aquí solo queda lo que es de esta página. */
/* Esta página arrastra las hojas legacy de la app, que van SIN capa y por tanto le
   ganan a la base de Kavitor: el cuerpo salía a 16px y el artículo se veía un punto
   más grande que montaje o materiales. Se iguala, y solo dentro del artículo — la
   interfaz de la calculadora no se toca. */
.calc-page--publica .doc-wrap { font-size: var(--fs-base); }

.calc-page--publica .calc-seo-breadcrumb {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-8);
}
.calc-page--publica .calc-seo-breadcrumb a { color: var(--link); }
/* SIN subrayado, aquí y en todo el sitio: la señal de enlace es el COLOR (regla del
   design system). Se fuerza porque esta página carga las hojas legacy de la app, que
   sí subrayan, y ganaban por especificidad. */
.calc-page--publica .doc-wrap a,
.calc-page--publica .doc-wrap a:hover,
.calc-page--publica .calc-scroll-cue { text-decoration: none; }

/* La tarjeta de registro cierra la página: separada del bloque de enlaces. */
.calc-page--publica .calc-seo-cta { margin-top: var(--sp-7); }

/* Móvil: la herramienta deja de forzar una pantalla (el sidebar se apila y
   necesita su alto natural) y todo pasa a una sola columna. */
@media (max-width: 991px) {
    .calc-page--publica .calc-tool-viewport { height: auto; min-height: 0; }
    .calc-page--publica .calc-tool-viewport .calc-layout { flex: 0 0 auto; }
    .calc-page--publica .calc-scroll-cue { display: none; }
}