/* ==========================================================================
   SENKU — Componentes Reutilizables (Tarjetas, Badges, Botones, Tablas)
   ========================================================================== */

/* Tarjetas */
.tarjeta {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    margin-bottom: var(--espacio-lg);
    transition: box-shadow 0.2s ease;
}

.tarjeta:hover {
    box-shadow: var(--sombra-md);
}

.tarjeta-header {
    padding: var(--espacio-md) var(--espacio-lg);
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--senku-font-titulos);
    font-weight: 700;
    color: var(--color-texto);
}

.tarjeta-body {
    padding: var(--espacio-lg);
}

.tarjeta-footer {
    padding: var(--espacio-md) var(--espacio-lg);
    border-top: 1px solid var(--color-borde);
    background-color: var(--senku-niebla);
}

/* Botones con ADN Senku */
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #ffffff;
    font-family: var(--senku-font-texto);
    font-weight: 600;
    border-radius: var(--radio-sm);
    box-shadow: 0 1px 2px rgba(34, 48, 63, 0.08);
    transition: all 0.15s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primario-hover) !important;
    border-color: var(--color-primario-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(46, 90, 85, 0.25);
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(91, 174, 132, 0.3) !important;
}

.btn-outline-primary {
    color: var(--color-primario);
    border-color: var(--color-primario);
    font-family: var(--senku-font-texto);
    font-weight: 600;
    border-radius: var(--radio-sm);
    transition: all 0.15s ease-in-out;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: #ffffff !important;
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(91, 174, 132, 0.25) !important;
}

/* Badges de Estado y Prioridad Accesibles (Norma de contraste Senku) */
.badge-estado,
.badge-prioridad {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radio-full);
    font-family: var(--senku-font-texto);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

/* Estados */
.badge-estado-pendiente,
.badge-estado-planificacion,
.badge-estado-idea {
    background-color: #f1f5f3;
    color: #22303F;
    border-color: #cbd8d1;
}

.badge-estado-desarrollo,
.badge-estado-activo,
.badge-estado-en_progreso {
    background-color: var(--senku-brote-claro);
    color: var(--senku-bosque);
    border-color: #bce0cb;
}

.badge-estado-pruebas,
.badge-estado-revision,
.badge-estado-revisando {
    background-color: #fff8e8;
    color: #946400;
    border-color: #fbe0a4;
}

.badge-estado-terminado,
.badge-estado-resuelto,
.badge-estado-cerrado {
    background-color: #eaf6ee;
    color: var(--senku-exito);
    border-color: #b3e1c3;
}

.badge-estado-bloqueada,
.badge-estado-descartado,
.badge-estado-archivado {
    background-color: #faebec;
    color: var(--senku-error);
    border-color: #f7bfbc;
}

/* Prioridades */
.badge-prioridad-baja {
    background-color: #f1f5f3;
    color: var(--senku-gris-texto);
    border-color: #d8dfdd;
}

.badge-prioridad-media {
    background-color: var(--senku-brote-claro);
    color: var(--senku-bosque);
    border-color: #bce0cb;
}

.badge-prioridad-alta {
    background-color: #fff8e8;
    color: #b07400;
    border-color: #fbe0a4;
}

.badge-prioridad-critica {
    background-color: #faebec;
    color: var(--senku-error);
    border-color: #f7bfbc;
    font-weight: 700;
}

/* Tablas estilizadas Senku */
.tabla-personalizada {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tabla-personalizada th {
    background-color: #f6f9f7;
    color: var(--senku-gris-texto);
    font-family: var(--senku-font-titulos);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-personalizada td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
    font-size: 0.92rem;
    color: var(--color-texto);
}

.tabla-personalizada tbody tr:hover {
    background-color: #f7faf8;
}

/* Botón flotante para Anotar Rápido con ADN Senku */
.btn-anotar-flotante {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1050;
    background: linear-gradient(135deg, var(--senku-bosque) 0%, var(--senku-pizarra) 100%);
    color: #ffffff;
    border: 1px solid rgba(143, 203, 85, 0.4);
    box-shadow: 0 8px 20px rgba(34, 48, 63, 0.25);
    border-radius: var(--radio-full);
    padding: 12px 24px;
    font-family: var(--senku-font-texto);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn-anotar-flotante i {
    color: var(--senku-lima);
    font-size: 1.1rem;
}

.btn-anotar-flotante:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(34, 48, 63, 0.35);
    border-color: var(--senku-lima);
    text-decoration: none;
}