/* ===== app.css ===== */
/* =============================================================
   Konsentido :: Control de solicitudes
   Tema base - colores tomados de konsentido.com
   ============================================================= */

:root {
    /* Marca */
    --kon-azul:        #0066FF;
    --kon-azul-osc:    #0052CC;
    --kon-azul-claro:  #E6F0FF;
    --kon-cian:        #0088CC;
    --kon-coral:       #E36159;

    /* Superficies */
    --kon-fondo:       #F6F7FB;
    --kon-superficie:  #FFFFFF;
    --kon-borde:       #E3E6EF;
    --kon-borde-suave: #F0F2F7;

    /* Texto */
    --kon-texto:       #1F2338;
    --kon-texto-tenue: #6B7280;

    /* Estados del tablero */
    --kon-verde:       #00A870;
    --kon-ambar:       #F5A623;
    --kon-rojo:        #E2445C;
    --kon-morado:      #7B61FF;
    --kon-gris:        #9AA3B5;

    --kon-radio:       10px;
    --kon-sombra:      0 1px 3px rgba(31, 35, 56, .08);
    --kon-sombra-alta: 0 8px 24px rgba(31, 35, 56, .12);

    --bs-primary:      #0066FF;
    --bs-primary-rgb:  0, 102, 255;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--kon-fondo);
    color: var(--kon-texto);
    font-size: .94rem;
}

/* ---------- Botones y controles de marca ---------- */
.btn-primary {
    --bs-btn-bg: var(--kon-azul);
    --bs-btn-border-color: var(--kon-azul);
    --bs-btn-hover-bg: var(--kon-azul-osc);
    --bs-btn-hover-border-color: var(--kon-azul-osc);
    --bs-btn-active-bg: var(--kon-azul-osc);
    --bs-btn-disabled-bg: var(--kon-azul);
    font-weight: 600;
}
.btn { border-radius: 8px; }
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--kon-borde);
    font-size: .92rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--kon-azul);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
a { color: var(--kon-azul); text-decoration: none; }
a:hover { color: var(--kon-azul-osc); }

/* =============================================================
   LOGIN
   ============================================================= */
.login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.login-marca {
    background: linear-gradient(135deg, var(--kon-azul) 0%, var(--kon-cian) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
}
.login-marca img { width: 210px; margin-bottom: 2.5rem; }
.login-marca h1 { font-weight: 800; font-size: 2.1rem; line-height: 1.2; }
.login-marca p  { opacity: .9; max-width: 34ch; }
.login-marca ul { list-style: none; padding: 0; margin-top: 2.5rem; }
.login-marca ul li { margin-bottom: .7rem; opacity: .92; }
.login-marca ul li::before { content: '✓'; font-weight: 700; margin-right: .6rem; }

.login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--kon-superficie);
}
.login-form .caja { width: 100%; max-width: 380px; }

@media (max-width: 900px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-marca { display: none; }
    .login-form { background: var(--kon-fondo); }
}

/* =============================================================
   ESTRUCTURA: barra lateral + contenido
   ============================================================= */
.app-shell { display: flex; min-height: 100vh; }

.lateral {
    width: 250px;
    flex-shrink: 0;
    background: var(--kon-superficie);
    border-right: 1px solid var(--kon-borde);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.lateral-logo { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--kon-borde-suave); }
.lateral-logo img { height: 34px; }

.lateral-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.lateral-titulo {
    font-size: .68rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--kon-texto-tenue);
    padding: 1rem .7rem .4rem;
}
.lateral-nav a {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .7rem; margin-bottom: 2px;
    border-radius: 8px; color: var(--kon-texto);
    font-weight: 500; font-size: .9rem;
}
.lateral-nav a:hover { background: var(--kon-borde-suave); }
.lateral-nav a.active { background: var(--kon-azul-claro); color: var(--kon-azul); font-weight: 700; }
.lateral-nav a .conteo {
    margin-left: auto; font-size: .72rem; font-weight: 700;
    background: var(--kon-borde-suave); color: var(--kon-texto-tenue);
    border-radius: 20px; padding: .05rem .45rem;
}
.lateral-nav a.active .conteo { background: #fff; color: var(--kon-azul); }

.lateral-pie {
    border-top: 1px solid var(--kon-borde-suave);
    padding: .75rem 1rem;
    display: flex; align-items: center; gap: .6rem;
}

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-superior {
    background: var(--kon-superficie);
    border-bottom: 1px solid var(--kon-borde);
    padding: .85rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 20;
}
.barra-superior h1 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.barra-superior .subtitulo { font-size: .8rem; color: var(--kon-texto-tenue); }
.area-trabajo { padding: 1.25rem 1.5rem 3rem; }

/* ---------- Avatares ---------- */
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .72rem; font-weight: 700;
    flex-shrink: 0; border: 2px solid #fff;
}
.avatar-sm { width: 24px; height: 24px; font-size: .62rem; }
.avatar-vacio { background: var(--kon-borde); color: var(--kon-texto-tenue); border-style: dashed; }

/* =============================================================
   Barra lateral contraible
   ============================================================= */
.lateral { transition: width .18s ease; }

.lateral-logo { display: flex; align-items: center; gap: .5rem; }
.lateral-logo .logo-completo { flex: 1; min-width: 0; }
.lateral-logo .logo-mini {
    display: none;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--kon-azul); color: #fff;
    align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem;
}

.boton-colapsar {
    background: none; border: 0; padding: .2rem .3rem;
    color: var(--kon-texto-tenue); border-radius: 6px;
    cursor: pointer; font-size: .85rem; line-height: 1;
    transition: transform .18s ease;
}
.boton-colapsar:hover { background: var(--kon-borde-suave); color: var(--kon-azul); }

/* ---------- Estado contraido ---------- */
.menu-contraido .lateral { width: 64px; }

.menu-contraido .lateral-logo { justify-content: center; padding: 1.1rem .5rem; }
.menu-contraido .lateral-logo .logo-completo { display: none; }
.menu-contraido .lateral-logo .logo-mini { display: flex; }
.menu-contraido .boton-colapsar {
    position: absolute; top: .55rem; right: -11px;
    background: var(--kon-superficie);
    border: 1px solid var(--kon-borde);
    border-radius: 50%; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; z-index: 30;
    transform: rotate(180deg);
}

.menu-contraido .lateral-nav { padding: .75rem .4rem; overflow-x: hidden; }
.menu-contraido .lateral-nav a { justify-content: center; padding: .55rem 0; }
.menu-contraido .etiqueta,
.menu-contraido .lateral-nav .conteo { display: none; }

.menu-contraido .lateral-titulo {
    font-size: 0; padding: .75rem .4rem .35rem;
    border-top: 1px solid var(--kon-borde-suave);
    margin-top: .35rem;
}

.menu-contraido .lateral-pie { justify-content: center; padding: .75rem .4rem; }
.menu-contraido .lateral-pie > a[title="Salir"] { display: none; }

.lateral { position: sticky; }
.lateral-logo { position: relative; }

/* ---------- Ruta de navegación ---------- */
.migas {
    display: flex; flex-wrap: wrap; align-items: center;
    list-style: none; margin: 0 0 .15rem; padding: 0;
    font-size: .78rem; color: var(--kon-texto-tenue);
}
.migas li + li::before {
    content: '›'; margin: 0 .45rem; color: var(--kon-borde);
    font-weight: 700;
}
.migas a { color: var(--kon-texto-tenue); font-weight: 500; }
.migas a:hover { color: var(--kon-azul); text-decoration: underline; }
.migas [aria-current] { color: var(--kon-texto); font-weight: 700; }

/* =============================================================
   Guardando: barra superior y botones ocupados
   ============================================================= */
.barra-carga {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 2000; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--kon-azul), var(--kon-cian), transparent);
    background-size: 50% 100%; background-repeat: no-repeat;
    opacity: 0; transition: opacity .15s ease;
}
.barra-carga.activa {
    opacity: 1;
    animation: barra-recorre 1.1s ease-in-out infinite;
}
@keyframes barra-recorre {
    from { background-position: -50% 0; }
    to   { background-position: 150% 0; }
}

