/* ═══════════════════════════════════════════════════════════════════════
   newen.css — CSS central de componentes compartidos entre plantillas.

   Cargado una sola vez desde base.html (todas las páginas lo heredan).
   Regla (instructions.md, Sección 8): un componente visual que se repite
   en 2 o más plantillas se define aquí UNA sola vez, nunca copiado en un
   <style> por página. Los estilos que son exclusivos de una sola pantalla
   siguen viviendo en el <style> local de esa plantilla.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Verde de marca NEWEN — Sección 8.0.1 (decisión 27-07-2026) ───────────
   Reemplaza al Azul como --bs-primary. Fuente única de verdad de estos 3
   tokens: antes vivían (el azul viejo) duplicados en el <style> inline de
   base.html, que cargaba DESPUÉS de este archivo y los pisaba en silencio
   — se sacaron de ahí para que esta sea la única definición real. */
:root {
  --bs-primary:              #485448;
  --bs-primary-rgb:          72,84,72;
  --bs-primary-hover:        #3a453a;
  --newen-brand-soft-bg:     #e3e9dd;
  --newen-brand-soft-text:   #3a453a;
}

/* Bootstrap 5.3 precompila --bs-btn-bg/--bs-btn-border-color/--bs-btn-color
   (y sus variantes -hover-/-active-/-disabled-) como hex fijo por
   componente (shade-color() en tiempo de build de Sass) — están
   COMPLETAMENTE desacopladas de --bs-primary/--bs-primary-rgb del :root,
   así que redefinir esos tokens NUNCA alcanzaba para recolorear
   .btn-primary, ni en reposo ni en hover (bug real, confirmado
   descargando bootstrap.min.css real y grepeando la regla). Se
   sobreescriben acá las variables --bs-btn-* propias del componente —
   mismo mecanismo que usa Bootstrap internamente, sin necesitar
   !important (misma especificidad, este archivo carga después). */
