/*
    ===========================================================
    KANBAN BOARD STYLES
    ===========================================================
    Estructura generada por el plugin:

    #kanban-wrapper                        ← altura fija (definir en tu proyecto)
      #kanban                              ← llena el wrapper
        .cd_kanban_board                   ← generado por el plugin
          .cd_kanban_board_scroll_mirror   ← scrollbar espejo (parte superior)
          .cd_kanban_board_titles          ← encabezados de columna
          .cd_kanban_board_blocks          ← columnas con scroll vertical
            .cd_kanban_board_block         ← cada columna
    ===========================================================
*/

/* ───────────────────────────────────────────────────────────
   WRAPPER
   Contenedor externo definido en el HTML del proyecto.
   Ajusta el valor del calc() según la altura de tu navbar/header.
   Es el único elemento que necesita altura fija para que
   toda la cadena flex pueda calcular alturas y activar scroll.
   ─────────────────────────────────────────────────────────── */
#kanban-wrapper {
    height: calc(65vh - 50px); /* ajusta 60px al alto de tu header */
    overflow: hidden;
}


/* ───────────────────────────────────────────────────────────
   KANBAN RAÍZ (#kanban)
   Llena el wrapper. Sin transforms ni trucos de inversión.
   ─────────────────────────────────────────────────────────── */
#kanban {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}


/* ───────────────────────────────────────────────────────────
   TABLERO PRINCIPAL (.cd_kanban_board)
   Flex vertical que distribuye: espejo → títulos → bloques.
   min-height: 0 permite que flex encoja y active el scroll.
   ─────────────────────────────────────────────────────────── */
