@import './tokens.css';

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* Barra Lateral Persistente */
.app-sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-main);
  border-right: 1px solid var(--border-main);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-header {
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  border-bottom: 1px solid var(--border-main);
  background-color: var(--bg-main);
}

/* El logo es un sello circular: borde redondo y una línea oscura fina que lo
   despega del crema del fondo, que si no se confunde con el dorado del sello. */
.sidebar-logo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #3a3229;
  flex: none;
}

.sidebar-brand h1 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.sidebar-brand span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.sidebar-nav {
  padding: var(--spacing-md) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex-grow: 1;
}

.nav-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.6px;
  padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xs);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 9px 12px;
  color: var(--text-main);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
  background-color: var(--bg-hover);
  color: var(--accent-primary);
}

/* Set de íconos propio (public/assets/icons.svg): stroke="currentColor" en
   el SVG toma el color que se le dé aquí. width/height también van como
   atributos en el propio <svg> (no solo en esta clase) para que el tamaño
   nunca dependa de que el navegador ya haya cargado este CSS. Verde selva
   fijo (--accent-primary) en vez de heredar el texto, para que el ícono
   se lea como parte de la identidad de marca, no como texto negro. */
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent-primary);
}

.nav-item.active {
  background-color: var(--accent-soft);
  color: var(--accent-primary);
  font-weight: 600;
}

.nav-badge {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  /* .app-sidebar también usa --bg-main: mismo bug, mismo arreglo. El badge
     "2026" de Consultorías es el único que queda con el color por defecto
     — el resto ya trae su propio color por style= inline. */
  background-color: var(--gold-border);
  color: var(--text-main);
  font-weight: 700;
}

.sidebar-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-main);
  background-color: var(--bg-main);
  font-size: 0.85rem;
}

.user-snippet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-role {
  font-size: 0.75rem;
  color: var(--accent-primary);
  font-weight: 600;
  text-transform: capitalize;
}

/* Área de Contenido Principal */
.app-main {
  margin-left: var(--sidebar-width);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--bg-secondary);
  position: relative;
}

/* Rama de chirimoya en cada página del panel, no solo en login/registro:
   el mismo lienzo salvia (--bg-secondary) se repite detrás de cada tarjeta
   en toda la plataforma, así que una sola regla aquí decora las 46 vistas
   a la vez en vez de tocar cada una. header/footer/tarjetas ya tienen su
   propio fondo --bg-main opaco, así que el patrón solo asoma en los
   espacios entre ellos — nunca detrás de texto.
   0.55/300px (probado primero) distraía la vista en todo el panel. 0.25
   con mosaico más grande (420px, motivos más separados entre sí) fue la
   opción elegida al comparar cuatro versiones reales una al lado de otra. */
.app-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--bg-main);
  -webkit-mask-image: url('/assets/patron-chirimoya.svg');
  mask-image: url('/assets/patron-chirimoya.svg');
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 420px 420px;
  mask-size: 420px 420px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* .app-header queda fuera a propósito: ya tiene position:sticky (que un
   position:relative aquí rompería) y su propio z-index:50, así que ya
   se pinta por encima del patrón sin ayuda. */
.content-wrapper,
.app-main > footer {
  position: relative;
  z-index: 1;
}

.app-header {
  height: var(--header-height);
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-xl);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title-area h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-main);
}

.header-title-area p {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.content-wrapper {
  padding: var(--spacing-xl);
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   COMPONENTES Y BOTONES
   ========================================================================== */
/* Sistema de botones: misma altura, mismo radio, degradado sutil.
   La altura fija es lo que evita que una fila de filtros se vea desordenada. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  height: 38px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Fila de botones: separación uniforme y alineación por la base */
.btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.btn-primary {
  background-image: var(--grad-primary);
  border-color: var(--accent-primary-hover);
  color: var(--text-inverse);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-sm);
}

.btn-primary:hover { background-image: var(--grad-primary-hover); }

.btn-gold {
  background-image: var(--grad-gold);
  border-color: #6d4d1c;
  color: var(--text-inverse);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-sm);
}

.btn-gold:hover { background-image: var(--grad-gold-hover); }

