/* Estilos para las vistas de Layouts de archivo (show / edit).
   Barra de encabezado sticky, navegación anclada, preview protagonista
   y codificación por color de los campos. */

/* Wrapper de las vistas de layouts_archivo. Scopea las reglas que tocan
   selectores globales (html, [id^="sec-"]) para que no filtren al resto
   de la app. La variable --bc-sticky-offset queda confinada acá. */
.bc-layouts-root {
  --bc-sticky-offset: 116px; /* alto aprox de la barra (acciones + nav) */
}

/* Scroll suave solo cuando se renderiza una vista de layouts_archivo.
   :has() permite aplicar la regla a html sin filtrar a otras páginas.
   Browsers sin soporte de :has() (raros en 2024+) degradan a scroll
   instantáneo, sin romper nada. */
html:has(.bc-layouts-root) {
  scroll-behavior: smooth;
}

.bc-layouts-root [id^="sec-"] {
  scroll-margin-top: var(--bc-sticky-offset);
}

/* ===== Barra de encabezado sticky ===== */
.bc-layout-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.bc-layout-header .nav-pills .nav-link {
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  color: #555;
  font-size: 0.9rem;
}

.bc-layout-header .nav-pills .nav-link.active {
  background-color: #485fc7;
  color: #fff;
}

/* ===== Preview protagonista (solo edit, ≥lg) ===== */
.layout-preview-sticky {
  position: static;
}

@media (min-width: 992px) {
  .layout-preview-sticky {
    position: sticky;
    top: calc(var(--bc-sticky-offset) + 1rem);
  }
}

.layout-preview-sticky pre {
  font-size: 0.85rem;
  line-height: 1.4;
  max-height: 60vh;
  overflow: auto;
  white-space: pre;
}

/* ===== Codificación por color de campos ===== */
/* Paleta de 8 colores; el JS asigna bc-field-cN a la fila y al segmento
   del preview que representan el mismo campo. */
.bc-field-c0 { --bc-field-color: #e3f2fd; --bc-field-border: #64b5f6; }
.bc-field-c1 { --bc-field-color: #f3e5f5; --bc-field-border: #ba68c8; }
.bc-field-c2 { --bc-field-color: #e8f5e9; --bc-field-border: #66bb6a; }
.bc-field-c3 { --bc-field-color: #fff3e0; --bc-field-border: #ffa726; }
.bc-field-c4 { --bc-field-color: #e0f7fa; --bc-field-border: #4dd0e1; }
.bc-field-c5 { --bc-field-color: #fce4ec; --bc-field-border: #f06292; }
.bc-field-c6 { --bc-field-color: #f9fbe7; --bc-field-border: #d4e157; }
.bc-field-c7 { --bc-field-color: #ede7f6; --bc-field-border: #9575cd; }

/* Borde izquierdo de color en la primera celda de cada fila editable. */
.layout-editor-row td:first-child {
  border-left: 4px solid var(--bc-field-border, transparent);
}

/* Segmento del preview: fondo del color del campo. */
.layout-preview-sticky [data-field-idx] {
  background-color: var(--bc-field-color, transparent);
  border-radius: 2px;
}

/* Resaltado activo (hover en cualquiera de los dos lados). */
.bc-field-active {
  outline: 2px solid #ff9800;
  outline-offset: -2px;
}

/* Valor que no entra en el largo configurado: se marca en rojo. */
.bc-preview-overflow {
  background-color: #ffcdd2 !important;
  color: #b71c1c;
  text-decoration: underline wavy #e53935;
}

/* ===== Pills de tipo de fuente ===== */
.bc-fuente-pills {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.bc-tipo-pill {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  background-color: #f0f0f0;
  color: #333;
  transition: all 150ms ease;
}

.bc-tipo-pill:hover {
  background-color: #e0e0e0;
  color: #222;
}

.bc-tipo-pill.active {
  background-color: #485fc7;
  color: #fff;
  font-weight: 500;
}

/* ===== Chips de template seleccionados ===== */
.bc-chips-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  min-height: 44px;
  align-content: flex-start;
  margin-bottom: 0.75rem;
}

.bc-chips-selected:empty::after {
  content: "Ninguno seleccionado";
  color: #999;
  font-size: 0.9rem;
  align-self: center;
  width: 100%;
}

.bc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  background-color: #485fc7;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  transition: all 150ms ease;
  user-select: none;
}

.bc-chip:hover {
  background-color: #3d4fb5;
}

.bc-chip--orphan {
  background-color: #b45309;
}

.bc-chip--orphan:hover {
  background-color: #92400e;
}

.bc-chip-name {
  font-weight: 500;
}

.bc-chip-slug {
  font-size: 0.85rem;
  opacity: 0.85;
  font-weight: normal;
}

.bc-chip-remove {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
  font-weight: bold;
  opacity: 0.8;
  cursor: pointer;
  margin-left: 0.25rem;
  transition: opacity 150ms ease;
}

.bc-chip-remove:hover,
.bc-chip-remove:focus-visible {
  opacity: 1;
}

.bc-chip-remove:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.bc-template-table {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.bc-template-table table {
  margin-bottom: 0;
}

.bc-template-table tbody tr:hover {
  background-color: #f5f5f5;
}

.bc-row-orphan {
  background-color: #fff8e1;
}

.bc-template-table tbody tr.bc-row-orphan:hover {
  background-color: #fff1c2;
}
/* Estilos de tablas inspirados en DCT-C (adaptados a CSS plano) */

/* Buscador DataTables */
.dataTables_filter input {
  border-radius: 15px !important;
}

.dataTables_paginate .paginate_button {
  border-radius: 15px !important;
}

.dataTables_length select {
  border-radius: 17px !important;
}

/* Tabla secundaria (si aplica) */
#table_id2 {
  border: none;
}

#table_id2 thead th,
#table_id2 tbody td {
  border: none;
}

#preview-column {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin-left: 50px;
}

/* Contenedor de la tabla principal */
#table_id {
  border: none;
}

#table_id thead th,
#table_id tbody td {
  border: none;
}

#table_id_wrapper {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
}

table th {
  font-weight: normal;
}

#table_id {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Encabezado */
#table_id thead th {
  background-color: #f8f8f8;
  color: #333333;
  font-weight: 600;
  padding: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

/* Filas impares/pares */
#table_id tbody tr.odd { background-color: #ffffffe5; }
#table_id tbody tr.even { background-color: #ffffff; }

/* Hover */
#table_id tbody tr:hover {
  background-color: #ffffffbf;
}

#table_id_filter { margin-bottom: 12px; }

#table_id a {
  color: #485fc7 !important; /* Bulma $link aprox */
  text-decoration: underline !important;
}

#table_id a:hover {
  color: #3a51bb !important; /* Bulma $link-hover aprox */
  text-decoration: underline !important;
}

/* Select "Mostrar entradas" */
.dataTables_wrapper .dataTables_length select {
  border-radius: 10px !important;
  border: 1px solid #ccc !important;
  padding: 5px !important;
}

/* Input "Buscar" */
.dataTables_wrapper .dataTables_filter input {
  border-radius: 7px !important;
  border: 1px solid #ccc !important;
  padding: 5px !important;
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */