/* ============================================
   BUTTONS - Option A: Profesional Limpio
   Only 3 variants: ghost (default), primary, danger
   ============================================ */

.btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

.btn-sm {
    font-size: 12px;
    padding: 5px 10px;
}

/* Primary */
.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

/* Success */
.btn-success {
    background: white;
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.btn-success:hover {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

/* Warning */
.btn-warning {
    background: white;
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.btn-warning:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: white;
}

/* Danger */
.btn-danger {
    background: white;
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

/* Info */
.btn-info {
    background: white;
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.btn-info:hover {
    background: var(--info);
    border-color: var(--info);
    color: white;
}

/* Canvas tool buttons - subtle differentiation */
.btn-portante {
    background: white;
    color: var(--gray-600);
    border-color: var(--gray-200);
    border-left: 3px solid var(--danger);
}

.btn-no-portante {
    background: white;
    color: var(--gray-600);
    border-color: var(--gray-200);
    border-left: 3px solid var(--warning);
}

/* Tool buttons - unified ghost style with left accent */
.btn[onclick*="perimeter"],
.btn[id*="perimeterBtn"],
button[id*="perimeterBtn"] {
    border-left: 3px solid var(--info);
}

.btn-area-suelo {
    border-left: 3px solid #ff9800;
}

.btn-area-cubierta {
    border-left: 3px solid #8b5cf6;
}

.btn[onclick*="confirm"],
[id*="confirmBtn"],
[id*="confirmPortanteBtn"],
[id*="confirmNoPortanteBtn"],
[id*="confirmPerimeterBtn"],
[id*="confirmAreaSueloBtn"],
[id*="confirmAreaCubiertaBtn"] {
    border-left: 3px solid var(--success);
}

.btn[onclick*="clearFloor"] {
    border-left: 3px solid var(--danger);
}

.btn[onclick*="exportFloor"] {
    border-left: 3px solid var(--info);
}

.btn[onclick*="measurePortante"],
[id*="measurePortanteBtn"] {
    border-left: 3px solid var(--danger);
}

.btn[onclick*="measureNoPortante"],
[id*="measureNoPortanteBtn"] {
    border-left: 3px solid var(--warning);
}

/* Revestimiento type buttons */
.btn-thermochip {
    border-left: 3px solid var(--info);
}

.btn-aguapanel {
    border-left: 3px solid var(--success);
}

.btn-viroc {
    border-left: 3px solid var(--warning);
}