.btn-outline {
  background-image: var(--grad-outline);
  border-color: var(--border-main);
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-outline:hover {
  background-image: var(--grad-outline-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Variante pequeña: mantiene proporción, no rompe la alineación de la fila */
.btn-sm {
  height: 30px;
  padding: 0 11px;
  font-size: 0.79rem;
}

.btn-lg {
  height: 44px;
  padding: 0 22px;
  font-size: 0.95rem;
}

/* Tarjetas */
.card {
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

.card-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Grilla de Métricas */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.metric-card {
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.metric-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.metric-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-main);
  margin: var(--spacing-xs) 0;
}

.metric-subtitle {
  font-size: 0.8rem;
  color: var(--accent-primary);
  font-weight: 600;
}

/* ==========================================================================
   PIPELINE DE CONSULTORÍAS (KANBAN / TABLERO)
   ========================================================================== */
.pipeline-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(240px, 1fr));
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-lg);
}

.pipeline-col {
  background-color: var(--bg-main);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.col-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-tertiary);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.col-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.col-count {
  font-size: 0.75rem;
  padding: 2px 8px;
  background-color: var(--bg-main);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-full);
  font-weight: 700;
}

.col-cards {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-grow: 1;
}

.consultoria-card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.consultoria-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
}

.card-code {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.card-org {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.card-title {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modos de Carga */
.badge-modo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  width: fit-content;
}

.badge-modo-a {
  /* --accent-soft es un verde tan pálido que a baja saturación se lee
     azulado. --green-soft es el tono salvia pensado para estados, y el
     texto se mantiene en el verde profundo: 5.48 de contraste. */
  background-color: var(--green-soft);
  color: var(--accent-primary);
  border: 1px solid var(--green-border);
}

.badge-modo-b {
  /* Mismo bug que badge-ubicacion tenía: --gold-soft es el mismo color,
     byte a byte, que --bg-main — invisible en las 12 vistas donde se usa
     este badge. --gold-border sí es un tono distinto (8.70:1 con
     --text-main, verificado con la fórmula de luminancia de tokens.css). */
  background-color: var(--gold-border);
  color: var(--text-main);
  border: 1px solid var(--gold-fill);
}

.card-meta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px dashed var(--border-main);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   DOCUMENTOS: DISTINCIÓN URL (ABRIR) VS UBICACIÓN (GRAMOR ALLE)
   ========================================================================== */
.doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-sm);
  background-color: var(--bg-main);
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-md);
}

.doc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.doc-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
}

.doc-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.doc-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  background-color: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-main);
  color: var(--text-main);
  margin-top: 4px;
  display: inline-block;
}

/* --gold-soft (#f8efd8) era el mismo color, byte a byte, que --bg-main: un
   badge con ese fondo se vuelve invisible sobre cualquier tarjeta o tabla,
   que es justo donde vive el 100% de sus usos reales (documentos, alianzas,
   convenios, programas...). --gold-border sí es un tono distinto y
   --text-main da 8.70:1 de contraste sobre él — verificado con la misma
   fórmula de luminancia relativa que documenta tokens.css. */
.badge-ubicacion {
  background-color: var(--gold-border);
  color: var(--text-main);
  border: 1px solid var(--gold-fill);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Badges de estado del pipeline (ESTADOS_CONSULTORIA / estadosConsultoria.js).
   badge-ubicacion es una sola clase de un solo color: los 7 estados del
   pipeline se veían idénticos entre sí. Aquí cada fase tiene una variante,
   agrupadas por dónde va el trabajo (pendiente → activo → avanzado →
   cerrada) porque la paleta de tokens.css solo tiene tres fondos "suaves"
   con matiz realmente distinto entre sí (dorado, menta, salvia) — siete
   colores únicos habrían significado inventar hex nuevos, que es
   justamente lo que esta paleta evita. El ícono de cada estado (ver
   ESTILOS_ESTADO_CONSULTORIA) es lo que distingue a las fases dentro de un
   mismo grupo. Los cuatro pares texto/fondo están verificados ≥ 6:1. */
.badge-estado {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
}
.badge-estado-pendiente { background-color: var(--gold-border); color: var(--text-main); }
.badge-estado-activo    { background-color: var(--accent-soft); color: var(--text-main); border-color: var(--accent-border); }
.badge-estado-avanzado  { background-color: var(--green-soft);  color: var(--text-main); border-color: var(--green-border); }
.badge-estado-cerrada   { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-main); }

/* ==========================================================================
   TABLAS Y FORMULARIOS
   ========================================================================== */
.data-table-container {
  overflow-x: auto;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background-color: var(--bg-main);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.data-table th {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-md);
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-main);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background-color: var(--bg-hover);
}

.form-group {
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-main);
}

.form-input, .form-select, .form-textarea {
  padding: 10px 14px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-main);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ==========================================================================
   7VORTEX IFRAME Y DIRECTORIO
   ========================================================================== */
.vortex-container {
  width: 100%;
  height: 620px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-main);
  margin-bottom: var(--spacing-xl);
}

