/* ================================== */
/* css/buttons.css                */
/* Estilos generales para botones   */
/* ================================== */

/* Estilo base para todos los botones con la clase .btn */
.btn {
    display: inline-block;      /* Comportamiento inline-block */
    font-weight: 600;           /* Texto en negrita ligera */
    color: var(--text-color);   /* Color de texto por defecto (sobrescribible) */
    text-align: center;         /* Texto centrado */
    vertical-align: middle;     /* Alineación vertical */
    cursor: pointer;            /* Cursor de mano */
    user-select: none;          /* Evita selección de texto */
    background-color: transparent; /* Fondo transparente por defecto */
    border: 1px solid transparent; /* Borde transparente por defecto */
    padding: 10px 20px;         /* Espaciado interno */
    font-size: 1em;             /* Tamaño de fuente base */
    line-height: 1.5;           /* Altura de línea */
    border-radius: 4px;         /* Bordes redondeados */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transiciones suaves */
    white-space: nowrap;        /* Evita que el texto se parta */
    text-decoration: none;      /* Asegura que no haya subrayado si se usa en un <a> */
}

/* Icono dentro de un botón */
.btn i {
    margin-right: 8px;          /* Espacio a la derecha del icono */
    /* Podríamos añadir 'pointer-events: none;' si el icono interfiere con el clic */
}

/* Asegurar que al hacer hover en el botón no cambie la decoración del texto */
.btn:hover {
    text-decoration: none;
}

/* === Variaciones de Color === */

/* Botón Primario (Azul) */
.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    color: #fff;
    background-color: #0056b3; /* Azul más oscuro */
    border-color: #0056b3;
}
.btn-primary:focus, .btn-primary.focus { /* Estilo de foco */
    color: #fff;
    background-color: #0056b3;
    border-color: #0056b3;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); /* Resplandor azul */
}
.btn-primary:disabled, .btn-primary.disabled { /* Estilo deshabilitado */
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Botón Secundario (Gris) */
.btn-secondary {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}
.btn-secondary:focus, .btn-secondary.focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
 .btn-secondary:disabled, .btn-secondary.disabled {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Botón Éxito (Verde) */
.btn-success {
    color: #fff;
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}
.btn-success:focus, .btn-success.focus {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}
 .btn-success:disabled, .btn-success.disabled {
    color: #fff;
    background-color: var(--success-color);
    border-color: var(--success-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Botón Peligro (Rojo) */
.btn-danger {
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}
.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}
.btn-danger:focus, .btn-danger.focus {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}
 .btn-danger:disabled, .btn-danger.disabled {
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Botón Advertencia (Amarillo) */
.btn-warning {
    color: var(--dark-color); /* Texto oscuro para contraste con amarillo */
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}
.btn-warning:hover {
    color: var(--dark-color);
    background-color: #e0a800;
    border-color: #d39e00;
}
.btn-warning:focus, .btn-warning.focus {
    color: var(--dark-color);
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
 .btn-warning:disabled, .btn-warning.disabled {
    color: var(--dark-color);
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Botón Información (Celeste) */
.btn-info {
    color: #fff;
    background-color: var(--info-color);
    border-color: var(--info-color);
}
.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}
.btn-info:focus, .btn-info.focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
 .btn-info:disabled, .btn-info.disabled {
    color: #fff;
    background-color: var(--info-color);
    border-color: var(--info-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* === Modificadores de Tamaño y Bloque === */

/* Botón de Bloque (ocupa todo el ancho del contenedor padre) */
.btn-block {
    display: block;             /* Cambia a elemento de bloque */
    width: 100%;                /* Ocupa el 100% del ancho disponible */
}

/* Asegura que si es bloque, el texto se centre igual */
.btn-block:not(:last-child) {
     margin-bottom: 0.5rem;    /* Añade espacio si hay botones bloque seguidos */
 }

/* Botón Pequeño */
.btn-sm {
    padding: 5px 10px;          /* Padding reducido */
    font-size: 0.85em;          /* Tamaño de fuente reducido */
    border-radius: 3px;         /* Radio de borde ligeramente menor */
}

.btn-sm i {
    margin-right: 5px;          /* Espacio icono reducido */
}

/* --- Responsividad para botones (Ajustes menores si son necesarios) --- */
@media (max-width: 480px) {
     .btn {
         /* Podríamos hacer los botones ligeramente más pequeños en móvil */
         padding: 8px 15px;
         font-size: 0.95em;
     }
      .btn-sm {
         padding: 4px 8px;
         font-size: 0.8em;
      }
}