/* Mientras se guarda, el cursor lo dice y no se puede disparar otro cambio */
html.guardando, html.guardando * { cursor: progress !important; }
html.guardando select { pointer-events: none; }

button[aria-busy="true"] { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
    .barra-carga.activa { animation: none; background: var(--kon-azul); }
}

/* ===== tablero.css ===== */
/* =============================================================
   Tablero estilo Monday: grupos, filas y subtareas
   ============================================================= */

.tablero-grupo { margin-bottom: 1.6rem; }

.grupo-encabezado {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: .45rem; padding-left: .15rem;
}
.grupo-encabezado .flecha {
    background: none; border: 0; padding: 0 .15rem;
    color: var(--color-grupo, var(--kon-azul));
    font-size: .8rem; line-height: 1; cursor: pointer;
    transition: transform .18s ease;
}
.grupo-encabezado.colapsado .flecha { transform: rotate(-90deg); }
.grupo-encabezado .nombre {
    font-weight: 800; font-size: 1rem;
    color: var(--color-grupo, var(--kon-azul));
}
.grupo-encabezado .conteo {
    font-size: .78rem; color: var(--kon-texto-tenue); font-weight: 500;
}

/* ---------- Tabla del tablero ---------- */
.tablero-caja {
    background: var(--kon-superficie);
    border-radius: var(--kon-radio);
    box-shadow: var(--kon-sombra);
    overflow: hidden;
    border-left: 5px solid var(--color-grupo, var(--kon-azul));
}
.grupo-encabezado.colapsado + .tablero-caja { display: none; }