.cd_kanban_board {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


/* ───────────────────────────────────────────────────────────
   SCROLLBAR ESPEJO (.cd_kanban_board_scroll_mirror)
   Div delgado en la parte superior que muestra el scrollbar
   horizontal. Su ancho interno (.cd_kanban_board_scroll_inner)
   se sincroniza con el scrollWidth real de los bloques via JS.
   overflow-y: hidden evita que aparezca scrollbar vertical aquí.
   ─────────────────────────────────────────────────────────── */
.cd_kanban_board_scroll_mirror {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
}

/* Div interno que determina el ancho scrolleable del espejo.
   Su width se calcula dinámicamente en build_scroll_mirror(). */
.cd_kanban_board_scroll_inner {
    height: 1px; /* altura mínima para que el scrollbar sea visible */
}


/* ───────────────────────────────────────────────────────────
   BARRA DE ENCABEZADOS (.cd_kanban_board_titles)
   Los títulos se mueven con el scroll horizontal vía JS.
   overflow: hidden evita que muestren su propio scrollbar,
   ya que el scroll lo controla el espejo arriba.
   ─────────────────────────────────────────────────────────── */
.cd_kanban_board > .cd_kanban_board_titles {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    overflow: hidden; /* sin scrollbar propio, se mueve via JS */
}

    /* ───────────────────────────────────────────────────────────
   ENCABEZADO DE COLUMNA (.cd_kanban_board_title)
   Usa --column-color (CSS variable inyectada desde JS)
   como borde izquierdo de acento.
   ─────────────────────────────────────────────────────────── */
    .cd_kanban_board > .cd_kanban_board_titles .cd_kanban_board_title {
        min-width: 200px;
        flex: 1;
        padding: 0.75rem 1rem;
        background: #1d3142;
        border-left: 5px solid var(--column-color, #4ca147);
        border-radius: 5px;
        color: #fff;
        box-sizing: border-box;
    }

/* Layout interno del encabezado: ícono + texto en fila */
.cd_kanban_title_inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

.cd_kanban_title_icon {
    color: rgba(103, 119, 138, 0.85);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cd_kanban_title_text {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: 1; /* empuja el badge hacia la derecha */
}

/* Badge con el conteo de tarjetas por columna.
   Gris cuando la columna está vacía, naranja cuando tiene tarjetas.
   Se actualiza automáticamente al mover tarjetas entre columnas. */
.cd_kanban_board_title_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    background: rgba(103, 119, 138, 0.4); /* gris: columna vacía */
    color: #fff;
    font-size: 0.70rem;
    font-weight: 700;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 300ms ease;
}

    /* Naranja cuando la columna tiene al menos una tarjeta */
    .cd_kanban_board_title_badge.has-items {
        background: #ff8d33;
    }


/* ───────────────────────────────────────────────────────────
   CONTENEDOR DE COLUMNAS (.cd_kanban_board_blocks)
   Ocupa todo el espacio vertical disponible tras los títulos.
   overflow-x: auto activa el scroll horizontal real.
   min-height: 0 es el fix clave de flexbox para que el
   elemento pueda encogerse y el scroll vertical funcione.
   ─────────────────────────────────────────────────────────── */
.cd_kanban_board > .cd_kanban_board_blocks {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    overflow-x: auto; /* scroll horizontal real (sincronizado con el espejo) */
    overflow-y: hidden; /* el scroll vertical lo maneja cada columna */
    scrollbar-width: none; /* oculta scrollbar nativo en Firefox */
}

    /* Oculta el scrollbar nativo en Chrome/Safari.
   El scroll sigue funcionando via JS, solo se oculta visualmente. */
    .cd_kanban_board > .cd_kanban_board_blocks::-webkit-scrollbar {
        display: none;
    }


    /* ───────────────────────────────────────────────────────────
   COLUMNA (.cd_kanban_board_block)
   Cada columna tiene scroll vertical independiente.
   min-height: 0 permite que se encoja dentro del flex.
   ─────────────────────────────────────────────────────────── */
    .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block {
        min-width: 200px;
        min-height: 0;
        flex: 1;
        padding: 0.5rem;
        overflow-y: auto; /* scroll vertical por columna */
        overflow-x: hidden;
        background: rgba(54, 69, 79, 0.5);
        border-radius: 10px;
        box-sizing: border-box;
    }


        /* ───────────────────────────────────────────────────────────
   TARJETA (.cd_kanban_board_block_item)
   ─────────────────────────────────────────────────────────── */
        .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item {
            width: 100%;
            height: auto;
            margin: 0 0 10px;
            padding: 0.75rem;
            display: block;
            background: #00365a;
            border-bottom: 2px solid #00365a;
            border-radius: 5px;
            box-sizing: border-box;
            transition: transform 300ms ease-in-out;
            transform: rotate(0deg);
        }

            /* Título de la tarjeta */
            .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item .cd_kanban_board_block_item_title {
                margin: 0 0 0.25rem;
                padding: 0 0 0 20px;
                color: #f0f8ff;
                background: url("images/dragger.png") 0 center no-repeat;
                font-size: 0.70rem;
                line-height: 1rem;
                font-weight: bold;
            }

            /* Tarjeta al arrastrar: rotación e indicación visual */
            .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item.ui-sortable-helper {
                background: #6497b1;
                transform: rotate(-4deg);
            }

            /* Link dentro de la tarjeta */
            .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item a {
                display: block;
            }

            /* Footer de la tarjeta */
            .cd_kanban_board > .cd_kanban_board_blocks .cd_kanban_board_block .cd_kanban_board_block_item .cd_kanban_board_block_item_footer {
                background: #f3f9ff;
                margin: 0.75rem -0.75rem -0.75rem;
                padding: 0.25rem;
                display: block;
                border-top: 3px solid #ff8d33;
            }


/* ───────────────────────────────────────────────────────────
   PLACEHOLDER DE ARRASTRE
   Espacio visual que indica dónde caerá la tarjeta
   mientras se está arrastrando.
   ─────────────────────────────────────────────────────────── */
.cd_kanban_board_block_item_placeholder {
    width: 100%;
    height: 60px;
    margin: 0 0 10px;
    display: block;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    box-sizing: border-box;
}