.btn-primary {
  --bs-btn-color:               #f0f0e4;
  --bs-btn-bg:                  var(--bs-primary);
  --bs-btn-border-color:        var(--bs-primary);
  --bs-btn-hover-color:         #f0f0e4;
  --bs-btn-hover-bg:            var(--bs-primary-hover);
  --bs-btn-hover-border-color:  var(--bs-primary-hover);
  --bs-btn-active-color:        #f0f0e4;
  --bs-btn-active-bg:           var(--bs-primary-hover);
  --bs-btn-active-border-color: var(--bs-primary-hover);
  --bs-btn-disabled-bg:         var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* .btn-outline-primary — usado en 14 plantillas (confirmado por grep antes
   de tocarlo), mismo desacople exacto que .btn-primary. */
.btn-outline-primary {
  --bs-btn-color:                 var(--bs-primary);
  --bs-btn-border-color:          var(--bs-primary);
  --bs-btn-hover-color:           #f0f0e4;
  --bs-btn-hover-bg:              var(--bs-primary);
  --bs-btn-hover-border-color:    var(--bs-primary);
  --bs-btn-active-color:          #f0f0e4;
  --bs-btn-active-bg:             var(--bs-primary-hover);
  --bs-btn-active-border-color:   var(--bs-primary-hover);
  --bs-btn-disabled-color:        var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* .form-check-input:checked — usado en 3 plantillas (empresa_editar.html,
   ingreso_crear.html, productos.html), mismo hallazgo: Bootstrap fija
   background-color/border-color directo a #0d6efd, sin variable. Acá sí
   son propiedades CSS planas (no --bs-btn-*), por eso alcanza con
   redefinir la propiedad misma. */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ── Resumen de Totales (Neto / IVA / Total) ──────────────────────────────
   Usado en: finanzas/ingreso_crear.html, finanzas/gasto_crear.html,
   ventas/pos_nueva_venta.html, ventas/presupuesto_crear.html.
   Origen: definido primero en Ingresos/Gastos; POS y Presupuestos lo
   reutilizaban por nombre de clase pero sin este CSS, por eso se veían
   como texto plano (bug reportado 12-07-2026, corregido al centralizar). */
.preview-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: .75rem 1.25rem; display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) {
  .preview-card { background: #0f172a; border-color: #334155; }
}
.prev-label { font-size: .68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
.prev-value { font-size: 1rem; font-weight: 700; }
/* Color del Total por defecto = verde de marca (Sección 8.0.1). Gastos lo
   sobreescribe a rojo en su propio <style>, porque ahí sí es semánticamente
   una salida de dinero — ver gasto_crear.html.
   Hallazgo corregido (27-07-2026): usaba var(--nag-primary, #1d6eca) — esa
   variable nunca se definió en ningún lado, así que corría siempre con el
   fallback azul (distinto, además, del azul real de marca de base.html). */
.prev-total .prev-value { font-size: 1.3rem; color: var(--bs-primary); }

/* ── Ayudante de conversión de bultos a kg (Sección 10, 10-08-2026) ─────
   Usado en: finanzas/gasto_crear.html, finanzas/gasto_editar.html, y
   finanzas/aporte_capital_crear.html (Sección 25.8.2, 31-08-2026 — tercer
   consumidor, movido aquí en esa misma tarea en vez de copiar un tercer
   <style> local, Sección 8). Solo se comparte lo genuinamente idéntico en
   los 3 lugares — el resto (ancho fijo de gasto_crear.html, fondo de fila
   .bodega-row-ayudante) sigue local a cada template, por depender de un
   contexto de layout distinto (tabla ancha vs. tarjeta/modal angosto). */
.ayudante-box .form-label { font-size: .68rem; margin-bottom: .15rem; }

/* ── Badge de estado (pill) ────────────────────────────────────────────
   Usado en: usuarios/usuarios.html, usuarios/colaboradores.html (Fase 2,
   12-07-2026). Mismo criterio visual que bodega/insumos.html (que aún lo
   define localmente — no se tocó, fuera de alcance de esta tarea). */
.estado-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: .7rem; font-weight: 600;
}
.estado-activo    { background: #d1fae5; color: #065f46; }
.estado-inactivo  { background: #f1f5f9; color: #64748b; }

/* ── Aviso no bloqueante en el flujo de venta ───────────────────────────
   Usado en: ventas/pos_nueva_venta.html (aviso de Tramo de Precio por
   Cantidad en una línea del carrito) y ventas/_partial_buscador_producto.html
   (stock insuficiente, sin lotes de aves, código no reconocido), que a su
   vez comparten Nueva Venta y Presupuestos.

   Reemplaza a `text-warning` de Bootstrap suelto: ese solo pinta el texto
   de ámbar y sobre el fondo claro de la tarjeta se pierde — un aviso que
   no se lee no es un aviso. Los colores son los mismos que Bootstrap ya
   usa en `alert-warning`, para no inventar una paleta nueva: es el tono
   que el sistema entero ya significa como "advertencia".

   Ámbar y NO rojo a propósito (Tabla 8.0): el rojo queda reservado para
   un bloqueo o error real —RUT inactivo, precio bajo el piso de costo,
   botón de eliminar—, y estos avisos nunca impiden seguir. */
.aviso-linea-carrito {
  display: inline-block;
  background: #fff3cd;
  color: #664d03;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .72rem;
  margin-top: 2px;
}

/* ── Label de altura reservada (filas de campos desiguales) ─────────────
   Usado en: produccion/apicola_crear.html, detalle por colmena de
   Revisión (Sección 23.14) — 5 labels de distinto largo ("Marcos
   reservas (kg)" vs. "Diagnóstico") en la misma fila Bootstrap, algunas
   parten a 2 líneas según el ancho de columna y otras no, desalineando
   verticalmente los inputs/select/badge que quedan debajo. min-height
   calculado para 2 líneas a font-size:.72rem con line-height base de
   Bootstrap (1.5): 2 × .72rem × 1.5 = 2.16rem, con margen. flex-end pega
   el texto al fondo del espacio reservado (junto al campo, nunca
   flotando arriba con un hueco debajo) — el hueco de una label de 1 sola
   línea queda arriba, no abajo. */
.label-detalle-colmena {
  display: flex;
  align-items: flex-end;
  min-height: 2.2rem;
}

/* ── Pestañas de "Avícola" — Módulo de Alimentación y Costeo Avícola
   (Sección 24.6, Paso C, 26-08-2026). Compartida por 4 páginas reales
   (avicola_alimentacion_crear.html, avicola.html, avicola_inventario.html,
   avicola_costos.html) — cada botón navega a una URL propia, nunca
   incrusta contenido vía JS; solo visualmente da la sensación de una
   pantalla con pestañas. Mobile-first (Sección 8): 2 columnas en
   celular, 4 en escritorio; min-height 48px en el botón completo,
   estándar táctil de la Sección 8.7. */
.avicola-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .avicola-tabs { grid-template-columns: repeat(4, 1fr); }
}
.avicola-tab-btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .85rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  text-decoration: none;
  text-align: center;
  padding: .5rem .75rem;
}
.avicola-tab-btn:hover { border-color: var(--bs-primary, #485448); color: var(--bs-primary, #485448); }
.avicola-tab-btn.active {
  background: var(--bs-primary, #485448);
  color: #fff;
  border-color: var(--bs-primary, #485448);
}
@media (prefers-color-scheme: dark) {
  .avicola-tab-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
}

/* ── Área táctil mínima (EDS/Sección 8.7) ────────────────────────────────
   Usado en: ventas/pos_nueva_venta.html, ventas/presupuesto_crear.html
   (duplicado idéntico en ambos <style> locales — centralizado acá). Valor
   corregido de 44px a 48px: el mínimo del proyecto se subió el 03-08-2026,
   pero esta regla se quedó con el valor viejo sin actualizar hasta ahora. */
.tap-target { min-width: 48px; min-height: 48px; }

/* ── Botón cuadrado de ícono único (ej. "+" para agregar al carrito) ─────
   Usado en: ventas/_partial_buscador_producto.html (compartido por POS
   Nueva Venta y Presupuestos). A diferencia de .tap-target (solo un piso
   mínimo, deja que el ancho lo defina el contenedor — correcto para
   inputs/botones de ancho variable), este botón necesita ancho Y alto
   IDÉNTICOS y fijos para verse realmente cuadrado sin importar el ancho
   de la columna Bootstrap en la que caiga — por eso combina con .tap-target
   (que ya garantiza el piso de 48px) fijando también el ancho exacto.
   padding:0 evita que el padding por defecto de .btn distorsione el
   cuadrado; flex centra el ícono ⌖ tanto vertical como horizontalmente. */
.btn-cuadrado {
  width: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Tarjetas de selección (radio nativo de Bootstrap) ────────────────────
   Usado en: produccion/avicola_alimentacion_crear.html (Sección 24.13,
   tarjetas de Etapa), finanzas/aporte_capital_crear.html (Sección 25.8.1,
   tarjetas de Tipo de Línea). Segundo consumidor real del mismo patrón —
   centralizado acá con nombres genéricos (antes vivía duplicado como
   .etapa-card/.etapas-grid solo en el primer template). Radio oculto
   (.btn-check, clase nativa de Bootstrap 5) + <label> estilizada como
   tarjeta grande — sin JS de selección, sin librería nueva. El radio y su
   label deben ir consecutivos en el DOM (label inmediatamente después del
   input) para que el <label for="..."> nativo funcione. */
.tarjeta-radio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .5rem;
  border-radius: 10px;
}
.tarjeta-radio-grid.is-invalid {
  background: var(--bs-danger-bg-subtle, #f8d7da);
  outline: 1px solid var(--bs-danger, #dc2626);
}
@media (min-width: 576px) {
  .tarjeta-radio-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  /* Modificador — Sección 24.13/ítem #42: fuerza 3 columnas fijas cuando
     el número de tarjetas es siempre exactamente 3 (Etapa, Avícola), en vez
     de dejarlas acomodarse solas con auto-fit. NUNCA cambia el comportamiento
     por defecto de .tarjeta-radio-grid — Aportes de Capital (2 tarjetas de
     Tipo de línea, Sección 25.8.1) sigue usando el auto-fit de arriba, sin
     esta clase. */
  .tarjeta-radio-grid--3col { grid-template-columns: repeat(3, 1fr); }
}
.tarjeta-radio {
  display: block;
  width: 100%;
  min-height: 48px;
  text-align: left;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem .9rem;
  cursor: pointer;
}
.tarjeta-radio .tarjeta-radio-titulo { font-weight: 700; font-size: 1rem; }
.tarjeta-radio .tarjeta-radio-subtitulo { font-size: .78rem; color: #64748b; margin-top: .15rem; }
.tarjeta-radio .tarjeta-radio-cantidad { font-size: 1.4rem; font-weight: 700; margin-top: .5rem; }
.btn-check:checked + .tarjeta-radio {
  border-color: var(--bs-primary, #485448);
  background: #e3e9dd;
}
.btn-check:focus-visible + .tarjeta-radio {
  outline: 2px solid var(--bs-primary, #485448);
  outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  .tarjeta-radio { background: #1e293b; border-color: #334155; }
  .tarjeta-radio .tarjeta-radio-subtitulo { color: #94a3b8; }
  .btn-check:checked + .tarjeta-radio { background: #1e2a1e; }
}

/* ── Tarjetas de listado siempre visibles (Sección 8.1.4, 09-09-2026) ─────
   Primer consumidor: produccion/avicola_nidadas.html (rediseño de Nidadas
   Avícolas). A diferencia del patrón de la Sección 8.1.2 — que conmuta
   tabla↔tarjetas según el ancho de pantalla, y hoy vive duplicado en 6
   plantillas —, este componente se define UNA sola vez acá desde el origen
   (Sección 8.1.4: "centralización obligatoria desde el origen") y NO lleva
   ningún @media que lo oculte: la tarjeta es el único formato del listado,
   en toda resolución. Base visual tomada de .pt-card
   (finanzas/pasivos_terceros.html), primer precedente real de tarjeta de
   listado server-side del proyecto: borde #e2e8f0, radio 8px, variante
   prefers-color-scheme dark. No confundir con .tarjeta-radio (selección de
   una opción con radio), que es otro componente. */
.listado-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.listado-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .6rem;
}
.listado-card-titulo { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.listado-card-sub { font-size: .78rem; color: #64748b; margin-top: .1rem; }
/* Pares etiqueta/valor: una columna en pantalla angosta, dos cuando hay
   ancho — la tarjeta sigue siendo tarjeta en escritorio (8.1.4), solo
   aprovecha mejor el espacio horizontal disponible. */
.listado-card-datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem .9rem;
}
@media (min-width: 576px) {
  .listado-card-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.listado-card-dato { display: flex; justify-content: space-between; gap: .5rem; font-size: .84rem; }
.listado-card-dato .listado-card-label { color: #64748b; }
.listado-card-dato .listado-card-valor { font-weight: 600; text-align: right; }
/* Área táctil mínima 48×48 (Sección 8.7) en el control interactivo de la
   tarjeta — exigida explícitamente por la Sección 8.1.4. */
.listado-card-pie { margin-top: .75rem; display: flex; justify-content: flex-end; }
.listado-card-pie .btn { min-height: 48px; display: inline-flex; align-items: center; gap: .4rem; }
/* Modificador de alerta (Sección 19.11 — nidada activa con atraso). Ámbar
   reservado EXCLUSIVAMENTE para avisos reales, nunca para un estado normal
   en curso (Tabla 8.0.2). */
.listado-card--alerta {
  border-color: var(--bs-warning, #ffc107);
  border-left-width: 4px;
  background: #fff8e6;
}
@media (prefers-color-scheme: dark) {
  .listado-card { background: #0f172a; border-color: #334155; }
  .listado-card-sub, .listado-card-dato .listado-card-label { color: #94a3b8; }
  .listado-card--alerta { background: #2a2418; border-color: var(--bs-warning, #ffc107); }
}

/* ── Badge de estado "Incubando" (Tabla 8.0.2, 09-09-2026) ────────────────
   Fondo suave de marca + texto oscuro, el mismo par ya reservado en la
   Sección 8.0.1 para badges/filas destacadas. Existe como clase propia
   (en vez de un style inline) porque se usa en 2 plantillas —
   avicola_nidadas.html y avicola_nidada_detalle.html — y la regla de CSS
   compartido de la Sección 8 aplica desde el segundo consumidor. Los otros
   3 estados (Parcial/Nacido/Fallido) usan clases nativas de Bootstrap
   (text-bg-info / text-bg-success / text-bg-danger) y no necesitan CSS
   propio. */
.badge-nidada-incubando { background: #e3e9dd; color: #3a453a; }
@media (prefers-color-scheme: dark) {
  .badge-nidada-incubando { background: #1e2a1e; color: #cbd5c0; }
}