table.tablero {
    width: 100%; margin: 0;
    border-collapse: separate; border-spacing: 0;
    font-size: .875rem;
}
table.tablero thead th {
    background: var(--kon-superficie);
    border-bottom: 1px solid var(--kon-borde);
    color: var(--kon-texto-tenue);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: .6rem .75rem; text-align: left; white-space: nowrap;
}
table.tablero tbody td {
    border-bottom: 1px solid var(--kon-borde-suave);
    padding: .5rem .75rem;
    vertical-align: middle;
}
table.tablero tbody tr:last-child td { border-bottom: 0; }
table.tablero tbody tr.fila-tarea:hover { background: #FAFBFF; }

.col-centro { text-align: center !important; }
.col-estrecha { width: 1%; white-space: nowrap; }

/* ---------- Celda principal ---------- */
.celda-titulo { min-width: 280px; }
.celda-titulo .folio {
    font-size: .7rem; font-weight: 700; color: var(--kon-texto-tenue);
    letter-spacing: .03em;
}
.celda-titulo .texto {
    font-weight: 600; color: var(--kon-texto);
    display: block; line-height: 1.3;
}
.celda-titulo a.texto:hover { color: var(--kon-azul); }

.desplegar {
    background: none; border: 0; padding: 0;
    color: var(--kon-texto-tenue); font-size: .7rem;
    width: 18px; cursor: pointer;
    transition: transform .18s ease;
}
.desplegar.abierto { transform: rotate(90deg); color: var(--kon-azul); }
.desplegar:disabled { opacity: .25; cursor: default; }

.pastilla-tipo {
    font-size: .68rem; font-weight: 700; padding: .1rem .45rem;
    border-radius: 5px; text-transform: uppercase; letter-spacing: .03em;
}

/* ---------- Celda de estatus: color que llena la celda ---------- */
.celda-estado { padding: 0 !important; width: 150px; }
.pastilla-estado {
    display: flex; align-items: center; justify-content: center;
    height: 38px; width: 100%;
    color: #fff; font-weight: 600; font-size: .78rem;
    text-align: center; line-height: 1.1; padding: 0 .4rem;
    border: 0; cursor: pointer;
    transition: filter .15s ease;
}
.pastilla-estado:hover { filter: brightness(1.08); }

/* ---------- Prioridad ---------- */
.celda-prioridad { padding: 0 !important; width: 104px; }
.pastilla-prioridad {
    display: flex; align-items: center; justify-content: center;
    height: 38px; width: 100%;
    color: #fff; font-weight: 600; font-size: .78rem;
}

/* ---------- Fechas y SLA ---------- */
.fecha-celda { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sla { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.sla-ok      { color: var(--kon-verde); }
.sla-riesgo  { color: var(--kon-ambar); }
.sla-vencido { color: var(--kon-rojo); }

/* ---------- Avance ---------- */
.barra-avance {
    height: 7px; width: 74px; border-radius: 20px;
    background: var(--kon-borde-suave); overflow: hidden;
}
.barra-avance span {
    display: block; height: 100%; border-radius: 20px;
    background: var(--kon-verde); transition: width .3s ease;
}

/* ---------- Subtareas ---------- */
tr.fila-subtareas > td { padding: 0 !important; background: #FBFCFE; }
tr.fila-subtareas.oculta { display: none; }

.subtareas {
    padding: .3rem 0 .5rem 2.6rem;
    border-left: 3px solid var(--kon-azul-claro);
    margin-left: 1.1rem;
}
.subtarea {
    display: flex; align-items: center; gap: .7rem;
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .83rem;
}
.subtarea:hover { background: #fff; }
.subtarea .punto {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.subtarea .titulo { flex: 1; min-width: 0; }
.subtarea.completada .titulo { color: var(--kon-texto-tenue); text-decoration: line-through; }
.subtarea .meta { color: var(--kon-texto-tenue); font-size: .75rem; white-space: nowrap; }
.subtareas .vacio { color: var(--kon-texto-tenue); font-size: .8rem; padding: .35rem .7rem; }

/* ---------- Estado vacio ---------- */
.sin-datos {
    background: var(--kon-superficie);
    border: 1px dashed var(--kon-borde);
    border-radius: var(--kon-radio);
    padding: 3rem 1.5rem; text-align: center;
    color: var(--kon-texto-tenue);
}
.sin-datos .icono { font-size: 2.4rem; opacity: .35; margin-bottom: .6rem; }

/* ---------- Tarjetas de tablero (indice) ---------- */
.tarjeta-tablero {
    background: var(--kon-superficie);
    border: 1px solid var(--kon-borde);
    border-radius: var(--kon-radio);
    padding: 1.1rem 1.2rem;
    height: 100%;
    transition: box-shadow .18s ease, transform .18s ease;
    display: block; color: inherit;
}
.tarjeta-tablero:hover {
    box-shadow: var(--kon-sombra-alta);
    transform: translateY(-2px);
    color: inherit;
}
.tarjeta-tablero .clave {
    font-size: .68rem; font-weight: 800; letter-spacing: .06em;
    color: #fff; background: var(--kon-azul);
    border-radius: 5px; padding: .12rem .45rem;
}
.tarjeta-tablero h3 { font-size: 1.02rem; font-weight: 700; margin: .6rem 0 .2rem; }
.tarjeta-tablero .descripcion {
    font-size: .82rem; color: var(--kon-texto-tenue);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.2em;
}
.mini-barra { display: flex; height: 6px; border-radius: 20px; overflow: hidden; background: var(--kon-borde-suave); }
.mini-barra span { display: block; height: 100%; }

@media (max-width: 992px) {
    .lateral { display: none; }
    .area-trabajo { padding: 1rem .75rem 3rem; }
    .tablero-caja { overflow-x: auto; }
    table.tablero { min-width: 820px; }
}

/* Etiqueta de estatus dentro de una subtarea */
.etiqueta-subestado {
    color: #fff; font-size: .7rem; font-weight: 600;
    padding: .12rem .5rem; border-radius: 20px;
    white-space: nowrap; min-width: 108px; text-align: center;
}

/* ---------- Tarjetas de resumen (Mi trabajo, indicadores) ---------- */
.tarjeta-dato {
    background: var(--kon-superficie);
    border: 1px solid var(--kon-borde);
    border-left: 4px solid var(--kon-azul);
    border-radius: var(--kon-radio);
    padding: .9rem 1.1rem;
    height: 100%;
}
.tarjeta-dato .numero { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tarjeta-dato .etiqueta { font-size: .76rem; color: var(--kon-texto-tenue); font-weight: 500; }
.tarjeta-dato.alerta  { border-left-color: var(--kon-rojo); }
.tarjeta-dato.alerta  .numero { color: var(--kon-rojo); }
.tarjeta-dato.urgente { border-left-color: var(--kon-ambar); }
.tarjeta-dato.urgente .numero { color: var(--kon-ambar); }

/* Subtarea propia resaltada dentro de un tablero ajeno */
.subtarea.mia { background: var(--kon-azul-claro); }
.subtarea.mia .titulo { font-weight: 600; }

/* =============================================================
   Campanita de novedades
   ============================================================= */
.boton-campana {
    position: relative;
    background: none; border: 1px solid var(--kon-borde);
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--kon-texto-tenue); font-size: 1.05rem;
    cursor: pointer; transition: all .15s ease;
}
.boton-campana:hover { border-color: var(--kon-azul); color: var(--kon-azul); }
.boton-campana.con-novedades { color: var(--kon-azul); border-color: var(--kon-azul); background: var(--kon-azul-claro); }
.boton-campana.con-novedades i { animation: timbre 2.5s ease-in-out 1; }

.boton-campana .globo {
    position: absolute; top: -4px; right: -4px;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 20px; background: var(--kon-coral);
    color: #fff; font-size: .66rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--kon-superficie);
}

@keyframes timbre {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30%      { transform: rotate(14deg); }
    20%, 40%      { transform: rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
    .boton-campana.con-novedades i { animation: none; }
}

.panel-novedades {
    width: 380px; max-width: calc(100vw - 24px);
    padding: 0; border-radius: var(--kon-radio);
    border: 1px solid var(--kon-borde); box-shadow: var(--kon-sombra-alta);
    overflow: hidden;
}
.encabezado-novedades {
    display: flex; align-items: center;
    padding: .75rem 1rem; border-bottom: 1px solid var(--kon-borde-suave);
    font-size: .9rem;
}
.encabezado-novedades .btn-link { font-size: .76rem; text-decoration: none; }

.aviso-sin-asignar {
    display: flex; align-items: center; gap: .55rem;
    padding: .65rem 1rem; font-size: .8rem;
    background: #FFF4E5; color: #8A5300;
    border-bottom: 1px solid #FFE3B8;
}
.aviso-sin-asignar:hover { background: #FFEBD1; color: #6E4200; }

.lista-novedades { max-height: 420px; overflow-y: auto; }
.novedad {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .7rem 1rem; color: var(--kon-texto);
    border-bottom: 1px solid var(--kon-borde-suave);
}
.novedad:last-child { border-bottom: 0; }
.novedad:hover { background: #FAFBFF; color: var(--kon-texto); }
.novedad .punto-novedad { margin-top: .45rem; }
.titulo-novedad { display: block; font-size: .84rem; font-weight: 700; line-height: 1.3; margin-top: .1rem; }
.texto-novedad  { display: block; font-size: .78rem; color: var(--kon-texto-tenue); line-height: 1.35; margin-top: .15rem; }
.cuando-novedad { display: block; font-size: .7rem; color: var(--kon-azul); margin-top: .2rem; font-weight: 600; }

.etiqueta-nueva {
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: var(--kon-coral); color: #fff; border-radius: 4px; padding: .05rem .35rem;
}

.novedades-vacio {
    padding: 1.6rem 1rem; text-align: center;
    color: var(--kon-texto-tenue); font-size: .85rem;
}
.novedades-vacio i { display: block; font-size: 1.6rem; color: var(--kon-verde); margin-bottom: .3rem; }
.novedades-mas { padding: .5rem 1rem; font-size: .75rem; color: var(--kon-texto-tenue); text-align: center; }

/* ---------- Punto azul: movimiento sin ver ---------- */
.punto-novedad {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--kon-azul); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, .18);
    vertical-align: middle; margin-right: .3rem;
}

/* ---------- Renglon con novedad en el tablero ---------- */
table.tablero tbody tr.con-novedad { background: #F5F9FF; }
table.tablero tbody tr.con-novedad:hover { background: #EDF4FF; }
tr.con-novedad .celda-titulo .texto { font-weight: 800; }

/* ===== formularios.css ===== */
/* =============================================================
   Formularios de administracion
   ============================================================= */

.tarjeta-form {
    background: var(--kon-superficie);
    border: 1px solid var(--kon-borde);
    border-radius: var(--kon-radio);
    padding: 1.35rem 1.5rem;
}

.titulo-seccion {
    font-size: .95rem; font-weight: 800;
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: 1.1rem; padding-bottom: .7rem;
    border-bottom: 1px solid var(--kon-borde-suave);
}
.titulo-seccion i { color: var(--kon-azul); }

.form-label { font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.obligatorio { color: var(--kon-rojo); }
.ayuda { font-size: .76rem; color: var(--kon-texto-tenue); line-height: 1.4; }

/* ---------- Aviso de permisos ---------- */
.aviso-permisos {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--kon-azul-claro);
    border-radius: 8px; padding: .7rem .85rem;
    font-size: .79rem; line-height: 1.45;
    margin-bottom: .9rem;
}
.aviso-permisos i { color: var(--kon-azul); font-size: .95rem; margin-top: .05rem; }
.aviso-permisos.aviso-rol { background: #FFF4E5; }
.aviso-permisos.aviso-rol i { color: var(--kon-ambar); }

/* ---------- Selector de tableros ---------- */
.lista-tableros {
    max-height: 420px; overflow-y: auto;
    border: 1px solid var(--kon-borde);
    border-radius: 8px; padding: .5rem;
}
.grupo-tableros + .grupo-tableros { margin-top: .6rem; }
.grupo-tableros .marca {
    display: flex; align-items: center; gap: .4rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--kon-texto-tenue);
    padding: .3rem .4rem;
}
.punto-marca { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.opcion-tablero {
    display: flex; align-items: center; gap: .55rem;
    padding: .32rem .45rem; border-radius: 6px;
    font-size: .82rem; cursor: pointer;
}
.opcion-tablero:hover { background: var(--kon-borde-suave); }
.opcion-tablero input { margin: 0; flex-shrink: 0; }

.clave-mini {
    font-size: .62rem; font-weight: 800; color: #fff;
    border-radius: 4px; padding: .08rem .35rem;
    flex-shrink: 0; letter-spacing: .03em;
}

/* ---------- Avatar grande del perfil ---------- */
.avatar-grande { width: 104px; height: 104px; }
.avatar-grande img,
.avatar-grande span {
    width: 104px; height: 104px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    object-fit: cover; color: #fff; font-size: 2.1rem; font-weight: 800;
    border: 3px solid var(--kon-superficie);
    box-shadow: 0 2px 10px rgba(31,35,56,.15);
}
img.avatar { object-fit: cover; background: var(--kon-borde-suave); }

/* ---------- Selector de tipo de tarea ---------- */
.opciones-tipo { display: flex; flex-direction: column; gap: .4rem; }
.opcion-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-tipo .marca-tipo {
    display: flex; align-items: flex-start; gap: .6rem;
    border: 1px solid var(--kon-borde); border-radius: 8px;
    padding: .55rem .7rem; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.opcion-tipo .marca-tipo i { color: var(--color-tipo); font-size: 1.05rem; margin-top: .1rem; }
.opcion-tipo .marca-tipo strong { display: block; font-size: .85rem; }
.opcion-tipo .marca-tipo small { color: var(--kon-texto-tenue); font-size: .72rem; line-height: 1.3; }
.opcion-tipo:hover .marca-tipo { border-color: var(--color-tipo); }
.opcion-tipo input:checked + .marca-tipo {
    border-color: var(--color-tipo);
    background: color-mix(in srgb, var(--color-tipo) 8%, transparent);
    box-shadow: inset 0 0 0 1px var(--color-tipo);
}
.opcion-tipo input:focus-visible + .marca-tipo { outline: 2px solid var(--kon-azul); outline-offset: 2px; }

/* ---------- Selector de prioridad ---------- */
.opciones-prioridad { display: flex; gap: .35rem; flex-wrap: wrap; }
.opcion-prioridad input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-prioridad span {
    display: inline-block; padding: .3rem .7rem;
    border: 1px solid var(--kon-borde); border-radius: 20px;
    font-size: .8rem; font-weight: 600; cursor: pointer;
    color: var(--kon-texto-tenue);
}
.opcion-prioridad:hover span { border-color: var(--color-prioridad); color: var(--color-prioridad); }
.opcion-prioridad input:checked + span {
    background: var(--color-prioridad); border-color: var(--color-prioridad); color: #fff;
}
.opcion-prioridad input:focus-visible + span { outline: 2px solid var(--kon-azul); outline-offset: 2px; }

/* ===== detalle.css ===== */
/* =============================================================
   Detalle de tarea: linea de tiempo, conversacion, evidencias
   ============================================================= */

.etiqueta-campo {
    font-size: .7rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--kon-texto-tenue);
    margin-bottom: .2rem;
}
.bloque-texto { font-size: .88rem; line-height: 1.6; white-space: pre-line; }

.titulo-seccion .ms-auto { margin-left: auto; }

/* ---------- Pestanas ---------- */
.nav-konsentido { border-bottom: 1px solid var(--kon-borde); gap: .15rem; }
.nav-konsentido .nav-link {
    border: 0; border-bottom: 2px solid transparent;
    color: var(--kon-texto-tenue); font-weight: 600; font-size: .84rem;
    padding: .5rem .85rem; background: none;
}
.nav-konsentido .nav-link:hover { color: var(--kon-azul); }
.nav-konsentido .nav-link.active {
    color: var(--kon-azul); border-bottom-color: var(--kon-azul); background: none;
}
.conteo-pestana {
    font-size: .68rem; font-weight: 700;
    background: var(--kon-borde-suave); color: var(--kon-texto-tenue);
    border-radius: 20px; padding: .05rem .4rem; margin-left: .25rem;
}
.nav-link.active .conteo-pestana { background: var(--kon-azul-claro); color: var(--kon-azul); }

/* ---------- Linea de tiempo ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: .25rem 0 0; position: relative; }
.linea-tiempo::before {
    content: ''; position: absolute;
    left: 13px; top: .8rem; bottom: .8rem;
    width: 2px; background: var(--kon-borde-suave);
}
.linea-tiempo li {
    position: relative; display: flex; gap: .75rem;
    padding: .5rem 0 .8rem 0;
}
.linea-tiempo .marca {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .72rem; flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--kon-superficie);
    z-index: 1;
}
.linea-tiempo .cuerpo { flex: 1; min-width: 0; padding-top: .15rem; }
.linea-tiempo .encabezado { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.linea-tiempo .texto { font-size: .85rem; line-height: 1.4; }
.linea-tiempo .cuando { font-size: .72rem; color: var(--kon-texto-tenue); margin-top: .15rem; }
.linea-tiempo .extracto {
    font-size: .82rem; color: var(--kon-texto);
    background: var(--kon-borde-suave);
    border-radius: 8px; padding: .5rem .7rem; margin-top: .35rem;
    white-space: pre-line;
}
.linea-tiempo li.interno .texto { color: var(--kon-texto-tenue); }

.marca-interna {
    font-size: .66rem; font-weight: 700;
    background: #FFF4E5; color: #9A6200;
    border-radius: 20px; padding: .05rem .45rem;
    white-space: nowrap;
}

/* ---------- Conversacion ---------- */
.conversacion { display: flex; flex-direction: column; gap: .9rem; }
.comentario { display: flex; gap: .65rem; }
.comentario .burbuja {
    background: var(--kon-borde-suave);
    border-radius: 10px; padding: .6rem .8rem; flex: 1; min-width: 0;
}
.comentario.interno .burbuja { background: #FFF8EC; border: 1px solid #FFE3B8; }
.comentario .meta {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .75rem; color: var(--kon-texto-tenue); margin-bottom: .25rem;
}
.comentario .meta strong { color: var(--kon-texto); font-size: .8rem; }
.comentario .texto { font-size: .86rem; line-height: 1.5; }

/* ---------- Subtareas en el detalle ---------- */
.lista-subtareas { display: flex; flex-direction: column; gap: .2rem; }
.renglon-subtarea {
    display: flex; align-items: center; gap: .65rem;
    padding: .45rem .5rem; border-radius: 8px;
}
.renglon-subtarea:hover { background: var(--kon-borde-suave); }
.renglon-subtarea .punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.renglon-subtarea .titulo-sub { font-size: .86rem; font-weight: 600; }
.renglon-subtarea .meta-sub { font-size: .74rem; color: var(--kon-texto-tenue); }
.renglon-subtarea.completada .titulo-sub { text-decoration: line-through; color: var(--kon-texto-tenue); }

/* ---------- Evidencias ---------- */
.lista-evidencias { display: flex; flex-direction: column; gap: .35rem; }
.evidencia {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem; border-radius: 8px;
    border: 1px solid var(--kon-borde-suave);
    font-size: .84rem;
}
.evidencia:hover { border-color: var(--kon-azul); background: #FAFBFF; }
.evidencia .icono { color: var(--kon-azul); font-size: 1.1rem; }

/* ---------- Ficha de datos ---------- */
dl.ficha { margin: 0; font-size: .82rem; }
dl.ficha dt {
    font-weight: 600; color: var(--kon-texto-tenue);
    font-size: .74rem; margin-top: .6rem;
}
dl.ficha dt:first-child { margin-top: 0; }
dl.ficha dd {
    margin: .1rem 0 0; display: flex; align-items: center; gap: .4rem;
}

/* ---------- Tiempo por estatus ---------- */
.barra-estado + .barra-estado { margin-top: .6rem; }
.barra-estado .riel {
    height: 7px; border-radius: 20px; margin-top: .2rem;
    background: var(--kon-borde-suave); overflow: hidden;
}
.barra-estado .riel span { display: block; height: 100%; border-radius: 20px; }

/* ---------- Evidencias por subtarea ---------- */
.bloque-subtarea + .bloque-subtarea { border-top: 1px solid var(--kon-borde-suave); }

.btn-evidencias {
    background: none; border: 1px solid var(--kon-borde);
    border-radius: 6px; padding: .18rem .45rem;
    color: var(--kon-texto-tenue); font-size: .78rem;
    display: inline-flex; align-items: center; gap: .25rem;
    cursor: pointer; flex-shrink: 0;
}
.btn-evidencias:hover { border-color: var(--kon-azul); color: var(--kon-azul); }
.btn-evidencias.con-evidencias { border-color: var(--kon-azul); color: var(--kon-azul); }
.btn-evidencias.abierto { background: var(--kon-azul); border-color: var(--kon-azul); color: #fff; }

.panel-evidencias {
    padding: .5rem .5rem .75rem 1.9rem;
    border-left: 3px solid var(--kon-azul-claro);
    margin: 0 0 .4rem 1rem;
}
.panel-evidencias.oculta { display: none; }

.lista-evidencias.compacta { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.lista-evidencias.compacta .evidencia { padding: .35rem .5rem; font-size: .8rem; }

.miniatura {
    width: 40px; height: 40px; border-radius: 6px;
    object-fit: cover; border: 1px solid var(--kon-borde);
}

/* ---------- Tarea cancelada ---------- */
.tarjeta-cancelada { border-left: 4px solid #374151; background: #F9FAFB; }
.tarjeta-cancelada .titulo-seccion i { color: #374151; }

/* ---------- Le toca revisar a quien pidió la tarea ---------- */
.tarjeta-validar {
    border: 1px solid var(--kon-verde);
    border-left-width: 4px;
    background: #F2FBF7;
}
.tarjeta-validar .titulo-seccion i { color: var(--kon-verde); }