.vortex-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Alertas Femenino Genérico */
.alert-notice {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg);
  font-size: 0.9rem;
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}

.alert-notice-gold {
  /* Mismo bug: --gold-soft == --bg-main, así que en las ~10 vistas donde
     este aviso vive sobre una tarjeta solo se distinguía por el borde. */
  background-color: var(--gold-border);
  border: 1px solid var(--gold-fill);
  color: var(--text-main);
}

.alert-notice-green {
  background-color: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-primary-hover);
}

/* Responsive y Adaptación a Celulares en Campo */
@media (max-width: 900px) {
  .mobile-menu-btn {
    display: inline-flex !important;
  }

  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
    width: 100%;
  }

  .app-header {
    padding: 0 var(--spacing-md);
    height: auto;
    min-height: var(--header-height);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .header-title-area p {
    display: none; /* Ahorro de espacio en celular */
  }

  .content-wrapper {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .pipeline-board {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-sm);
  }

  .pipeline-col {
    min-width: 280px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .data-table-container {
    -webkit-overflow-scrolling: touch;
  }

  .data-table th, .data-table td {
    padding: 10px 8px;
    font-size: 0.82rem;
  }
}

@media (max-width: 540px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   INTERACCIÓN: ARRASTRAR TARJETAS Y EDITAR EN EL SITIO
   ========================================================================== */
.pista-arrastre {
  font-size: 0.84rem;
  color: var(--text-secondary);
  background-color: var(--bg-main);
  border: 1px dashed var(--border-main);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-bottom: var(--spacing-md);
}

.consultoria-card[draggable="true"] { cursor: grab; }
.consultoria-card.arrastrando {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(-1.5deg);
}

.col-cards[data-soltar] { min-height: 90px; transition: background-color 0.15s ease; }
.col-cards.zona-activa {
  background-color: var(--accent-soft);
  outline: 2px dashed var(--accent-primary);
  outline-offset: -6px;
  border-radius: var(--radius-sm);
}

.pipeline-col-destacada { border-color: var(--accent-primary); }

/* Texto editable en el sitio */
[data-editable] {
  cursor: text;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
[data-editable]:hover { background-color: var(--bg-hover); }
[data-editable]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
[data-editable].editando {
  background-color: var(--bg-elevated);
  box-shadow: inset 0 0 0 2px var(--accent-primary);
  cursor: text;
}
[data-editable].guardado { background-color: var(--green-soft); }

/* Aviso flotante de guardado */
.aviso-guardado {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background-image: var(--grad-primary);
  color: var(--text-inverse);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2000;
}
.aviso-guardado.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso-guardado[data-tipo="error"] { background-image: var(--grad-gold); }

@media (prefers-reduced-motion: reduce) {
  .aviso-guardado, [data-editable], .consultoria-card, .col-cards[data-soltar] { transition: none; }
  .consultoria-card.arrastrando { transform: none; }
}

/* Desplegables editables dentro de tablas (directorio de aliadas) */
.celda-select {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 3px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-main);
  max-width: 100%;
  transition: background-color .3s ease, border-color .2s ease;
}
.celda-select:hover { border-color: var(--border-card); }
.celda-select.guardado { background-color: var(--green-soft); }
.celda-select:disabled { opacity: .6; }

/* Aviso flotante cuando una edición no se puede guardar */
.aviso-edicion {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 900;
  max-width: 340px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

/* ==========================================================================
   No-Code Suite 2.0: Tableros, Bloques y Formularios
   ========================================================================== */
.slash-item:hover {
  background-color: var(--bg-hover) !important;
}

.col-cards.zona-activa {
  background-color: var(--accent-soft) !important;
  border: 2px dashed var(--accent-primary) !important;
  border-radius: var(--radius-sm);
}

.block-wrapper:hover {
  background-color: rgba(241, 229, 198, 0.4);
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ==========================================================================
   Sidebar Agrupado y Desplegables de Navegación
   ========================================================================== */
.nav-dropdown {
  margin: 4px 0 10px;
}

.nav-dropdown-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: rgba(241, 229, 198, 0.25);
  border: 1px solid var(--border-main);
  user-select: none;
  transition: all 0.15s ease;
}

.nav-dropdown-summary:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.nav-dropdown[open] .nav-dropdown-summary {
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-color: rgba(47, 106, 88, 0.2);
}

.nav-dropdown-summary .dropdown-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.nav-dropdown[open] .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-content {
  padding: 4px 0 4px 6px;
  border-left: 2px solid var(--border-main);
  margin: 4px 0 0 8px;
}

.nav-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 12px 4px;
  margin-top: 6px;
}